:root {
  color-scheme: dark;
  --bg: #08110f;
  --panel: #101d19;
  --felt: #0d5b3f;
  --felt-dark: #073827;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f4f0e8;
  --muted: #aab8af;
  --gold: #d9ad5b;
  --button: #e7c06d;
  --button-text: #1a1308;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #143328 0, var(--bg) 52%);
  color: var(--text);
}
button, input, select { font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-text);
  cursor: pointer;
  font-weight: 750;
  min-height: 44px;
  padding: 0.75rem 1rem;
}
button:disabled { cursor: not-allowed; opacity: 0.45; }
.secondary { background: #e7e0d0; }
.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.app-shell { width: min(1440px, 100%); margin: 0 auto; padding: 1rem; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1; }
h2 { font-size: 1rem; }
.eyebrow { color: var(--gold); font-size: 0.75rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; margin-bottom: 0.35rem; }
.setup-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.5fr);
  gap: 1rem;
  background: rgba(16, 29, 25, 0.86);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.setup-panel p { color: var(--muted); margin-top: 0.5rem; line-height: 1.5; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
label { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #0b1714; color: var(--text); min-height: 44px; padding: 0.7rem; }
.table-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.side-panel, .action-panel, .board-panel { background: rgba(16, 29, 25, 0.92); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
.side-panel { display: grid; gap: 0.75rem; }
.table-stage { display: grid; gap: 1rem; }
.board-panel { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.pot-box { min-width: 96px; text-align: right; }
.pot-box span { display: block; color: var(--muted); font-size: 0.75rem; }
.pot-box strong { font-size: 1.55rem; }
.poker-table {
  position: relative;
  min-height: 560px;
  border-radius: 999px;
  border: 16px solid #3a2518;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 36%), linear-gradient(145deg, var(--felt), var(--felt-dark));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.10), 0 24px 70px rgba(0,0,0,0.35);
}
.seat {
  position: absolute;
  width: 148px;
  min-height: 108px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 15, 0.84);
  padding: 0.65rem;
}
.seat.active { outline: 2px solid var(--gold); }
.seat.hero { background: rgba(23, 42, 35, 0.96); }
.seat.empty { display: grid; place-items: center; color: rgba(255,255,255,0.35); }
.seat-name { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 750; margin-bottom: 0.35rem; }
.stack, .status, .session-strip, .stat-list, #hand-log { color: var(--muted); font-size: 0.85rem; }
.dealer { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--gold); color: #1d1307; font-size: 0.75rem; }
.cards { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }
.card { display: grid; place-items: center; min-width: 36px; height: 48px; border-radius: 6px; background: #fff8ed; color: #111; font-weight: 900; box-shadow: 0 2px 0 rgba(0,0,0,0.22); }
.card.red { color: #b32626; }
.card.back { color: rgba(255,255,255,0.70); background: repeating-linear-gradient(45deg, #173a6a, #173a6a 5px, #23518b 5px, #23518b 10px); }
.action-panel { display: grid; gap: 0.85rem; }
.action-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.raise-control { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; }
#hand-log { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.stat-list { display: grid; gap: 0.5rem; }
.stat-row { display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 1100px) {
  .table-layout { grid-template-columns: 1fr; }
  .history-panel { order: 4; }
  .poker-table { min-height: 520px; }
}
@media (max-width: 720px) {
  .app-shell { padding: 0.75rem; }
  .topbar, .board-panel { align-items: stretch; flex-direction: column; }
  .setup-panel, .setup-grid { grid-template-columns: 1fr; }
  .poker-table { min-height: 470px; border-width: 10px; border-radius: 120px; }
  .seat { width: 116px; min-height: 96px; padding: 0.5rem; }
  .card { min-width: 30px; height: 42px; }
  .action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raise-control { grid-template-columns: 1fr; }
}
.review-panel {
  background: rgba(16, 29, 25, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.review-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.review-net { border-radius: 999px; padding: 0.45rem 0.7rem; font-weight: 900; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 0.4rem; }
/* Without the label, a losing hand reads "Mona wins" with -$115 sitting beside
   it, which is the winner's name attached to your number. */
.review-net-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; }
.review-net.positive { background: rgba(64, 180, 112, 0.18); color: #7ee0a0; }
.review-net.negative { background: rgba(220, 82, 82, 0.18); color: #ff9d9d; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.review-grid h3 { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--muted); }
.review-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.review-line span { color: var(--muted); }
.review-panel table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.review-panel td { padding: 0.42rem 0.35rem; border-bottom: 1px solid var(--line); }
.review-panel td:last-child { text-align: right; font-weight: 800; }
.review-messages { margin-top: 1rem; display: grid; gap: 0.35rem; color: var(--muted); }
.review-messages p { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.04); }
@media (max-width: 720px) {
  .review-header, .review-grid { grid-template-columns: 1fr; flex-direction: column; }
  .review-panel { padding: 0.85rem; overflow-x: auto; }
}

/* Game-feel pass */
body {
  background:
    radial-gradient(circle at 50% 0%, rgba(217, 173, 91, 0.14), transparent 30%),
    radial-gradient(circle at top, #163a2e 0, var(--bg) 54%);
}
.topbar {
  background: rgba(8, 17, 15, 0.50);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  backdrop-filter: blur(12px);
}
.setup-panel,
.side-panel,
.action-panel,
.board-panel,
.review-panel {
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.22);
}
.panel-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.poker-table-wrap {
  position: relative;
}
.dealer-tray {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: rgba(255,255,255,0.35);
  padding: 0.35rem 0.8rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  pointer-events: none;
}
.poker-table {
  overflow: visible;
}
.seat {
  z-index: 2;
  border-radius: 16px;
  transition: transform 180ms ease, outline-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.seat.active {
  /* No translate: the pod places the seat now, so a seat that carries its own
     centring offset lands half a seat away from where the pod put it. */
  transform: scale(1.035);
  box-shadow: 0 0 0 4px rgba(217, 173, 91, 0.16), 0 10px 35px rgba(0,0,0,0.32);
}
.seat.hero {
  border-color: rgba(217, 173, 91, 0.42);
}
.seat-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status.archetype {
  color: rgba(217, 173, 91, 0.9);
  font-size: 0.72rem;
}
.action-bubble {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translate(-50%, -100%);
  min-width: max-content;
  max-width: 160px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(8, 17, 15, 0.95);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 850;
  padding: 0.32rem 0.55rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  animation: pop-in 180ms ease both;
}
.action-bubble.thinking::after {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-left: 0.25rem;
  border-radius: 999px;
  background: var(--gold);
  animation: pulse-dot 700ms ease-in-out infinite;
}
.card {
  animation: deal-card 220ms ease both;
  border: 1px solid rgba(0,0,0,0.10);
}
.board-cards .card:not(.back) {
  box-shadow: 0 5px 20px rgba(0,0,0,0.25);
}
.action-panel {
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
}
.action-buttons button {
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.action-buttons button:hover:not(:disabled) {
  transform: translateY(-1px);
}
#hand-log li:first-child {
  color: var(--text);
}
@keyframes deal-card {
  from { opacity: 0; transform: translateY(-10px) scale(0.92) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes pop-in {
  from { opacity: 0; transform: translate(-50%, -88%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1); }
}
@media (max-width: 720px) {
  .topbar { align-items: stretch; }
  .session-strip { line-height: 1.35; }
  .dealer-tray { display: none; }
  .seat { width: 112px; min-height: 92px; font-size: 0.82rem; }
  .action-bubble { max-width: 120px; font-size: 0.68rem; }
}
.compact-setting {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  padding: 0.65rem;
}
.compact-setting select {
  min-height: 38px;
  padding: 0.5rem;
}
.review-panel th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  padding: 0.35rem;
  text-align: left;
  text-transform: uppercase;
}
.review-panel th:last-child {
  text-align: right;
}
@media (max-width: 720px) {
  .compact-setting { padding: 0.55rem; }
  .review-panel table { min-width: 520px; }
}

/* Usability pass: make table action visually scannable */
[hidden] { display: none !important; }
.board-panel {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.2fr) minmax(92px, auto);
}
.action-banner {
  justify-self: center;
  align-self: center;
  min-width: min(420px, 100%);
  border: 1px solid rgba(217, 173, 91, 0.35);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(217, 173, 91, 0.20), rgba(255,255,255,0.055));
  color: var(--text);
  font-size: clamp(0.95rem, 2.4vw, 1.18rem);
  font-weight: 950;
  letter-spacing: -0.02em;
  padding: 0.72rem 1rem;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 12px 35px rgba(0,0,0,0.22);
}
.action-banner.thinking {
  animation: banner-pulse 900ms ease-in-out infinite;
}
.action-banner.acted {
  background: linear-gradient(135deg, rgba(71, 151, 116, 0.32), rgba(255,255,255,0.06));
}
.action-banner.hero-turn {
  border-color: rgba(126, 224, 160, 0.48);
  background: linear-gradient(135deg, rgba(64, 180, 112, 0.28), rgba(255,255,255,0.055));
}
.action-banner.complete {
  border-color: rgba(217, 173, 91, 0.70);
  background: linear-gradient(135deg, rgba(217, 173, 91, 0.30), rgba(255,255,255,0.07));
}
.chip-commit {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  background: rgba(7, 18, 15, 0.96);
  color: #ffe29b;
  font-size: 0.74rem;
  font-weight: 950;
  padding: 0.25rem 0.5rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  animation: chip-pop 220ms ease both;
}
.chip-stack {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 18%, transparent 19%),
    conic-gradient(#f7d86d 0 12%, #923333 12% 24%, #f7d86d 24% 36%, #923333 36% 48%, #f7d86d 48% 60%, #923333 60% 72%, #f7d86d 72% 84%, #923333 84% 100%);
  box-shadow: inset 0 0 0 2px #f7d86d, 0 1px 0 rgba(0,0,0,0.35);
}
.seat.folded {
  opacity: 0.58;
}
@keyframes banner-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 35px rgba(0,0,0,0.22); }
  50% { transform: scale(1.015); box-shadow: 0 12px 42px rgba(217,173,91,0.18); }
}
@keyframes chip-pop {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.88); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 720px) {
  .board-panel { grid-template-columns: 1fr; }
  .action-banner { justify-self: stretch; min-width: 0; order: 3; }
  .chip-commit { bottom: -12px; font-size: 0.66rem; }
  .chip-stack { width: 15px; height: 15px; }
}

/* Major poker-app UX redesign */
.app-shell {
  width: min(1360px, 100%);
  padding: clamp(0.55rem, 1.8vw, 1rem);
}
.topbar {
  margin-bottom: 0.75rem;
}
.topbar h1 {
  font-size: clamp(1.45rem, 3vw, 2.8rem);
}
.table-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  grid-template-areas:
    "table session"
    "table history";
  gap: 0.85rem;
  align-items: start;
}
.table-stage { grid-area: table; gap: 0.75rem; }
.session-panel { grid-area: session; }
.history-panel { grid-area: history; }
.poker-table-wrap {
  position: relative;
  min-height: min(68vh, 720px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 44%, rgba(29, 148, 94, 0.68) 0 30%, rgba(12, 91, 61, 0.92) 31% 52%, transparent 53%),
    radial-gradient(circle at center, rgba(255,255,255,0.07), transparent 34%),
    linear-gradient(145deg, #07120f, #0e211b);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04), 0 28px 90px rgba(0,0,0,0.38);
  overflow: hidden;
}
.poker-table {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.poker-table::before {
  content: "";
  position: absolute;
  inset: 13% 5% 9%;
  border: clamp(10px, 1.8vw, 18px) solid rgba(114, 68, 39, 0.92);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08), 0 18px 55px rgba(0,0,0,0.28);
}
.center-hud {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  width: min(460px, 52%);
  pointer-events: none;
}
.center-hud .pot-box {
  min-width: 156px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(5, 13, 11, 0.76);
  padding: 0.42rem 0.9rem;
  box-shadow: 0 10px 32px rgba(0,0,0,0.34);
}
.center-hud .pot-box span {
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.center-hud .pot-box strong {
  display: block;
  font-size: clamp(1.25rem, 3vw, 2.1rem);
  line-height: 1.05;
}
.center-hud .board-cards {
  justify-content: center;
  min-height: 58px;
  margin: 0;
}
.center-hud .card {
  min-width: clamp(38px, 4.8vw, 58px);
  height: clamp(52px, 6.7vw, 78px);
  font-size: clamp(1rem, 2vw, 1.35rem);
  border-radius: 9px;
}
.action-banner {
  min-width: min(430px, 100%);
  padding: 0.62rem 0.95rem;
}
.dealer-tray {
  top: 71%;
  z-index: 2;
}
.seat {
  z-index: 5;
  width: clamp(124px, 12vw, 158px);
  min-height: 104px;
  border-radius: 18px;
  background: rgba(5, 15, 13, 0.86);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 12px 36px rgba(0,0,0,0.30);
}
.seat.active {
  outline: 0;
  border-color: rgba(255, 221, 129, 0.95);
  box-shadow: 0 0 0 3px rgba(217, 173, 91, 0.30), 0 0 30px rgba(217, 173, 91, 0.20), 0 14px 42px rgba(0,0,0,0.36);
}
.seat.hero {
  background: linear-gradient(180deg, rgba(34, 58, 49, 0.98), rgba(8, 22, 18, 0.94));
  border-color: rgba(126, 224, 160, 0.45);
}
.seat.folded {
  opacity: 0.42;
  filter: grayscale(0.35);
}
.seat-top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  margin-bottom: 0.42rem;
}
.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(145deg, #f0c76d, #8d5b24);
  color: #170f07;
  font-weight: 950;
  font-size: 0.78rem;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.20), 0 6px 14px rgba(0,0,0,0.28);
}
.seat.hero .avatar {
  background: linear-gradient(145deg, #7ee0a0, #1f8e59);
}
.seat-copy { min-width: 0; }
.seat-name { margin-bottom: 0.1rem; }
.stack { font-weight: 850; color: #dfe9e3; }
.seat .cards {
  justify-content: center;
  min-height: 42px;
}
.seat .card {
  min-width: 30px;
  height: 40px;
  font-size: 0.9rem;
}
.status {
  margin-top: 0.18rem;
  text-align: center;
  text-transform: capitalize;
}
.action-bubble {
  top: -10px;
  font-size: 0.78rem;
  background: rgba(5, 13, 11, 0.98);
  border-color: rgba(217, 173, 91, 0.34);
  color: #fff6d8;
}
.chip-commit {
  bottom: -19px;
  color: #fff1b8;
  background: rgba(22, 12, 8, 0.97);
  border-color: rgba(255, 226, 155, 0.34);
}
.action-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(220px, 1fr);
  gap: 0.75rem;
  align-items: center;
  border-radius: 22px;
  padding: 0.85rem;
  bottom: 0.55rem;
}
.action-buttons {
  grid-template-columns: repeat(4, minmax(92px, 1fr));
}
.action-buttons button {
  min-height: 56px;
  border-radius: 16px;
  font-size: clamp(0.95rem, 2vw, 1.08rem);
}
.raise-control {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.6rem;
  background: rgba(255,255,255,0.035);
}
.bet-presets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}
.bet-preset {
  min-height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
}
.history-panel {
  max-height: 320px;
  overflow: auto;
}
.history-panel li {
  line-height: 1.3;
}
@media (max-width: 1100px) {
  .table-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "table"
      "session"
      "history";
  }
  .poker-table-wrap { min-height: 660px; }
  .session-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .session-panel h2, .session-panel .panel-note { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .topbar { padding: 0.75rem; }
  .poker-table-wrap { min-height: 590px; border-radius: 24px; }
  .center-hud { width: 72%; top: 43%; gap: 0.45rem; }
  .center-hud .pot-box { min-width: 124px; padding: 0.34rem 0.7rem; }
  .center-hud .board-cards { gap: 0.22rem; }
  .center-hud .card { min-width: 34px; height: 48px; font-size: 0.95rem; }
  .seat { width: 108px; min-height: 94px; padding: 0.48rem; }
  .seat-top { grid-template-columns: 28px minmax(0, 1fr); gap: 0.34rem; }
  .avatar { width: 28px; height: 28px; font-size: 0.68rem; }
  .seat .card { min-width: 25px; height: 34px; }
  .action-panel { grid-template-columns: 1fr; }
  .action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bet-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .session-panel { grid-template-columns: 1fr; }
}


/* Poker-app clarity pass: table-first action reading */
.action-trail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: min(520px, 100%);
}
.trail-empty,
.trail-pill {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(6, 15, 13, 0.74);
  color: rgba(244,240,232,0.82);
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.36rem 0.55rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.20);
}
.trail-pill:first-child {
  color: var(--text);
  transform: scale(1.04);
}
.trail-pill strong { color: #fff2bc; }
.table-pot-core {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 118px;
  min-height: 72px;
  border-radius: 999px;
  border: 1px solid rgba(255, 231, 164, 0.26);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.16), transparent 36%),
    linear-gradient(180deg, rgba(20, 28, 24, 0.92), rgba(7, 13, 11, 0.96));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04), 0 18px 42px rgba(0,0,0,0.36);
  pointer-events: none;
}
.table-pot-core span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.table-pot-core strong {
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}
.bet-marker {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  background: rgba(7, 15, 13, 0.95);
  color: #f9f3df;
  font-size: 0.78rem;
  font-weight: 950;
  padding: 0.32rem 0.55rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
  animation: bet-marker-pop 260ms ease both;
  pointer-events: none;
}
.seat-commit-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: fit-content;
  margin: 0.32rem auto 0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: #ffe29b;
  font-size: 0.70rem;
  font-weight: 900;
  padding: 0.18rem 0.42rem;
}
.seat-commit-mini .chip-stack {
  width: 13px;
  height: 13px;
}
.tone-call .avatar,
.tone-check .avatar { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), 0 0 0 3px rgba(104, 184, 255, 0.18); }
.tone-raise .avatar,
.tone-allin .avatar { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), 0 0 0 3px rgba(217, 173, 91, 0.24); }
.tone-fold .avatar { opacity: 0.55; }
.action-bubble.call,
.trail-pill.tone-call,
.bet-marker.tone-call { border-color: rgba(104, 184, 255, 0.42); background: rgba(24, 63, 95, 0.92); }
.action-bubble.check,
.trail-pill.tone-check { border-color: rgba(126, 224, 160, 0.36); background: rgba(24, 82, 58, 0.90); }
.action-bubble.raise,
.trail-pill.tone-raise,
.bet-marker.tone-raise { border-color: rgba(255, 211, 112, 0.48); background: rgba(93, 59, 20, 0.94); }
.action-bubble.allin,
.trail-pill.tone-allin,
.bet-marker.tone-allin { border-color: rgba(255, 115, 115, 0.58); background: rgba(104, 27, 27, 0.94); }
.action-bubble.fold,
.trail-pill.tone-fold { border-color: rgba(255,255,255,0.12); background: rgba(43, 47, 44, 0.90); color: rgba(244,240,232,0.62); }
.seat.active::after {
  content: "Action";
  position: absolute;
  right: 0.65rem;
  top: -0.66rem;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1308;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.42rem;
  text-transform: uppercase;
}
.chip-flight {
  position: absolute;
  left: var(--from-left);
  top: var(--from-top);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 226, 155, 0.48);
  border-radius: 999px;
  background: rgba(22, 12, 8, 0.96);
  color: #fff1b8;
  font-size: 0.74rem;
  font-weight: 950;
  padding: 0.26rem 0.48rem;
  box-shadow: 0 14px 30px rgba(0,0,0,0.36);
  pointer-events: none;
  animation: chip-flight-to-pot 900ms cubic-bezier(.2,.72,.2,1) forwards;
}
.chip-flight .chip-stack {
  width: 15px;
  height: 15px;
}
.trail-pill.latest {
  animation: trail-flash 520ms ease both;
}
.trail-pill em {
  color: #ffe29b;
  font-style: normal;
  font-weight: 950;
}
.trail-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.3rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
}
/* Lands on wherever the pot actually is. `--pot-left`/`--pot-top` are measured
   from the pot element on every render, because this animation used to end at a
   hardcoded `top: 58%` - the pot's position under the old layout - and went on
   pointing there after the pot moved. An animation aimed at a coordinate nobody
   maintains is how chips end up sliding into empty felt. */
@keyframes chip-flight-to-pot {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% {
    opacity: 0;
    left: var(--pot-left, 50%);
    top: var(--pot-top, 50%);
    transform: translate(-50%, -50%) scale(0.82);
  }
}
@keyframes trail-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 226, 155, 0.36), 0 8px 22px rgba(0,0,0,0.20); }
  100% { box-shadow: 0 0 0 6px rgba(255, 226, 155, 0), 0 8px 22px rgba(0,0,0,0.20); }
}
@keyframes bet-marker-pop {
  from { opacity: 0; transform: translate(-50%, -38%) scale(0.82); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 720px) {
  .action-trail { gap: 0.26rem; }
  .trail-pill:nth-child(n+3) { display: none; }
  .table-pot-core { top: 58%; min-width: 92px; min-height: 58px; }
  .table-pot-core strong { font-size: 1.05rem; }
  .bet-marker { font-size: 0.66rem; padding: 0.24rem 0.42rem; }
  .seat-commit-mini { display: none; }
}

/* Readability pass: seat identity, card clarity, safer spacing */
.seat-number {
  position: absolute;
  right: 0.45rem;
  top: 0.42rem;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72);
  font-size: 0.68rem;
  font-weight: 950;
}
.seat.tone-1 .avatar { background: linear-gradient(145deg, #78d99c, #18784b); }
.seat.tone-2 .avatar { background: linear-gradient(145deg, #f2c96f, #8d5b24); }
.seat.tone-3 .avatar { background: linear-gradient(145deg, #7cb7ff, #225a9d); color: #07111f; }
.seat.tone-4 .avatar { background: linear-gradient(145deg, #ef8e8e, #963232); }
.seat.tone-5 .avatar { background: linear-gradient(145deg, #c79dff, #6040a8); }
.seat.tone-6 .avatar { background: linear-gradient(145deg, #77dce2, #196b73); }
.card {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: -0.04em;
  text-shadow: none;
}
.card.back {
  color: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 22%),
    repeating-linear-gradient(45deg, #153a72, #153a72 5px, #24579a 5px, #24579a 10px);
}
.seat .card {
  min-width: 34px;
  height: 46px;
  font-size: 1rem;
  border-radius: 8px;
}
.seat.hero .card {
  min-width: 42px;
  height: 56px;
  font-size: 1.16rem;
}
.center-hud .card {
  min-width: clamp(44px, 5.4vw, 64px);
  height: clamp(60px, 7.4vw, 86px);
  font-size: clamp(1.12rem, 2.3vw, 1.5rem);
}
.bet-presets {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.bet-preset {
  font-weight: 900;
}
@media (max-width: 720px) {
  .seat-number { width: 17px; height: 17px; font-size: 0.58rem; }
  .seat .card { min-width: 27px; height: 37px; font-size: 0.86rem; }
  .seat.hero .card { min-width: 34px; height: 45px; font-size: 1rem; }
  .center-hud .card { min-width: 36px; height: 50px; font-size: 0.98rem; }
}


/* Product-quality polish: accessibility, onboarding, and casino-training clarity */
:root {
  --focus: #8ef0b1;
  --danger: #ff8f8f;
  --info: #8bc7ff;
  --glass: rgba(7, 17, 14, 0.78);
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.skip-link {
  position: fixed;
  left: 1rem;
  top: 0.75rem;
  z-index: 1000;
  transform: translateY(-150%);
  border-radius: 999px;
  background: var(--focus);
  color: #06100d;
  font-weight: 950;
  padding: 0.7rem 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.38);
}
.skip-link:focus { transform: translateY(0); }
button, select, input, .seat, .help-dialog { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(142, 240, 177, 0.16), 0 10px 24px rgba(0,0,0,0.28);
}
button:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.setup-copy { display: grid; align-content: start; gap: 0.65rem; }
.setup-copy h2 { font-size: clamp(1.45rem, 3vw, 2.35rem); line-height: 1.02; letter-spacing: -0.04em; }
.feature-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.feature-row span,
.keyboard-hint,
.coach-panel,
.table-help {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.045);
}
.feature-row span {
  border-radius: 999px;
  color: #f7df9f;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0.36rem 0.62rem;
}
.table-help {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-radius: 18px;
  padding: 0.78rem 0.9rem;
  color: var(--muted);
  box-shadow: 0 14px 42px rgba(0,0,0,0.18);
}
.table-help strong { color: var(--text); }
.compact-button { min-height: 38px; padding: 0.48rem 0.75rem; border-radius: 999px; white-space: nowrap; }
.coach-panel {
  border-radius: 18px;
  color: #dbe7df;
  line-height: 1.45;
  padding: 0.78rem 0.9rem;
  box-shadow: 0 12px 38px rgba(0,0,0,0.16);
}
.coach-panel strong { color: var(--gold); }
.action-subtitle {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
  margin-top: 0.28rem;
}
.keyboard-hint {
  grid-column: 1 / -1;
  border-radius: 999px;
  color: rgba(244,240,232,0.70);
  font-size: 0.75rem;
  line-height: 1.35;
  padding: 0.48rem 0.7rem;
  text-align: center;
}
.action-buttons button:first-child { background: linear-gradient(180deg, #f0d7b0, #d7b676); }
.action-buttons button:nth-child(2) { background: linear-gradient(180deg, #8ee5ad, #49b873); color: #06100d; }
.action-buttons button:nth-child(3) { background: linear-gradient(180deg, #f3c768, #d99731); }
.action-buttons button:nth-child(4) { background: linear-gradient(180deg, #ff9a8f, #d94b43); color: #210908; }
.action-buttons button[aria-keyshortcuts]::after {
  content: attr(aria-keyshortcuts);
  display: block;
  margin-top: 0.15rem;
  color: rgba(0,0,0,0.55);
  font-size: 0.66rem;
  font-weight: 950;
}
.bet-preset:focus-visible { background: rgba(142, 240, 177, 0.16); }
.help-dialog {
  width: min(780px, calc(100vw - 1.5rem));
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 26px;
  background: transparent;
  color: var(--text);
  padding: 0;
  box-shadow: 0 28px 120px rgba(0,0,0,0.55);
}
.help-dialog::backdrop { background: rgba(0,0,0,0.62); backdrop-filter: blur(6px); }
.dialog-card {
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 0%, rgba(217, 173, 91, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(16,29,25,0.98), rgba(5,12,10,0.98));
  padding: clamp(1rem, 3vw, 1.35rem);
}
.dialog-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.dialog-header h2 { font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -0.04em; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.help-grid section {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  padding: 0.9rem;
}
.help-grid h3 { margin: 0 0 0.4rem; color: #f7df9f; font-size: 0.98rem; }
.help-grid p { color: var(--muted); line-height: 1.48; }
.seat[aria-label] { cursor: default; }
.seat.active .seat-number { background: var(--gold); color: #1a1308; }
.trail-pill { display: inline-flex; align-items: center; gap: 0.22rem; }
.trail-pill strong, .trail-pill span, .trail-pill em { white-space: nowrap; }
@media (max-width: 900px) {
  .history-panel { display: none; }
  .keyboard-hint { border-radius: 14px; }
}
@media (max-width: 720px) {
  .app-shell { padding-bottom: max(0.55rem, env(safe-area-inset-bottom)); }
  .table-help { align-items: stretch; flex-direction: column; }
  .table-help .compact-button { align-self: start; }
  .coach-panel { font-size: 0.9rem; }
  .action-panel {
    position: sticky;
    bottom: max(0.4rem, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 36px rgba(0,0,0,0.32), 0 18px 60px rgba(0,0,0,0.22);
  }
  .action-buttons button { min-height: 58px; }
  .keyboard-hint { font-size: 0.68rem; text-align: left; }
  .help-grid { grid-template-columns: 1fr; }
  .dialog-header { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final game-feel polish: table status, hero decision state, and hand-end flow */
.table-status-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}
.status-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  padding: 0.62rem 0.72rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  min-width: 0;
}
.status-card span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-card strong {
  display: block;
  margin-top: 0.12rem;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(0.9rem, 2vw, 1.08rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-panel.hero-turn {
  border-color: rgba(142, 240, 177, 0.50);
  background:
    radial-gradient(circle at 88% 12%, rgba(142, 240, 177, 0.16), transparent 34%),
    rgba(16, 29, 25, 0.94);
  box-shadow: 0 0 0 1px rgba(142, 240, 177, 0.12), 0 24px 70px rgba(0,0,0,0.34);
}
.action-panel.hero-turn #action-eyebrow::before {
  content: "●";
  color: var(--focus);
  margin-right: 0.35rem;
  animation: pulse-dot 800ms ease-in-out infinite;
}
.action-panel.watching {
  border-color: rgba(139, 199, 255, 0.24);
}
.action-panel.between-hands,
.action-panel.complete {
  border-color: rgba(217, 173, 91, 0.38);
}
.action-panel.hero-turn .action-buttons button:not(:disabled) {
  box-shadow: 0 10px 24px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.20);
}
.review-panel {
  position: relative;
  overflow: hidden;
}
.review-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(217, 173, 91, 0.16), transparent 36%);
  pointer-events: none;
}
.review-panel > * {
  position: relative;
}
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.review-actions button {
  min-width: 150px;
}
.review-header h2 {
  font-size: clamp(1.18rem, 3vw, 1.8rem);
  letter-spacing: -0.04em;
}
.review-net {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 28px rgba(0,0,0,0.22);
}
.session-strip {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  padding: 0.45rem 0.7rem;
  white-space: nowrap;
}
.poker-table-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(0,0,0,0.20) 100%);
  pointer-events: none;
}
.poker-table-wrap .center-hud,
.poker-table-wrap .poker-table,
.poker-table-wrap .dealer-tray,
@media (max-width: 900px) {
  .table-status-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .session-strip { white-space: normal; }
}
@media (max-width: 520px) {
  .table-status-cards { grid-template-columns: 1fr 1fr; gap: 0.42rem; }
  .status-card { padding: 0.5rem 0.55rem; border-radius: 13px; }
  .status-card strong { font-size: 0.88rem; }
  .review-actions { display: grid; grid-template-columns: 1fr; }
  .review-actions button { width: 100%; }
}

/* Player identity and focus upgrade */
.seat.tone-7 .avatar { background: linear-gradient(145deg, #ffb36d, #a4491f); }
.seat.tone-8 .avatar { background: linear-gradient(145deg, #9be36f, #4f8d1f); color: #071107; }
.seat.tone-9 .avatar { background: linear-gradient(145deg, #ff9fd5, #9b2c72); }
.seat.tone-1 { --seat-accent: #78d99c; }
.seat.tone-2 { --seat-accent: #f2c96f; }
.seat.tone-3 { --seat-accent: #7cb7ff; }
.seat.tone-4 { --seat-accent: #ef8e8e; }
.seat.tone-5 { --seat-accent: #c79dff; }
.seat.tone-6 { --seat-accent: #77dce2; }
.seat.tone-7 { --seat-accent: #ffb36d; }
.seat.tone-8 { --seat-accent: #9be36f; }
.seat.tone-9 { --seat-accent: #ff9fd5; }
.seat:not(.empty) {
  border-color: color-mix(in srgb, var(--seat-accent, rgba(255,255,255,0.22)) 38%, rgba(255,255,255,0.12));
}
.seat:not(.empty)::before {
  content: "";
  position: absolute;
  left: 0.68rem;
  right: 0.68rem;
  top: -2px;
  height: 3px;
  border-radius: 999px;
  background: var(--seat-accent, rgba(255,255,255,0.4));
  opacity: 0.86;
}
.poker-table:has(.seat.active) .seat:not(.active):not(.folded) {
  opacity: 0.84;
  transform: scale(0.985);
}
.poker-table:has(.seat.active) .seat.active {
  opacity: 1;
}
.seat.active {
  border-color: var(--focus);
  background:
    radial-gradient(circle at 88% 8%, rgba(142, 240, 177, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(29, 55, 45, 0.98), rgba(7, 20, 16, 0.96));
}
.seat.active::before {
  left: 0.35rem;
  right: 0.35rem;
  top: -4px;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--focus), transparent);
  opacity: 1;
  animation: active-seat-scan 900ms ease-in-out infinite;
}
.seat.active::after {
  content: "ACTION";
  right: 0.55rem;
  top: -0.78rem;
  background: linear-gradient(180deg, #a7ffc2, #5dd987);
  box-shadow: 0 10px 28px rgba(93,217,135,0.28);
}
.seat.active .avatar {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28), 0 0 0 4px rgba(142,240,177,0.30), 0 0 28px rgba(142,240,177,0.35);
}
.seat.active .seat-name span::after {
  content: " · turn";
  color: var(--focus);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.table-status-cards .status-card:nth-child(3) {
  border-color: rgba(142,240,177,0.32);
  background: linear-gradient(180deg, rgba(142,240,177,0.11), rgba(255,255,255,0.025));
}
.sound-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
@keyframes active-seat-scan {
  0%, 100% { opacity: 0.55; transform: scaleX(0.82); }
  50% { opacity: 1; transform: scaleX(1); }
}
@supports not selector(:has(*)) {
  .poker-table .seat:not(.active):not(.folded) { opacity: 0.92; }
}
@media (max-width: 720px) {
  .seat.active .seat-name span::after { display: none; }
  .seat:not(.empty)::before { left: 0.45rem; right: 0.45rem; }
}

/* Information-design declutter pass: table + action rail first */
.table-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "table"
    "session";
}
.table-stage {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.table-help,
.table-status-cards,
.coach-panel,
.history-panel {
  display: none !important;
}
.poker-table-wrap {
  min-height: min(72vh, 760px);
}
.action-panel {
  max-width: 980px;
  width: min(980px, 100%);
  margin: 0 auto;
  grid-template-columns: minmax(180px, 0.6fr) minmax(260px, 1fr);
}
.action-subtitle {
  max-width: 38ch;
}
.keyboard-hint {
  display: none;
}
.action-utility {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: -0.1rem;
}
.action-utility .compact-button {
  min-height: 34px;
  padding: 0.36rem 0.72rem;
  color: rgba(244,240,232,0.78);
  font-size: 0.78rem;
}
.session-panel[hidden],
.history-panel[hidden] {
  display: none !important;
}
.session-panel {
  grid-area: session;
  max-width: 980px;
  width: min(980px, 100%);
  margin: 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  border-radius: 18px;
  background: rgba(7, 17, 14, 0.88);
}
.session-panel h2,
.session-panel .panel-note {
  display: none;
}
.session-panel .stat-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}
.session-panel .stat-row {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem;
}
.session-panel .stat-row span {
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.session-panel .stat-row strong {
  color: var(--text);
  font-size: 0.95rem;
}
.session-panel > button {
  min-height: 40px;
  border-radius: 999px;
}
.topbar {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.topbar h1 {
  font-size: clamp(1.25rem, 2.4vw, 2.1rem);
}
.setup-panel {
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .action-panel {
    grid-template-columns: 1fr;
  }
  .action-subtitle {
    max-width: none;
  }
  .session-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .session-panel .stat-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .topbar {
    display: none;
  }
  .app-shell {
    padding-top: 0.45rem;
  }
  .poker-table-wrap {
    min-height: 62vh;
  }
  .action-panel {
    padding: 0.7rem;
  }
  .action-utility {
    justify-content: space-between;
  }
  .session-panel {
    grid-template-columns: 1fr;
  }
}

/* Action rail compression: keep decisions visible without covering the table */
.action-panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  padding: 0.62rem 0.72rem;
}
.action-panel > div:first-child {
  padding-right: 8.5rem;
}
.action-panel .eyebrow {
  margin-bottom: 0.18rem;
}
.action-panel h2 {
  font-size: clamp(1.05rem, 2.1vw, 1.42rem);
  line-height: 1.05;
}
.action-subtitle {
  display: none;
}
.raise-control {
  grid-template-columns: auto minmax(160px, 1fr) auto;
  gap: 0.45rem;
  padding: 0.42rem;
  border-radius: 14px;
}
.raise-control label {
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#raise-output {
  font-weight: 950;
  color: #ffe29b;
}
.bet-presets {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.08rem;
  scrollbar-width: thin;
}
.bet-preset {
  flex: 0 0 auto;
  min-height: 34px;
  border-radius: 999px;
  font-size: 0.76rem;
  padding: 0.34rem 0.58rem;
  white-space: nowrap;
}
.action-buttons {
  gap: 0.42rem;
}
.action-buttons button {
  min-height: 50px;
  padding: 0.52rem 0.7rem;
}
.action-buttons button[aria-keyshortcuts]::after {
  display: none;
}
/*
 * Help/Options sit under the prompt in the left column. They must never be
 * absolutely positioned over the action row: doing so put them on top of the
 * All In button, where a misclick costs a stack.
 */
.action-utility {
  position: static;
  grid-column: 1;
  justify-self: start;
  width: auto;
  margin: 0;
  justify-content: flex-start;
}
.action-utility .compact-button {
  min-height: 30px;
  padding: 0.28rem 0.58rem;
  font-size: 0.72rem;
}
@media (max-width: 720px) {
  .action-panel > div:first-child {
    padding-right: 0;
  }
  .action-utility {
    position: static;
    justify-content: space-between;
  }
  .action-buttons button {
    min-height: 54px;
  }
}


/* Information design pass: poker-client density */
.table-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "table";
  max-width: 1180px;
  margin: 0 auto;
}
.side-panel[hidden],
.table-status-cards[hidden],
.coach-panel[hidden] {
  display: none !important;
}
.table-status-cards {
  display: none;
}
.table-stage {
  gap: 0.65rem;
}
.table-help {
  display: none;
}
.topbar {
  align-items: center;
}
.session-strip {
  font-size: 0.82rem;
  opacity: 0.82;
}
.poker-table-wrap {
  min-height: min(74vh, 760px);
}
.action-panel {
  grid-template-columns: minmax(140px, 0.46fr) minmax(360px, 1fr) auto;
  background: rgba(8, 18, 15, 0.88);
  backdrop-filter: blur(14px);
}
.action-panel.watching {
  grid-template-columns: 1fr auto;
  padding: 0.62rem 0.72rem;
  opacity: 0.88;
}
.action-panel.watching .action-subtitle {
  display: none;
}
.action-panel.watching #action-title {
  font-size: 1rem;
}
.action-panel.watching #action-eyebrow {
  margin-bottom: 0.12rem;
}
.action-utility {
  display: flex;
  justify-content: end;
  gap: 0.42rem;
}
.action-utility .compact-button {
  min-height: 36px;
  padding-inline: 0.72rem;
}
.keyboard-hint {
  display: none;
}
.session-panel:not([hidden]) {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  top: 5.6rem;
  z-index: 30;
  width: min(320px, calc(100vw - 2rem));
  max-height: calc(100vh - 7rem);
  overflow: auto;
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(0,0,0,0.55);
}
.history-panel {
  display: none;
}
.seat-number {
  display: none;
}
.seat.active .seat-name span::after {
  content: "";
}
.seat .status {
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.78rem;
}
.seat:not(.active):not(.hero) .status {
  display: none;
}
.seat-commit-mini {
  display: none;
}
.action-trail .trail-pill:nth-child(n+4) {
  display: none;
}
.trail-empty {
  display: none;
}
.bet-presets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.coach-panel {
  margin-top: -0.15rem;
}
@media (max-width: 900px) {
  .topbar {
    border-radius: 24px;
    padding: 0.9rem;
  }
  .session-strip {
    white-space: normal;
  }
  .poker-table-wrap {
    min-height: 680px;
  }
  .action-panel {
    grid-template-columns: 1fr;
  }
  .action-utility {
    justify-content: stretch;
  }
  .action-utility .compact-button {
    flex: 1;
  }
}
@media (max-width: 720px) {
  .app-shell {
    padding: 0.5rem;
  }
  .topbar {
    margin-bottom: 0.5rem;
  }
  .topbar h1 {
    font-size: clamp(1.75rem, 11vw, 2.7rem);
  }
  .poker-table-wrap {
    min-height: calc(100vh - 235px);
    border-radius: 22px;
  }
  .center-hud {
    top: 41%;
    width: 68%;
  }
  .action-panel {
    margin-top: -0.25rem;
    padding: 0.68rem;
    border-radius: 18px;
  }
  .action-panel.watching {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .action-panel.watching .action-buttons,
  .action-panel.watching .raise-control {
    display: none;
  }
  .action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .action-buttons button[aria-keyshortcuts]::after {
    display: none;
  }
  .bet-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .session-panel:not([hidden]) {
    inset: auto 0.5rem max(0.5rem, env(safe-area-inset-bottom));
    width: auto;
    max-height: 72vh;
  }
}

/* Seat separation pass: stronger player boxes and wider table spacing */
.poker-table-wrap {
  min-height: min(76vh, 800px);
}
.seat.tone-1 { --seat-rgb: 120, 217, 156; }
.seat.tone-2 { --seat-rgb: 242, 201, 111; }
.seat.tone-3 { --seat-rgb: 124, 183, 255; }
.seat.tone-4 { --seat-rgb: 239, 142, 142; }
.seat.tone-5 { --seat-rgb: 199, 157, 255; }
.seat.tone-6 { --seat-rgb: 119, 220, 226; }
.seat.tone-7 { --seat-rgb: 255, 179, 109; }
.seat.tone-8 { --seat-rgb: 155, 227, 111; }
.seat.tone-9 { --seat-rgb: 255, 159, 213; }
.seat:not(.empty) {
  width: clamp(116px, 10.7vw, 148px);
  min-height: 98px;
  border: 2px solid rgba(var(--seat-rgb, 255,255,255), 0.48);
  background:
    linear-gradient(90deg, rgba(var(--seat-rgb, 255,255,255), 0.22), transparent 6px),
    radial-gradient(circle at 18% 0%, rgba(var(--seat-rgb, 255,255,255), 0.18), transparent 42%),
    linear-gradient(180deg, rgba(5, 15, 13, 0.94), rgba(5, 13, 11, 0.86));
  box-shadow:
    0 0 0 1px rgba(var(--seat-rgb, 255,255,255), 0.16),
    0 14px 36px rgba(0,0,0,0.34);
}
.seat:not(.empty)::before {
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: 6px;
  height: auto;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, rgba(var(--seat-rgb, 255,255,255), 0.96), rgba(var(--seat-rgb, 255,255,255), 0.34));
  opacity: 1;
}
.seat .seat-top {
  grid-template-columns: 36px minmax(0, 1fr);
}
.seat .seat-name {
  color: rgb(var(--seat-rgb, 244,240,232));
  text-shadow: 0 1px 12px rgba(var(--seat-rgb,255,255,255), 0.16);
}
.seat .stack {
  color: rgba(244,240,232,0.88);
}
.seat .status {
  margin-top: 0.08rem;
  color: rgba(var(--seat-rgb,255,255,255), 0.78);
  font-weight: 850;
}
.seat.active {
  width: clamp(124px, 11.5vw, 158px);
  border-color: var(--focus);
  box-shadow:
    0 0 0 3px rgba(142,240,177,0.28),
    0 0 38px rgba(142,240,177,0.28),
    0 16px 44px rgba(0,0,0,0.40);
}
.seat.active::before {
  width: 8px;
  background: linear-gradient(180deg, var(--focus), rgba(142,240,177,0.34));
  animation: none;
}
.seat.folded:not(.active) {
  opacity: 0.38;
}
.seat-number {
  border: 1px solid rgba(var(--seat-rgb,255,255,255), 0.28);
  background: rgba(var(--seat-rgb,255,255,255), 0.16);
  color: rgba(255,255,255,0.9);
}
@media (max-width: 720px) {
  .poker-table-wrap {
    min-height: calc(100vh - 220px);
  }
  .seat:not(.empty) {
    width: 104px;
    min-height: 88px;
    border-width: 1px;
  }
  .seat.active {
    width: 112px;
  }
  .seat .seat-top {
    grid-template-columns: 28px minmax(0, 1fr);
  }
}

/* Showdown reveal: keep cards face up and obvious until the player deals next hand */
.review-panel:not([hidden]) {
  display: grid;
  gap: 0.9rem;
  max-width: 980px;
  width: min(980px, 100%);
  margin: 0 auto 1rem;
  border-color: rgba(217, 173, 91, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(217, 173, 91, 0.14), transparent 36%),
    rgba(8, 18, 15, 0.94);
}
.showdown-stage {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
  padding: 0.85rem;
}
.showdown-stage-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.showdown-stage-header h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: -0.03em;
}
.showdown-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.65rem;
}
.showdown-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  padding: 0.72rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20);
}
.showdown-card.winner {
  border-color: rgba(142,240,177,0.70);
  background:
    radial-gradient(circle at 82% 0%, rgba(142,240,177,0.18), transparent 38%),
    linear-gradient(180deg, rgba(34, 76, 52, 0.46), rgba(255,255,255,0.03));
  box-shadow: 0 0 0 2px rgba(142,240,177,0.16), 0 16px 42px rgba(0,0,0,0.28);
}
.showdown-card.hero {
  border-style: solid;
}
.showdown-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.showdown-player span {
  color: var(--text);
  font-weight: 950;
}
.showdown-player strong {
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  color: #ffe29b;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.44rem;
  text-transform: uppercase;
}
.showdown-card.winner .showdown-player strong {
  background: rgba(142,240,177,0.18);
  color: var(--focus);
}
.showdown-hole-cards {
  justify-content: center;
  margin: 0.35rem 0 0.5rem;
}
.showdown-hole-cards .card {
  min-width: 46px;
  height: 62px;
  border-radius: 9px;
  font-size: 1.22rem;
}
.showdown-hand {
  color: rgba(244,240,232,0.78);
  font-size: 0.82rem;
  font-weight: 850;
  text-align: center;
  text-transform: capitalize;
}
.showdown-net {
  margin-top: 0.4rem;
  text-align: center;
  font-weight: 950;
}
.showdown-net.positive { color: var(--focus); }
.showdown-net.negative { color: var(--danger); }
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}
.review-actions button {
  min-width: 150px;
}
.seat.showdown:not(.folded) {
  opacity: 1 !important;
  filter: none;
}
.seat.showdown.winner {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(142,240,177,0.20), 0 0 34px rgba(142,240,177,0.22), 0 16px 42px rgba(0,0,0,0.34);
}
.seat.showdown.winner::after {
  content: "WINNER";
  background: linear-gradient(180deg, #a7ffc2, #5dd987);
}
.seat.showdown:not(.folded) .card {
  transform: scale(1.04);
}
.action-panel.between-hands {
  border-color: rgba(217,173,91,0.42);
}
.action-panel.between-hands #action-title::after {
  content: " · cards stay up until you deal";
  color: rgba(244,240,232,0.62);
  font-size: 0.82rem;
  font-weight: 700;
}
@media (max-width: 720px) {
  .showdown-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showdown-hole-cards .card { min-width: 38px; height: 52px; font-size: 1rem; }
  .review-actions { display: grid; grid-template-columns: 1fr; }
  .review-actions button { width: 100%; }
  .action-panel.between-hands #action-title::after { display: block; margin-top: 0.2rem; }
}

/* Felt-first card model: cards and chips live in front of players, not inside seats */
.seat:not(.empty) {
  min-height: 82px;
  padding-bottom: 0.58rem;
}
.seat .cards {
  display: none;
}
.hole-card-marker {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 0.3rem;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  padding: 0.22rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.10), transparent 42%),
    rgba(3, 10, 8, 0.52);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  pointer-events: none;
  animation: hole-cards-arrive 220ms ease both;
}
.hole-card-marker .card {
  min-width: clamp(31px, 3.1vw, 42px);
  height: clamp(43px, 4.5vw, 58px);
  border-radius: 8px;
  font-size: clamp(0.92rem, 1.45vw, 1.15rem);
  box-shadow: 0 5px 12px rgba(0,0,0,0.30);
}
.hole-card-marker.hero {
  z-index: 7;
  border-color: rgba(142, 240, 177, 0.46);
  background:
    radial-gradient(circle at 50% 0%, rgba(142,240,177,0.16), transparent 42%),
    rgba(5, 18, 13, 0.72);
}
.hole-card-marker.hero .card {
  min-width: clamp(42px, 4.4vw, 58px);
  height: clamp(58px, 6.1vw, 80px);
  border-radius: 10px;
  font-size: clamp(1.12rem, 2vw, 1.46rem);
}
.hole-card-marker.winner {
  border-color: rgba(142, 240, 177, 0.78);
  box-shadow: 0 0 0 3px rgba(142,240,177,0.18), 0 0 34px rgba(142,240,177,0.22), 0 16px 40px rgba(0,0,0,0.34);
}
.poker-table:has(.seat.active) .hole-card-marker:not(.hero) {
  opacity: 0.86;
}
.hole-card-marker.active,
.hole-card-marker.hero {
  opacity: 1;
}
.seat.folded:not(.active) {
  filter: grayscale(0.5);
}
@keyframes hole-cards-arrive {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 720px) {
  .seat:not(.empty) {
    min-height: 72px;
  }
  .hole-card-marker {
    gap: 0.18rem;
    padding: 0.16rem;
    border-radius: 10px;
  }
  .hole-card-marker .card {
    min-width: 25px;
    height: 35px;
    border-radius: 7px;
    font-size: 0.78rem;
  }
  .hole-card-marker.hero .card {
    min-width: 34px;
    height: 47px;
    font-size: 0.98rem;
  }
}

/* Chip readability pass: keep activity off the felt pot and add visual stack cues */
.center-hud {
  top: 42%;
  gap: 0.35rem;
}
.center-hud .pot-box {
  display: none;
}
.table-pot-core {
  top: 55%;
  min-width: 136px;
  min-height: 92px;
  gap: 0.12rem;
  padding: 0.38rem 0.72rem;
}
.table-pot-core strong {
  font-size: clamp(1.2rem, 2.2vw, 1.62rem);
}
.pot-chip-pile {
  position: relative;
  width: 76px;
  height: 28px;
  margin: 0.08rem 0 0.02rem;
}
.pot-chip-pile i,
.seat-stack-visual i {
  position: absolute;
  display: block;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff7d6 0 16%, transparent 17%),
    conic-gradient(#f8d66d 0 12%, #9b3131 12% 24%, #f8d66d 24% 36%, #9b3131 36% 48%, #f8d66d 48% 60%, #9b3131 60% 72%, #f8d66d 72% 84%, #9b3131 84% 100%);
  box-shadow: inset 0 0 0 2px rgba(255,232,150,0.95), 0 4px 10px rgba(0,0,0,0.30);
}
.pot-chip-pile i {
  width: 24px;
  height: 24px;
  top: 2px;
}
.pot-chip-pile i:nth-child(1) { left: 0; }
.pot-chip-pile i:nth-child(2) { left: 13px; top: 0; background: radial-gradient(circle, #eafffb 0 16%, transparent 17%), conic-gradient(#76dbe2 0 12%, #174f62 12% 24%, #76dbe2 24% 36%, #174f62 36% 48%, #76dbe2 48% 60%, #174f62 60% 72%, #76dbe2 72% 84%, #174f62 84% 100%); }
.pot-chip-pile i:nth-child(3) { left: 26px; }
.pot-chip-pile i:nth-child(4) { left: 39px; top: 0; background: radial-gradient(circle, #eef4ff 0 16%, transparent 17%), conic-gradient(#8bc7ff 0 12%, #253e91 12% 24%, #8bc7ff 24% 36%, #253e91 36% 48%, #8bc7ff 48% 60%, #253e91 60% 72%, #8bc7ff 72% 84%, #253e91 84% 100%); }
.pot-chip-pile i:nth-child(5) { left: 52px; }
.table-activity-rail {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(240px, 1fr);
  gap: 0.55rem;
  align-items: center;
  max-width: 980px;
  width: min(980px, 100%);
  margin: -0.22rem auto 0;
  padding: 0 0.25rem;
}
.table-activity-rail .action-banner {
  min-width: 0;
  width: 100%;
  padding: 0.48rem 0.72rem;
  border-radius: 999px;
  background: rgba(7, 17, 14, 0.90);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}
.table-activity-rail .action-trail {
  justify-content: flex-start;
  max-width: none;
  min-width: 0;
}
.seat-stack-visual {
  position: relative;
  width: 58px;
  height: 18px;
  margin-top: 0.16rem;
  opacity: 0.96;
}
.seat-stack-visual i {
  left: calc(var(--chip-index) * 7px);
  bottom: calc((var(--chip-index) % 2) * 2px);
  width: 17px;
  height: 17px;
}
.seat.hero .seat-stack-visual i,
.seat.active .seat-stack-visual i {
  filter: saturate(1.15) brightness(1.05);
}
.seat.folded .seat-stack-visual {
  opacity: 0.46;
}
@media (max-width: 900px) {
  .table-activity-rail {
    grid-template-columns: 1fr;
    gap: 0.36rem;
  }
  .table-activity-rail .action-trail {
    justify-content: center;
  }
}
@media (max-width: 720px) {
  .table-pot-core {
    top: 54%;
    min-width: 104px;
    min-height: 76px;
  }
  .pot-chip-pile {
    width: 58px;
    height: 22px;
  }
  .pot-chip-pile i {
    width: 19px;
    height: 19px;
  }
  .pot-chip-pile i:nth-child(1) { left: 0; }
  .pot-chip-pile i:nth-child(2) { left: 10px; }
  .pot-chip-pile i:nth-child(3) { left: 20px; }
  .pot-chip-pile i:nth-child(4) { left: 30px; }
  .pot-chip-pile i:nth-child(5) { left: 40px; }
  .table-activity-rail {
    margin-top: 0.38rem;
    padding: 0;
  }
  .table-activity-rail .action-banner {
    font-size: 0.92rem;
    line-height: 1.15;
    white-space: normal;
  }
  .seat-stack-visual {
    width: 45px;
    height: 14px;
  }
  .seat-stack-visual i {
    left: calc(var(--chip-index) * 5px);
    width: 14px;
    height: 14px;
  }
}

/* Keep community cards and pot pile visually separate */
.table-pot-core {
  top: 60%;
}
@media (max-width: 720px) {
  .table-pot-core {
    top: 59%;
  }
}

/* Stability pass: stop stable table objects from blinking on every render */
.card,
.hole-card-marker,
.bet-marker,
.seat-stack-visual i,
.pot-chip-pile i {
  animation: none !important;
}
.seat,
.poker-table:has(.seat.active) .seat:not(.active):not(.folded) {
  transition: opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.seat.active::before,
.action-panel.hero-turn #action-eyebrow::before,
.action-bubble.thinking::after {
  animation: none !important;
}
.action-bubble {
  animation: none !important;
}
.persona-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.18rem;
  border: 1px solid rgba(217, 173, 91, 0.28);
  border-radius: 999px;
  background: rgba(217, 173, 91, 0.10);
  color: #ffe29b;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  padding: 0.22rem 0.42rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat.folded .persona-badge {
  opacity: 0.56;
}
@media (max-width: 720px) {
  .persona-badge {
    font-size: 0.58rem;
    padding: 0.18rem 0.34rem;
  }
}

/* Low-stakes 3D chip styling: red $5, blue $1, green $25-style accents */
.chip-stack,
.pot-chip-pile i,
.seat-stack-visual i {
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 28%, rgba(255,255,255,0.95) 0 10%, transparent 11%),
    radial-gradient(circle at center, #fff7d7 0 14%, transparent 15%),
    conic-gradient(#f8d66d 0 10%, #8f2c2c 10% 22%, #f8d66d 22% 34%, #8f2c2c 34% 46%, #f8d66d 46% 58%, #8f2c2c 58% 70%, #f8d66d 70% 82%, #8f2c2c 82% 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.35),
    inset 0 -3px 2px rgba(60,20,14,0.45),
    0 2px 0 #5f1c1c,
    0 5px 9px rgba(0,0,0,0.34);
}
.chip-stack::after,
.pot-chip-pile i::after,
.seat-stack-visual i::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.44), rgba(255,255,255,0));
  pointer-events: none;
}
.chip-stack {
  position: relative;
}
.pot-chip-pile i:nth-child(2),
.seat-stack-visual i:nth-child(2),
.seat-stack-visual i:nth-child(5) {
  background:
    radial-gradient(ellipse at 38% 28%, rgba(255,255,255,0.95) 0 10%, transparent 11%),
    radial-gradient(circle at center, #eafffb 0 14%, transparent 15%),
    conic-gradient(#8fe6ec 0 10%, #174f62 10% 22%, #8fe6ec 22% 34%, #174f62 34% 46%, #8fe6ec 46% 58%, #174f62 58% 70%, #8fe6ec 70% 82%, #174f62 82% 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.35),
    inset 0 -3px 2px rgba(8,40,50,0.45),
    0 2px 0 #0d3a48,
    0 5px 9px rgba(0,0,0,0.34);
}
.pot-chip-pile i:nth-child(4),
.seat-stack-visual i:nth-child(3),
.seat-stack-visual i:nth-child(6) {
  background:
    radial-gradient(ellipse at 38% 28%, rgba(255,255,255,0.95) 0 10%, transparent 11%),
    radial-gradient(circle at center, #ecfff1 0 14%, transparent 15%),
    conic-gradient(#91e9a7 0 10%, #1f7140 10% 22%, #91e9a7 22% 34%, #1f7140 34% 46%, #91e9a7 46% 58%, #1f7140 58% 70%, #91e9a7 70% 82%, #1f7140 82% 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.35),
    inset 0 -3px 2px rgba(8,58,27,0.45),
    0 2px 0 #18562f,
    0 5px 9px rgba(0,0,0,0.34);
}
.seat-stack-visual i {
  transform: translateY(calc(var(--chip-index) * -0.5px));
}
.pot-chip-pile i {
  transform: translateY(-1px);
}

/* Keep active player badge inside clipped table bounds */
.seat.active::after,
.seat.showdown.winner::after {
  top: 0.34rem;
  right: 0.42rem;
  transform: none;
  z-index: 2;
}

/* Side-view chip stacks: vertical, readable stacks with exact amount labels */
.seat-stack-visual {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  width: auto;
  min-width: 74px;
  height: 28px;
  margin-top: 0.14rem;
}
.seat-stack-visual .side-chip-stack,
.pot-chip-pile .side-chip-stack {
  position: relative;
  display: block;
  width: 30px;
  height: 26px;
  flex: 0 0 auto;
}
.seat-stack-visual i,
.pot-chip-pile i {
  position: absolute;
  left: 0;
  width: 30px;
  height: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px / 55%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.24) 100%),
    linear-gradient(90deg, #6d1717 0 14%, #f5d46a 14% 28%, #9c2f2f 28% 72%, #f5d46a 72% 86%, #6d1717 86% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -2px 2px rgba(45,13,13,0.42),
    0 1px 1px rgba(0,0,0,0.34);
  transform: translateY(calc(20px - (var(--chip-index, 0) * 3px)));
}
.seat-stack-visual i:nth-child(3n+2),
.pot-chip-pile i:nth-child(3n+2) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.24) 100%),
    linear-gradient(90deg, #0f4353 0 14%, #8de8ee 14% 28%, #1e7486 28% 72%, #8de8ee 72% 86%, #0f4353 86% 100%);
}
.seat-stack-visual i:nth-child(3n),
.pot-chip-pile i:nth-child(3n) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.24) 100%),
    linear-gradient(90deg, #19522e 0 14%, #99eba9 14% 28%, #2d8a4d 28% 72%, #99eba9 72% 86%, #19522e 86% 100%);
}
.seat-stack-visual em {
  color: rgba(244,240,232,0.78);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
.seat.active .seat-stack-visual em,
.seat.hero .seat-stack-visual em {
  color: #fff0b9;
}
.pot-chip-pile {
  width: 42px;
  height: 34px;
  margin: 0.04rem auto 0.02rem;
}
.pot-chip-pile .side-chip-stack {
  width: 38px;
  height: 32px;
}
.pot-chip-pile i {
  width: 38px;
  height: 9px;
  transform: translateY(calc(24px - (var(--chip-index, 0) * 3px)));
}
.pot-chip-pile i:nth-child(1) { --chip-index: 0; }
.pot-chip-pile i:nth-child(2) { --chip-index: 1; }
.pot-chip-pile i:nth-child(3) { --chip-index: 2; }
.pot-chip-pile i:nth-child(4) { --chip-index: 3; }
.pot-chip-pile i:nth-child(5) { --chip-index: 4; }
.pot-chip-pile i:nth-child(6) { --chip-index: 5; }
.pot-chip-pile i:nth-child(7) { --chip-index: 6; }
.pot-chip-pile i::after,
.seat-stack-visual i::after {
  display: none;
}
@media (max-width: 720px) {
  .seat-stack-visual {
    gap: 0.22rem;
    min-width: 58px;
    height: 23px;
  }
  .seat-stack-visual .side-chip-stack {
    width: 24px;
    height: 22px;
  }
  .seat-stack-visual i {
    width: 24px;
    height: 7px;
    transform: translateY(calc(17px - (var(--chip-index, 0) * 2.4px)));
  }
  .seat-stack-visual em {
    font-size: 0.58rem;
  }
  .pot-chip-pile,
  .pot-chip-pile .side-chip-stack {
    width: 32px;
    height: 28px;
  }
  .pot-chip-pile i {
    width: 32px;
    height: 8px;
    transform: translateY(calc(20px - (var(--chip-index, 0) * 2.5px)));
  }
}

/* Use one visible stack readout: side-view chips + exact amount */
.seat-copy > .stack {
  display: none;
}
.seat .seat-top {
  margin-bottom: 0.16rem;
}
.seat-stack-visual {
  margin-left: 0.05rem;
}
@media (max-width: 720px) {
  .seat-stack-visual {
    margin-top: 0.08rem;
  }
}

/* Showdown pot awards: keep side-pot math visible on the felt instead of buried below the fold. */
.pot-awards-overlay {
  position: absolute;
  left: 50%;
  top: 66%;
  z-index: 9;
  width: min(560px, 74%);
  max-height: 176px;
  overflow: auto;
  transform: translateX(-50%);
  padding: 0.58rem;
  border: 1px solid rgba(110, 235, 158, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(3, 16, 13, 0.88), rgba(7, 25, 18, 0.78));
  box-shadow: 0 18px 44px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(7px);
}
.pot-awards-title {
  color: #f4c867;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin-bottom: 0.34rem;
  text-transform: uppercase;
}
.pot-awards-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.34rem;
}
.pot-award-chip {
  display: grid;
  grid-template-columns: 30px minmax(82px, 1fr) auto;
  gap: 0.38rem;
  align-items: center;
  min-width: 0;
  padding: 0.34rem 0.44rem;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
}
.pot-award-chip strong,
.pot-award-chip em,
.pot-award-chip b {
  display: block;
  min-width: 0;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pot-award-chip strong {
  color: rgba(244,240,232,0.82);
  font-size: 0.68rem;
  text-transform: capitalize;
}
.pot-award-chip em {
  color: #ffffff;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 950;
}
.pot-award-chip b {
  color: #78eea4;
  font-size: 0.8rem;
  text-align: right;
}
.mini-side-stack {
  position: relative;
  display: block;
  width: 28px;
  height: 20px;
}
.mini-side-stack i {
  position: absolute;
  left: 0;
  width: 28px;
  height: 7px;
  border-radius: 999px / 55%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.26) 100%),
    linear-gradient(90deg, #19522e 0 14%, #99eba9 14% 28%, #2d8a4d 28% 72%, #99eba9 72% 86%, #19522e 86% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -2px 2px rgba(8,58,27,0.42), 0 1px 1px rgba(0,0,0,0.30);
}
.mini-side-stack i:nth-child(1) { top: 12px; }
.mini-side-stack i:nth-child(2) { top: 7px; background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.26) 100%), linear-gradient(90deg, #0f4353 0 14%, #8de8ee 14% 28%, #1e7486 28% 72%, #8de8ee 72% 86%, #0f4353 86% 100%); }
.mini-side-stack i:nth-child(3) { top: 2px; background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.26) 100%), linear-gradient(90deg, #6d1717 0 14%, #f5d46a 14% 28%, #9c2f2f 28% 72%, #f5d46a 72% 86%, #6d1717 86% 100%); }
.quick-pace-control {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.42rem;
  padding: 0.34rem 0.48rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(7,17,14,0.76);
  color: rgba(244,240,232,0.78);
  font-size: 0.78rem;
  font-weight: 850;
}
.quick-pace-control select {
  width: auto;
  min-height: 30px;
  padding: 0.2rem 1.6rem 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
}
.review-note {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}
@media (max-width: 900px) {
  .quick-pace-control {
    justify-self: center;
  }
}
@media (max-width: 720px) {
  .pot-awards-overlay {
    top: 64%;
    width: min(92%, 390px);
    max-height: 150px;
    padding: 0.46rem;
  }
  .pot-awards-list {
    grid-template-columns: 1fr;
  }
  .pot-award-chip {
    grid-template-columns: 28px minmax(70px, 1fr) auto;
    padding: 0.30rem 0.40rem;
  }
  .quick-pace-control {
    width: 100%;
    justify-content: space-between;
  }
}

/* Betting amount picker: slider, typed amount, live confirm button, and selected presets. */
.raise-control {
  grid-template-columns: auto minmax(140px, 1fr) auto minmax(86px, 118px) auto;
  align-items: center;
}
.raise-number-label {
  color: rgba(244,240,232,0.72);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.raise-number-input {
  min-height: 38px;
  padding: 0.42rem 0.52rem;
  border-color: rgba(255,226,155,0.32);
  background: rgba(255,255,255,0.075);
  color: #fff5d0;
  font-weight: 950;
  text-align: right;
}
#raise-output {
  min-width: 76px;
  padding: 0.28rem 0.48rem;
  border: 1px solid rgba(255,226,155,0.18);
  border-radius: 999px;
  background: rgba(255,226,155,0.08);
  text-align: center;
}
#raise-output.amount-pulse {
  animation: amount-pulse 420ms ease;
}
@keyframes amount-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255,226,155,0); }
  45% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(255,226,155,0.14); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,226,155,0); }
}
.bet-preset[aria-pressed="true"],
.bet-preset.selected {
  border-color: rgba(120, 238, 164, 0.68);
  background: linear-gradient(180deg, rgba(120,238,164,0.22), rgba(39,128,78,0.20));
  color: #eaffef;
  box-shadow: 0 0 0 2px rgba(120,238,164,0.12), inset 0 1px 0 rgba(255,255,255,0.16);
}
.action-buttons button[data-role="commit-raise"] {
  background: linear-gradient(180deg, #9cf0ba, #4bbb78);
  color: #06100d;
  box-shadow: 0 8px 22px rgba(61, 206, 112, 0.22);
}
@media (max-width: 720px) {
  .raise-control {
    grid-template-columns: 1fr 92px;
  }
  .raise-control > label:first-child,
  #raise-output {
    grid-column: 1 / -1;
  }
  .raise-number-label {
    align-self: center;
  }
  .raise-number-input {
    width: 100%;
  }
}

/*
 * Narrow phones: the widest seats sit at 13%/87% of the felt, so an unbounded
 * seat box overhangs the viewport edge. Cap the width so the extremes fit.
 */
@media (max-width: 430px) {
  /* Adjacent seats on the top arc sit ~64px apart on a 390px felt, so the
     pill has to be narrower than that to avoid overlapping its neighbour. */
  .seat {
    max-width: 66px;
    padding: 0.26rem 0.28rem;
  }
  .seat .seat-name {
    font-size: 0.66rem;
  }
  .seat .seat-top {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .seat .avatar,
  .seat .seat-number,
  .seat .status {
    display: none;
  }
  .seat .side-chip-stack {
    display: none;
  }
  .seat-stack-visual {
    font-size: 0.64rem;
  }
  .seat .seat-top {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0.28rem;
  }
  .seat .avatar {
    width: 24px;
    height: 24px;
    font-size: 0.62rem;
  }
}

/* ---- Instant play: one obvious action, configuration optional ---- */
.quick-start {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
  justify-items: stretch;
}
.play-now {
  width: 100%;
  min-height: 68px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #f6dca8, #d8ab55);
  color: #1a1206;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(216, 171, 85, 0.28), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.play-now:hover {
  filter: brightness(1.05);
}
.play-now:active {
  transform: translateY(1px);
}
.quick-start-note {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(244,240,232,0.62);
}
.setup-advanced {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.setup-advanced > summary {
  padding: 0.72rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 650;
  color: rgba(244,240,232,0.82);
  list-style: none;
}
.setup-advanced > summary::-webkit-details-marker { display: none; }
.setup-advanced > summary::before {
  content: "\2699\FE0E";
  margin-right: 0.5rem;
  opacity: 0.75;
}
.setup-advanced[open] > summary {
  border-bottom: 1px solid var(--line);
}
.setup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.9rem;
}
.setup-fields .take-seat {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .setup-fields { grid-template-columns: 1fr; }
  .play-now { min-height: 62px; font-size: 1.3rem; }
}

/*
 * Phone declutter. At 390px each seat was rendering three separate overlays -
 * an action bubble, a chip marker, and card markers - so they collided with
 * each other and with the seat boxes. Keep the chips (they carry the amount)
 * and drop the redundant bubble and the decorative felt wordmark.
 */
@media (max-width: 560px) {
  .action-bubble {
    display: none;
  }
  .hole-card-marker .card,
  .card-marker .card {
    transform: scale(0.82);
  }
}

/*
 * The felt wordmark sat at the pot's vertical centre, so the pot amount was
 * printed on top of it and both became hard to read. Move it above the board
 * and drop it further back.
 */

/*
 * The sticky action panel floats over the felt, so reserve room under the
 * hero seat. Without this the hero's own seat box is covered by the buttons.
 */
.poker-table-wrap {
  padding-bottom: 3.25rem;
}
@media (max-width: 720px) {
  .poker-table-wrap {
    padding-bottom: 1.25rem;
  }
}

/* ---- Phone table ----

   This used to hide every opponent's felt cards below 560px and redraw them as a
   `.seat-cards-mini` strip inside the seat pill, because loose cards on a
   percentage ellipse collided with everything at that width. Cards belong to
   their player's pod now, at every width, so the second rendering is gone and
   `.seat-cards-mini` with it - it was hiding the real cards on a phone.

   What survives is the one part that was right: the hero comes out of the ring
   and into `.hero-strip` below the felt. That rule now lives with the rest of
   the pod layout at the end of this file. */

/* ---- Hero strip: the player's own hand, below the felt, phones only ---- */
.hero-strip {
  display: none;
}
@media (max-width: 560px) {
  .hero-strip:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    /* It sits at the top of the sticky action panel now, so the margin goes
       below it rather than above. */
    margin: 0 0 0.5rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(31, 142, 89, 0.16), rgba(16, 29, 25, 0.94));
    box-shadow: inset 0 0 0 1px rgba(126, 224, 160, 0.16);
  }
  .hero-strip-cards {
    display: flex;
    gap: 0.35rem;
  }
  .hero-strip-cards.folded {
    opacity: 0.4;
    filter: grayscale(0.6);
  }
  .hero-strip-cards .card {
    width: 52px;
    min-width: 52px;
    height: 72px;
    font-size: 1.5rem;
    border-radius: 8px;
  }
  .hero-strip-meta {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
  }
  .hero-strip-name {
    font-size: 0.78rem;
    font-weight: 750;
    color: rgba(244, 240, 232, 0.72);
  }
  .hero-strip-stack {
    font-size: 1.32rem;
    font-weight: 900;
    color: #dff3e6;
  }
  .hero-strip-commit {
    font-size: 0.74rem;
    color: rgba(255, 226, 155, 0.9);
  }
  .hero-strip-state {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .hero-strip-state.turn { color: #8ee5ad; }
  .hero-strip-state.folded { color: rgba(244, 240, 232, 0.5); }

  /* With the hero gone from the oval, names have room again. */
  .seat {
    max-width: 78px;
  }
  .seat .seat-name {
    font-size: 0.66rem;
  }
}

/*
 * Seat names were collapsing to ~24px inside a 73px pill because .seat-name is
 * a space-between flex row: the span sized to content instead of claiming the
 * free width. Give it the row and ellipsize honestly.
 */
@media (max-width: 560px) {
  .seat .seat-name {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
  }
  .seat .seat-name span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/*
 * The action panel is sticky to the bottom of the viewport, so anything at the
 * end of the flow scrolls underneath it. Reserve room so the activity rail is
 * never hidden behind the buttons.
 */
@media (max-width: 720px) {
  .table-stage {
    padding-bottom: 8.5rem;
  }
  /* Speed already lives in Options and stays in sync, so the duplicate select
     in the rail is just height on a phone. */
  .quick-pace-control {
    display: none;
  }
  .table-activity-rail {
    gap: 0.3rem;
  }
  .table-activity-rail .action-banner {
    font-size: 0.86rem;
    padding: 0.4rem 0.6rem;
  }
}

/*
 * Phone: fit the whole game on one screen. The felt was ~68vh, which pushed the
 * hero strip and activity rail underneath the sticky action panel. Shrink the
 * felt and compact the panel while watching, so nothing is ever hidden.
 */
@media (max-width: 560px) {
  /* Sized for the worst case: the action panel is ~219px tall on the hero's
     turn, so the felt plus hero strip plus rail must fit the rest. Anything
     taller pushes the activity rail under the buttons. */
  .poker-table-wrap {
    min-height: min(50vh, 420px);
  }
  .table-stage {
    padding-bottom: 0.25rem;
  }
  /* Between hands and while bots act, the panel only needs one line. */
  .action-panel:not(.hero-turn) .action-subtitle,
  .action-panel:not(.hero-turn) #action-eyebrow {
    display: none;
  }
  .action-panel {
    padding: 0.5rem 0.6rem;
    gap: 0.45rem;
  }
  .action-panel #action-title {
    font-size: 1rem;
  }
  .table-activity-rail .action-trail {
    display: none;
  }
  .topbar {
    display: none;
  }
}

/*
 * Pot push: chips travel from the middle of the felt out to each winner's
 * seat when a hand ends, so a win reads as chips arriving rather than a
 * number quietly changing.
 */
.pot-push {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(12, 30, 22, 0.94);
  border: 1px solid rgba(142, 229, 173, 0.5);
  color: #b7f0cc;
  font-weight: 900;
  font-size: 0.86rem;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: pot-push-to-seat 1050ms cubic-bezier(.22,.7,.22,1) forwards;
}
@keyframes pot-push-to-seat {
  0% {
    left: var(--pot-left, 50%);
    top: var(--pot-top, 50%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  100% {
    left: var(--to-left, 50%);
    top: var(--to-top, 50%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pot-push {
    animation: none;
    opacity: 1;
  }
}

/*
 * Showdown on a phone. The review panel had overflow-x:auto with a two-column
 * showdown grid inside, so the rake and tip amounts sat off-screen and had to
 * be scrolled to horizontally. Everything stacks to one column instead.
 */
@media (max-width: 560px) {
  .review-panel {
    overflow-x: hidden;
  }
  .review-panel *,
  .showdown-stage,
  .showdown-stage-header,
  .review-header {
    max-width: 100%;
    min-width: 0;
  }
  .showdown-cards-grid {
    grid-template-columns: 1fr;
  }
  .review-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .review-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .review-line strong {
    flex: 0 0 auto;
  }
  /* The per-player showdown table is the widest thing on the page. */
  .review-panel table {
    font-size: 0.78rem;
  }
  .review-panel td,
  .review-panel th {
    padding: 0.34rem 0.25rem;
  }
}

/*
 * The per-player showdown table has three text columns and was 543px wide on a
 * 390px phone. With overflow hidden that silently clipped the HAND column, so
 * force a fixed layout and let the cells wrap instead of overflowing.
 */
@media (max-width: 560px) {
  .review-panel table {
    table-layout: fixed;
    width: 100%;
  }
  .review-panel td,
  .review-panel th {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  .review-panel td:first-child,
  .review-panel th:first-child {
    width: 30%;
  }
  .review-panel td:nth-child(2),
  .review-panel th:nth-child(2) {
    width: 26%;
  }
}

/*
 * An older rule pins the showdown table to min-width:520px so it can scroll
 * inside the panel. On a 390px phone that clipped the HAND column instead.
 * Let it collapse to the viewport; the fixed layout above wraps the cells.
 */
@media (max-width: 560px) {
  .review-panel table {
    min-width: 0;
  }
}

/* ---- First-hand note: shown once, ever ---- */
.first-hand-note {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(240, 199, 104, 0.42);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(240, 199, 104, 0.12), rgba(16, 29, 25, 0.9));
}
.first-hand-note .eyebrow {
  margin: 0;
  color: #f0c768;
}
.first-hand-note ul {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.32rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
.first-hand-note button {
  justify-self: start;
}

/* ---- Hand history and replay ---- */
/* The dialog element carries the width; sizing the card instead made it
   overflow the 780px .help-dialog box and spill off the left edge. */
.history-dialog {
  width: min(920px, calc(100vw - 1.5rem));
}
.history-dialog .dialog-card {
  max-height: 88vh;
  display: grid;
  gap: 0.65rem;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.history-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.import-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.history-status:empty { display: none; }
.history-status {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(244, 240, 232, 0.72);
}
.history-body {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 0.8rem;
  min-height: 0;
}
.history-list,
.history-replay {
  overflow-y: auto;
  min-height: 0;
  padding-right: 0.2rem;
}
.history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.34rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.history-item:hover { background: rgba(255, 255, 255, 0.07); }
.history-item.selected { border-color: rgba(240, 199, 104, 0.6); background: rgba(240, 199, 104, 0.1); }
.history-item-no { font-weight: 800; color: rgba(244, 240, 232, 0.6); font-size: 0.8rem; }
.history-item-pot { font-size: 0.78rem; color: rgba(244, 240, 232, 0.6); }
.history-item-net { font-weight: 900; }
.history-item.win .history-item-net { color: #8ee5ad; }
.history-item.loss .history-item-net { color: #ff9a8f; }
.replay-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.replay-head h3 { margin: 0; }
.replay-net { font-weight: 900; }
.replay-net.win { color: #8ee5ad; }
.replay-net.loss { color: #ff9a8f; }
.replay-steps {
  margin: 0.5rem 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.2rem;
  font-size: 0.86rem;
  line-height: 1.35;
}
.replay-steps li.divider {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
  font-weight: 800;
  color: #f0c768;
  list-style: none;
  margin-left: -1.1rem;
}
.replay-summary { font-size: 0.86rem; }
.replay-summary ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
@media (max-width: 720px) {
  .history-body { grid-template-columns: 1fr; }
  .history-list { max-height: 30vh; }
}

/* ---- Account dialog ---- */
.account-dialog { width: min(520px, calc(100vw - 1.5rem)); }
.signin-form {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.6rem;
}
.signin-form input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font: inherit;
}
.signin-form .take-seat { width: 100%; }

/*
 * Raise drawer. The amount you set and the button you press must be the same
 * object: the commit button previously sat ~250px below the slider with
 * Fold/Call/Cancel in between.
 */
.raise-commit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: stretch;
  margin-top: 0.55rem;
}
.raise-commit {
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #8ee5ad, #49b873);
  color: #06100d;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}
.raise-cancel,
.raise-allin {
  min-height: 56px;
  padding-inline: 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
}
.raise-allin {
  background: linear-gradient(180deg, #ff9a8f, #d94b43);
  color: #210908;
  border: 0;
}
.raise-allin:disabled { opacity: 0.4; cursor: not-allowed; }
/* The big duplicate amount bar is redundant with the number input. */
.action-panel.sizing #raise-output {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  padding: 0.2rem 0;
  background: none;
  border: 0;
}
.action-panel.sizing .action-subtitle { display: none; }

/*
 * Showdown result card.
 *
 * The review used to be a 2,600px wall with Deal Next Hand at the very bottom,
 * so continuing meant scrolling ~1,700px on a phone. The outcome and the next
 * action now sit together at the top; everything else is behind a toggle.
 */
.result-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(16,29,25,0.96));
}
.result-card.won {
  border-color: rgba(142, 229, 173, 0.55);
  background: linear-gradient(180deg, rgba(73, 184, 115, 0.20), rgba(16,29,25,0.96));
}
.result-card.lost {
  border-color: rgba(255, 154, 143, 0.4);
}
.result-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.result-who {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.result-verb {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f0c768;
}
.result-hand {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(244,240,232,0.72);
}
.result-you {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.result-you strong { font-size: 1.5rem; font-weight: 900; }
.result-you .positive { color: #8ee5ad; }
.result-you .negative { color: #ff9a8f; }
.result-taken {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(244,240,232,0.6);
}
.result-next {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #f6dca8, #d8ab55);
  color: #1a1206;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
}
.result-details-toggle {
  justify-self: center;
  border: 0;
  background: none;
  color: rgba(244,240,232,0.66);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.2rem;
}

/*
 * At showdown the result card carries the outcome and the next action, so the
 * action panel ("Review the result or tap Next Hand") and the activity rail are
 * duplicate chrome. Hiding them on a phone is what actually gets Deal Next Hand
 * above the fold.
 */
@media (max-width: 560px) {
  body:has(#review-panel:not([hidden])) .action-panel.between-hands,
  body:has(#review-panel:not([hidden])) .table-activity-rail {
    display: none;
  }
  body:has(#review-panel:not([hidden])) .poker-table-wrap {
    min-height: min(38vh, 320px);
  }
  body:has(#review-panel:not([hidden])) .table-stage {
    padding-bottom: 0;
  }
}

/*
 * Showdown emphasis: the winner should be obvious at a glance, and the losers
 * should read as losers without having to compare numbers.
 */
.seat.showdown.winner {
  /* Only a slight lift: more than this and the seat covers the board on a
     phone, where the felt is already collapsed at showdown. */
  transform: scale(1.04);
  z-index: 4;
  box-shadow: 0 0 0 2px rgba(142, 229, 173, 0.75), 0 0 34px rgba(73, 184, 115, 0.5);
}
.seat.showdown:not(.winner) {
  opacity: 0.55;
  filter: grayscale(0.4);
}
/* The phone-only `.seat-cards-mini` cards that used to be sized here are gone:
   cards live in their player's pod at every width now. */
.hole-card-marker.winner .card {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(142, 229, 173, 0.85), 0 6px 18px rgba(0,0,0,0.55);
}
/* The pot push should read as money arriving, not a subtle tooltip. */
.pot-push {
  font-size: 1.05rem;
  padding: 0.3rem 0.68rem;
  box-shadow: 0 0 24px rgba(73, 184, 115, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .seat.showdown.winner { transform: none; }
}

/*
 * Raise drawer, tightened. The amount was rendered twice (a number input and a
 * big output) and the preset row clipped its last option off-screen.
 */
.action-panel.sizing #raise-output { display: none; }
.action-panel.sizing .raise-number-label { display: none; }
.action-panel.sizing label[for="raise-to"] {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244,240,232,0.6);
}
.action-panel.sizing .raise-number-input {
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  padding: 0.35rem 0.5rem;
  border-radius: 12px;
}
.action-panel.sizing .bet-presets {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.15rem;
}
.action-panel.sizing .bet-presets::-webkit-scrollbar { display: none; }
.action-panel.sizing .bet-presets button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.action-panel.sizing .raise-control {
  gap: 0.4rem;
}

/* The sizing drawer is taller than the normal action row, so give it room
   rather than letting it ride over the hero's own cards. */
@media (max-width: 560px) {
  body:has(.action-panel.sizing) .poker-table-wrap {
    min-height: min(42vh, 350px);
  }
}

/*
 * Card motion.
 *
 * A blanket `animation: none !important` suppresses replays on every render
 * (an earlier fix for flickering seats), so these opt in explicitly and are
 * fired at most once per hand from app.js.
 */
.card.is-dealing {
  animation: card-deal-in 320ms cubic-bezier(.2,.72,.2,1) both !important;
  animation-delay: var(--card-delay, 0ms) !important;
}
@keyframes card-deal-in {
  0% {
    opacity: 0;
    transform: translate(0, -34px) rotate(-8deg) scale(0.86);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
}

/* Showdown: opponents' cards turn face up rather than swapping instantly. */
.card.is-revealing {
  animation: card-flip 460ms cubic-bezier(.3,.7,.3,1) both !important;
  animation-delay: var(--card-delay, 0ms) !important;
  backface-visibility: hidden;
}
@keyframes card-flip {
  0%   { transform: rotateY(90deg) scale(0.94); opacity: 0.25; }
  55%  { transform: rotateY(0deg) scale(1.06); opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card.is-dealing,
  .card.is-revealing {
    animation: none !important;
  }
}

/*
 * Pot awards live on the winning seat, not in a list below the felt. This is
 * how a real client shows it: chips arrive at the player who won them, and a
 * side pot is labelled where it landed. It also makes split pots legible -
 * each winner shows their own share rather than the pot total.
 */
.seat-award {
  display: grid;
  justify-items: center;
  gap: 1px;
  margin-top: 0.22rem;
  padding: 0.18rem 0.34rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(142, 229, 173, 0.95), rgba(73, 184, 115, 0.92));
  color: #06100d;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: award-land 420ms cubic-bezier(.2,.8,.3,1) both;
}
.award-total {
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.1;
}
.award-split,
.award-breakdown {
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.1;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
@keyframes award-land {
  0%   { opacity: 0; transform: translateY(-14px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .seat-award { animation: none; }
}
/* The old bar is gone; keep the felt clear for the seats. */
.pot-awards-overlay { display: none; }

/*
 * At showdown the felt collapses to make room for the result card, which pushes
 * the left-hand seats together. Compact the seats to match: at that moment a
 * seat only needs its name, its cards, and what it won - the running stack is
 * already in the result card and the hero strip.
 */
@media (max-width: 560px) {
  /* Once the hand is over, the people who folded are noise. Showing only the
     players who were still in removes the crowding on a collapsed felt and
     matches what you actually want to look at: who was in it and who won. */
  body:has(#review-panel:not([hidden])) .seat.folded {
    display: none;
  }
  /* Only a few seats remain at showdown, so they can afford the width the
     award breakdown needs without crowding each other. */
  body:has(#review-panel:not([hidden])) .seat {
    max-width: 116px;
    padding: 0.2rem 0.3rem;
  }
  body:has(#review-panel:not([hidden])) .award-breakdown {
    font-size: 0.52rem;
  }
  body:has(#review-panel:not([hidden])) .seat .seat-stack-visual,
  body:has(#review-panel:not([hidden])) .seat .status,
  body:has(#review-panel:not([hidden])) .seat .persona-badge {
    display: none;
  }
  body:has(#review-panel:not([hidden])) .seat .seat-name {
    font-size: 0.7rem;
  }

}

/*
 * Showdown cleanup applies at every width, not just phones. On desktop the
 * sticky action panel floated over the felt and the seats while the result card
 * sat ~250px below the fold.
 */
body:has(#review-panel:not([hidden])) .action-panel.between-hands,
body:has(#review-panel:not([hidden])) .table-activity-rail {
  display: none;
}
@media (min-width: 561px) {
  body:has(#review-panel:not([hidden])) .poker-table-wrap {
    min-height: min(46vh, 420px);
  }
  body:has(#review-panel:not([hidden])) .table-stage {
    padding-bottom: 0;
  }
  /* Keep the result card in the same column as the felt rather than letting it
     drift to the bottom of a tall layout. */
  body:has(#review-panel:not([hidden])) .review-panel {
    margin-top: 0.75rem;
  }
}

/*
 * Float the award badge under the seat instead of letting it widen the seat
 * box. Growing the box pushed neighbouring seats into each other on desktop,
 * where the oval is wide but the seats sit close.
 */
.seat-award {
  position: absolute;
  left: 50%;
  bottom: -0.55rem;
  transform: translate(-50%, 100%);
  margin-top: 0;
  white-space: nowrap;
  z-index: 9;
}
/* Once the hand is settled, the per-street bet markers are stale noise. */
body:has(#review-panel:not([hidden])) .bet-marker,
body:has(#review-panel:not([hidden])) .action-bubble {
  display: none;
}

/* Options panel: an explicit way out, and room to breathe. */
.session-panel { position: relative; }
.panel-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.panel-close:hover { background: rgba(255,255,255,0.12); }
.session-panel:not([hidden]) {
  padding: 1rem 1rem 1.1rem;
  gap: 0.8rem;
}
.session-panel .compact-setting {
  padding: 0.6rem 0.7rem;
  gap: 0.35rem;
}
@media (max-width: 560px) {
  .session-panel:not([hidden]) {
    grid-template-columns: 1fr;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Who showed what, and who folded, so a fold is never mistaken for a loss. */
.result-outcomes {
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}
.outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}
.outcome-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
}
.outcome-list li.won { color: #8ee5ad; font-weight: 800; }
.outcome-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outcome-cards { display: flex; gap: 2px; }
.outcome-cards .card {
  width: 20px;
  min-width: 20px;
  height: 28px;
  font-size: 0.58rem;
  line-height: 28px;
  text-align: center;
  padding: 0;
  border-radius: 3px;
}
.outcome-hand {
  font-size: 0.78rem;
  color: rgba(244,240,232,0.7);
  text-align: right;
}
.outcome-folded {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: rgba(244,240,232,0.6);
}

/* Keep the award badge inside the felt: seats near the rail were having it
   clipped by the table's overflow. */
.seat-award {
  max-width: 92px;
  font-size: 0.72rem;
}
.seat-award .award-total { font-size: 0.78rem; }
.seat:nth-child(n) .seat-award { pointer-events: none; }
.poker-table-wrap { overflow: visible; }
.poker-table { overflow: visible; }

/* ==========================================================================
   Felt-native seats, dealer button, and blind markers
   --------------------------------------------------------------------------
   Seats used to be bordered panels with their own background, which read as UI
   floating on top of the tabletop rather than players sitting at it. Here the
   panel is removed entirely: the portrait is the anchor, the name and stack are
   type set directly on the felt, and the "action is here" cue becomes a ring
   around the portrait instead of an outlined box.

   This section is deliberately last in the file so it wins the cascade over the
   earlier seat layers without having to unpick them.
   ========================================================================== */

.seat:not(.empty) {
  width: clamp(96px, 9vw, 124px);
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
  /* A soft pool of shade under each player, so they sit in the felt rather
     than hovering above it. */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}
/* The coloured accent bar belonged to the panel. */
.seat:not(.empty)::before {
  content: none;
}
.seat.active {
  width: clamp(96px, 9vw, 124px);
  border: 0;
  box-shadow: none;
}
.seat.hero {
  background: none;
  border: 0;
}

.seat .seat-top {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.16rem;
  margin-bottom: 0.1rem;
}

/* Portraits. The avatar is now an illustrated face, so the old gradient
   background and initials styling would only show through the artwork. */
.avatar {
  position: relative;
  width: clamp(40px, 4.1vw, 54px);
  height: clamp(40px, 4.1vw, 54px);
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(4, 14, 11, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.42);
}
.avatar .portrait {
  width: 100%;
  height: 100%;
  display: block;
}
.avatar-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 950;
  font-size: 0.78rem;
  color: #170f07;
  background: linear-gradient(145deg, #f0c76d, #8d5b24);
}
/* Tone gradients were the avatar background. With a portrait in there they
   would only fight the artwork; the tone survives as the name colour. */
.seat.tone-1 .avatar, .seat.tone-2 .avatar, .seat.tone-3 .avatar,
.seat.tone-4 .avatar, .seat.tone-5 .avatar, .seat.tone-6 .avatar,
.seat.tone-7 .avatar, .seat.tone-8 .avatar, .seat.tone-9 .avatar,
.seat.hero .avatar {
  background: rgba(4, 14, 11, 0.9);
}

.seat .seat-name {
  justify-content: center;
  margin-bottom: 0;
  font-size: clamp(0.76rem, 1vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(246, 242, 234, 0.94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
}
.seat .status {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.62);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* The seat number was part of the panel chrome. On felt it is clutter. */
.seat-number { display: none; }

/* Action cue: a ring on the portrait, not a box around the player. */
.seat.active .avatar {
  box-shadow:
    inset 0 0 0 2px rgba(255, 245, 214, 0.55),
    0 0 0 3px var(--gold, #d9ad5b),
    0 0 26px rgba(217, 173, 91, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.45);
}
.seat.active .seat-name {
  color: #ffe9ae;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 16px rgba(217, 173, 91, 0.5);
}
.seat.hero .avatar {
  box-shadow:
    inset 0 0 0 2px rgba(142, 240, 177, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.45);
}
.seat.hero.active .avatar {
  box-shadow:
    inset 0 0 0 2px rgba(255, 245, 214, 0.55),
    0 0 0 3px var(--gold, #d9ad5b),
    0 0 26px rgba(217, 173, 91, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.45);
}
.seat.showdown.winner .avatar {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.3),
    0 0 0 3px #8ee5ad,
    0 0 30px rgba(142, 229, 173, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.45);
}
.seat.folded:not(.active) {
  opacity: 0.34;
  filter: grayscale(0.7) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

/* --------------------------------------------------------------------------
   Dealer button and blind markers.

   These are the two things you check first at a live table, so they are real
   discs on the felt with their own layer, not letters tucked into a name row.
   -------------------------------------------------------------------------- */
.position-marker {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  /* Sliding between seats reads as the button being passed, which is exactly
     what happens between hands. */
  transition: left 420ms cubic-bezier(0.22, 0.8, 0.3, 1), top 420ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.position-marker.dealer-button {
  width: clamp(26px, 2.6vw, 34px);
  height: clamp(26px, 2.6vw, 34px);
  font-size: clamp(0.8rem, 1vw, 1rem);
  color: #2b2109;
  background: radial-gradient(circle at 34% 28%, #fffdf4, #efe3c6 58%, #cbb98d);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.9),
    inset 0 0 0 3.5px rgba(120, 96, 40, 0.55),
    0 5px 12px rgba(0, 0, 0, 0.55);
}
.blind-marker {
  width: clamp(22px, 2.2vw, 28px);
  height: clamp(22px, 2.2vw, 28px);
  font-size: clamp(0.54rem, 0.7vw, 0.68rem);
}
.blind-marker.small-blind {
  color: #eaf1f5;
  background: radial-gradient(circle at 34% 28%, #6d7f8c, #3d4c57 60%, #253038);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.blind-marker.big-blind {
  color: #2b2109;
  background: radial-gradient(circle at 34% 28%, #f4d98f, #cfa445 60%, #8f6c22);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45), 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* A live blind behind the big one: a straddle, or the button blind of a
   three-blind game. Red so it reads as the thing that made this pot bigger
   before anybody looked at a card. */
.blind-marker.extra-blind {
  color: #fdeeee;
  background: radial-gradient(circle at 34% 28%, #c8524c, #a0322d 60%, #6d1e1a);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* Once the hand is over the blinds no longer describe anything live. */
body:has(#review-panel:not([hidden])) .blind-marker {
  opacity: 0.28;
}

/* Mistake review. Sits in the result card, between what happened and the
   button that moves you on, because that is the only moment you will read it. */
.hand-review {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}
.hand-review h3 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.62;
  font-weight: 600;
}
.hand-review ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.hand-review.quiet {
  opacity: 0.5;
  padding: 0.6rem 1rem;
}
.hand-review.quiet p {
  margin: 0;
  font-size: 0.88rem;
}
.review-leak {
  padding-left: 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.16);
}
/* Severity is a border, not a colour wash: a review that lights up red every
   time reads as a telling-off rather than as information. */
.review-leak.high { border-left-color: #c8524c; }
.review-leak.medium { border-left-color: #cfa445; }
.leak-headline {
  margin: 0 0 0.2rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.leak-detail {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0.78;
}
.leak-bucket {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.7;
}

/* The straddle offer. Between hands, under the gun only. */
.straddle-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(200, 82, 76, 0.5);
  border-radius: 10px;
  background: rgba(160, 50, 45, 0.12);
  font-size: 0.85rem;
  cursor: pointer;
}
.straddle-option input {
  width: 16px;
  height: 16px;
  accent-color: #a0322d;
  cursor: pointer;
}
.straddle-option em {
  display: block;
  font-style: normal;
  opacity: 0.65;
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Showdown centre. The pot core, the board and the hero's cards all converge
   on the middle of the felt; without a reserved band they stack on top of each
   other, which is what made the first screenshot unreadable.
   -------------------------------------------------------------------------- */
.hole-card-marker {
  transition: left 260ms ease, top 260ms ease;
}
body:has(#review-panel:not([hidden])) .table-pot-core {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  .seat:not(.empty) {
    width: 84px;
    min-height: 0;
  }
  .seat.active { width: 84px; }
  .avatar { width: 38px; height: 38px; }
  .position-marker.dealer-button { width: 24px; height: 24px; font-size: 0.76rem; }
  .blind-marker { width: 20px; height: 20px; font-size: 0.5rem; }
}

/* --------------------------------------------------------------------------
   Cues that belonged to the seat panel.

   With the box gone, the "ACTION" tag and the "turn" suffix hung in empty
   space, and the action bubble floated off the top of the felt for the back
   row. The gold ring on the portrait already says where the action is, which
   is also how you read it at a real table, so the tags go and the bubble moves
   below each player where every seat has room for it.
   -------------------------------------------------------------------------- */
.seat.active::after,
.seat.active .seat-name span::after {
  content: none;
}
.action-bubble {
  top: auto;
  bottom: -0.4rem;
  transform: translate(-50%, 100%);
  z-index: 9;
  font-size: 0.72rem;
  padding: 0.24rem 0.5rem;
}
/* The hero's bubble has nowhere to go vertically. Below the seat is the stack
   line and then the rail; above the seat is where the hero's own hole cards
   sit, because seat 0's cards are pulled inward towards the pot rather than
   pushed outward (`holeCardPosition`). Putting the bubble above therefore
   covered the two cards you most need to see, and the seat's z-index made it
   win. So it moves out to the side, level with the portrait, which is where a
   real player's talk comes from anyway. The hero's bet chips sit up and to the
   right at ~67% of table height, well clear of the portrait row. */
.seat.hero .action-bubble {
  top: 50%;
  bottom: auto;
  left: 100%;
  transform: translate(0.45rem, -50%);
}
/* Tablet widths crowd the oval: at 600px the bubble's top corner clipped the
   next seat's box by a few pixels. Dropping it to the stack line clears it and
   still reads as the hero's. Phones hide the bubble outright below 560px. */
@media (max-width: 720px) {
  .seat.hero .action-bubble {
    top: 64%;
  }
}

/* Empty board slots: hold the five positions without pretending cards are out. */
.center-hud .card.board-slot,
.card.board-slot {
  background: rgba(0, 0, 0, 0.16);
  border: 1px dashed rgba(255, 255, 255, 0.13);
  box-shadow: none;
}

/* Folded players are still sitting there. Dropping them to a third of their
   opacity made them unreadable, which is a different problem from making them
   recede. */
.seat.folded:not(.active) {
  opacity: 0.62;
  filter: grayscale(0.6) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

/*
 * The action panel is sticky so it stays reachable while scrolling a phone.
 * On desktop the whole layout fits, and sticky-pinning it to the bottom of the
 * viewport floated it over the activity rail directly above it, which is what
 * made the desktop bottom half read as clumped.
 */
@media (min-width: 721px) {
  .action-panel {
    position: static;
  }
}

/* A seat with an action bubble has to sit above the hole-card markers. The
   seat's own z-index makes a stacking context, so raising the bubble alone
   does nothing: the seat has to win. */
.seat:has(.action-bubble) {
  z-index: 10;
}

/* --------------------------------------------------------------------------
   Phones keep the portraits.

   The old phone layout hid the avatar outright to buy room, which was the
   right call when the avatar was two initials in a coloured circle. Now the
   portrait is the point of the seat, so it stays and the stack chip graphic
   goes instead: the dollar figure carries that information on its own.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .seat .avatar {
    display: block;
    width: 30px;
    height: 30px;
  }
  .seat .seat-top {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.06rem;
  }
  .seat:not(.empty) {
    width: 68px;
    max-width: 68px;
    padding: 0;
  }
  .seat .seat-name {
    font-size: 0.62rem;
    line-height: 1.1;
  }
  .seat .seat-stack-visual {
    font-size: 0.6rem;
  }
  .seat .seat-stack-visual .side-chip-stack {
    display: none;
  }
  /* Position markers shrink to fit between eight seats on a 390px felt. */
  .position-marker.dealer-button { width: 20px; height: 20px; font-size: 0.62rem; }
  .blind-marker { width: 17px; height: 17px; font-size: 0.42rem; }
}

/*
 * Phone felt: inset the seat ring so the back row is not clipped by the top of
 * the wrap. The seat coordinates are percentages of .poker-table, so shrinking
 * that box pulls every seat inward without touching the layout maths.
 */
@media (max-width: 560px) {
  .poker-table {
    inset: 20px 4px 6px;
  }
}

@media (max-width: 560px) {
  /* Give the phone felt what dead space there is below the action panel. */
  .poker-table-wrap {
    min-height: min(56vh, 500px);
  }
  /* Pull the wooden rail in so nine seats have somewhere to sit that is not on
     top of it. On a 390px oval the rail was running straight through the side
     seats' names. */
  /* Everything in a phone seat centres under the portrait: name, stack, cards. */
  .seat .seat-stack-visual {
    justify-content: center;
    margin-left: 0;
  }
}

/* ==========================================================================
   Result card: your hand first, then the money
   --------------------------------------------------------------------------
   The old card named the winner, showed the winner's cards, and left you
   guessing about your own. Losing $296 without seeing what you lost with was
   the worst moment in the app.
   ========================================================================== */
.outcome-list li {
  grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  padding: 0.34rem 0.4rem;
  border-radius: 10px;
  font-size: 0.9rem;
}
.outcome-list li.hero {
  background: rgba(142, 240, 177, 0.07);
  box-shadow: inset 0 0 0 1px rgba(142, 240, 177, 0.22);
}
.outcome-list li.won {
  background: rgba(142, 229, 173, 0.10);
  box-shadow: inset 0 0 0 1px rgba(142, 229, 173, 0.32);
}
.outcome-list li.hero.won {
  background: rgba(142, 229, 173, 0.16);
}
.outcome-name { font-weight: 800; }
/* Cards in the result card were 20x28, which is a legend swatch rather than a
   poker hand. */
.outcome-cards .card {
  width: 32px;
  min-width: 32px;
  height: 44px;
  font-size: 0.95rem;
  line-height: 44px;
  border-radius: 6px;
  padding: 0;
}
.outcome-hand {
  text-align: left;
  text-transform: capitalize;
}
.outcome-verdict {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.6);
}
.outcome-list li.won .outcome-verdict { color: #8ee5ad; }
.outcome-net {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  text-align: right;
}
.outcome-net.positive { color: #8ee5ad; }
.outcome-net.negative { color: #ff9b9b; }

/* The money story replaces a list of raw contribution layers. */
.money-story {
  display: grid;
  gap: 0.1rem;
}
.money-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.36rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
}
.money-row strong { font-variant-numeric: tabular-nums; }
.money-row.total {
  margin-top: 0.25rem;
  border-bottom: 0;
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
  font-size: 1rem;
  font-weight: 800;
}
.money-row.total strong { font-size: 1.25rem; }
.money-row .positive { color: #8ee5ad; }
.money-row .negative { color: #ff9b9b; }
.money-note {
  display: block;
  font-size: 0.72rem;
  color: rgba(244, 240, 232, 0.55);
}
.money-note-line {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: rgba(244, 240, 232, 0.6);
}

@media (max-width: 560px) {
  .outcome-list li {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name cards net"
      "hand cards verdict";
    row-gap: 0.1rem;
  }
  .outcome-name { grid-area: name; }
  .outcome-cards { grid-area: cards; }
  .outcome-hand { grid-area: hand; font-size: 0.74rem; }
  .outcome-verdict { grid-area: verdict; text-align: right; }
  .outcome-net { grid-area: net; }
}

/* --------------------------------------------------------------------------
   Showdown, on a felt with no seat boxes.

   The winner used to be marked with a border, a box shadow and a corner tag on
   a panel that no longer exists. The ring already added to the portrait does
   the job; what is left here is the label and getting the losers out of the
   way without making them illegible.
   -------------------------------------------------------------------------- */
.seat.showdown.winner {
  border: 0;
  box-shadow: none;
  transform: none;
  z-index: 8;
}
.seat.showdown.winner::after {
  content: "WINNER";
  position: absolute;
  left: 50%;
  top: -0.5rem;
  right: auto;
  transform: translate(-50%, -100%);
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #a7ffc2, #5dd987);
  color: #0d2417;
  z-index: 2;
}
.seat.showdown:not(.winner):not(.folded) {
  opacity: 0.72;
  filter: grayscale(0.35);
}

/* Empty seats: a place at the table, not a panel. The old box was sized for
   name, stack and cards, which an empty seat has none of. */
.seat.empty {
  width: clamp(64px, 6vw, 84px);
  min-height: 0;
  padding: 0.3rem 0;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  box-shadow: none;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.32);
}

/* The showdown felt is collapsed to bring the result card up, which put the
   back row half outside the top of it. Inset the seat ring the same way the
   phone layout does. */
body:has(#review-panel:not([hidden])) .poker-table {
  inset: 22px 8px 8px;
}

/* The award badge was absolutely positioned under the seat so it would not
   widen the old seat box. With the box gone the seat is a centred column, so
   the badge can simply be the last line of it: no overlap with the seat below,
   which is what it was doing in the left and right columns. */
.seat-award {
  position: static;
  transform: none;
  margin: 0.14rem auto 0;
  max-width: none;
  width: max-content;
}

/* The showdown felt was collapsed to 420px to lift the result card into view.
   With portraits, awards and revealed cards on it, that left the back row
   sitting on the board. The result card now carries the detail, so the felt
   only has to stay legible: a little more height buys that back without
   pushing the card under the fold. */
@media (min-width: 561px) {
  body:has(#review-panel:not([hidden])) .poker-table-wrap {
    min-height: min(52vh, 480px);
  }
}

/* ==========================================================================
   Bet sizing: one control
   --------------------------------------------------------------------------
   This was a slider, a number input, six preset buttons and three buttons of
   its own, stacked. It is now one track you drag, marked sizes you can tap,
   the amount shown large with the context that makes a size mean something
   (big blinds, share of pot, what it costs you from here), and one button.

   All In left the button row and became the top detent on the track, because a
   button labelled "All In" sitting next to "Raise" is how you shove by
   accident. Committing at the top asks once.
   ========================================================================== */
.raise-control {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(200px, 1fr);
  grid-template-areas:
    "readout track"
    "commit  commit";
  align-items: center;
  gap: 0.7rem 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(6, 16, 13, 0.7);
}
.raise-readout {
  grid-area: readout;
  display: grid;
  justify-items: start;
  gap: 0.1rem;
  min-width: 0;
}
.raise-readout-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.55);
}
#raise-output {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #ffe9ae;
}
.raise-context {
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(244, 240, 232, 0.62);
  font-variant-numeric: tabular-nums;
}
.raise-type-toggle {
  margin-top: 0.15rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(142, 240, 177, 0.85);
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.raise-number-input {
  width: 100%;
  max-width: 160px;
  margin-top: 0.3rem;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}

.raise-track-wrap {
  grid-area: track;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.raise-track {
  width: 100%;
  height: 34px;
  margin: 0;
  appearance: none;
  background: none;
  cursor: pointer;
}
.raise-track::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 173, 91, 0.85), rgba(217, 173, 91, 0.18));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.raise-track::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 173, 91, 0.85), rgba(217, 173, 91, 0.18));
}
/* The thumb is a chip, because that is what you are sliding. */
.raise-track::-webkit-slider-thumb {
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -9px;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, #fffdf4, #efe3c6 58%, #c8b384);
  box-shadow:
    inset 0 0 0 3px rgba(125, 36, 48, 0.85),
    0 4px 12px rgba(0, 0, 0, 0.6);
  cursor: grab;
}
.raise-track::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, #fffdf4, #efe3c6 58%, #c8b384);
  box-shadow: inset 0 0 0 3px rgba(125, 36, 48, 0.85), 0 4px 12px rgba(0, 0, 0, 0.6);
}
.raise-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.bet-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: space-between;
  max-width: none;
}
.bet-preset {
  flex: 1 1 auto;
  display: grid;
  gap: 0.02rem;
  min-width: 62px;
  min-height: 44px;
  padding: 0.28rem 0.4rem;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
}
.preset-label {
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.1;
}
.preset-amount {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(244, 240, 232, 0.58);
  font-variant-numeric: tabular-nums;
}
.bet-preset.all-in .preset-label { color: #ffb9b9; }
.bet-preset[aria-pressed="true"],
.bet-preset.selected {
  border-color: var(--gold);
  background: rgba(217, 173, 91, 0.18);
}
.bet-preset.selected .preset-amount { color: rgba(255, 233, 174, 0.9); }

.raise-commit-row {
  grid-area: commit;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
}
.raise-commit {
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f6dca8, #d8ab55);
  color: #1a1206;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}
.raise-commit.is-all-in {
  background: linear-gradient(180deg, #f0a3a3, #c04b4b);
  color: #2a0b0b;
}
.raise-commit.confirming {
  background: linear-gradient(180deg, #ff8f8f, #a52d2d);
  color: #fff;
  animation: confirm-pulse 900ms ease-in-out infinite;
}
@keyframes confirm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 120, 120, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(255, 120, 120, 0); }
}
.raise-cancel {
  min-height: 56px;
  min-width: 84px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 620px) {
  .raise-control {
    grid-template-columns: 1fr;
    grid-template-areas:
      "readout"
      "track"
      "commit";
    gap: 0.55rem;
  }
  .raise-readout { justify-items: center; text-align: center; }
  .bet-preset { min-width: 54px; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The amount used to be printed twice, so an earlier pass hid this one. It is
   now the only place the number appears, and the biggest thing in the panel. */
.action-panel.sizing #raise-output {
  display: block;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  min-width: 0;
}
.action-panel.sizing .raise-control > label:first-child { display: none; }

/* On a phone felt the board and the pot readout were 6px into each other. */
@media (max-width: 560px) {
  .table-pot-core {
    margin-top: 14px;
  }
}

/* Custom rake editor: for rooms outside the presets. Folded away by default,
   because most sessions want the room's real numbers and nothing else. */
.custom-rake {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.03);
}
.custom-rake > summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.9rem;
}
.custom-rake-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.custom-rake-fields > label:first-child {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
}
.field-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(244, 240, 232, 0.55);
}

/* The setup grid styles every label as a stacked field with a full-width
   control, which turned this checkbox into a large empty box. */
.custom-rake-fields > label:first-child input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--gold, #d9ad5b);
}

/* Out of chips. Not an error state: this is the reload window, and every cash
   player has been here. */
.action-panel.busted {
  border-color: rgba(240, 163, 163, 0.5);
  background:
    radial-gradient(circle at 88% 12%, rgba(240, 163, 163, 0.12), transparent 34%),
    rgba(24, 14, 14, 0.94);
}
.action-panel.busted #action-eyebrow { color: #ffb9b9; }

/* Second tap to shove, in the action row as well as the sizing track. */
.action-buttons button.confirming {
  background: linear-gradient(180deg, #ff8f8f, #a52d2d);
  color: #fff;
  animation: confirm-pulse 900ms ease-in-out infinite;
}

/* ==========================================================================
   Stats dialog
   --------------------------------------------------------------------------
   The trainer part. Deliberately behind a button rather than on the felt: the
   default play mode stays sparse, and numbers are for between hands.
   ========================================================================== */
.stats-dialog .dialog-card {
  max-width: 940px;
  max-height: 86vh;
  overflow-y: auto;
}
.stats-scope {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.stats-scope-button {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}
.stats-scope-button.is-selected {
  border-color: var(--gold);
  background: rgba(217, 173, 91, 0.18);
  color: #ffe9ae;
}
.stats-section { margin-bottom: 1.4rem; }
.stats-section h3 {
  margin: 0 0 0.55rem;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.55);
}
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 0.5rem;
}
.stat-tile {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.stat-tile-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(244, 240, 232, 0.6);
}
.stat-tile-value {
  font-size: 1.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.stat-tile-note {
  font-size: 0.66rem;
  color: rgba(244, 240, 232, 0.45);
}

/* Where hands end. A stacked bar would compress the tail; one row per street
   keeps the river readable, which is the row that was actually asked about. */
.street-chart { display: grid; gap: 0.35rem; }
.street-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(80px, 2fr) auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
}
.street-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.street-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #6f8f7f;
}
.street-fill.preflop { background: #6b7f8f; }
.street-fill.flop { background: #7f9a6b; }
.street-fill.turn { background: #c8a44f; }
.street-fill.river { background: #c87f5a; }
.street-fill.showdown { background: #8ee5ad; }
.street-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: rgba(244, 240, 232, 0.65);
  min-width: 5.5rem;
  text-align: right;
}

.stats-table-wrap { overflow-x: auto; }
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.stats-table th {
  text-align: right;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.5);
  padding: 0.3rem 0.5rem;
}
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
.stats-table td {
  text-align: right;
  padding: 0.36rem 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-variant-numeric: tabular-nums;
}
.stats-table .positive { color: #8ee5ad; }
.stats-table .negative { color: #ff9b9b; }

/* --------------------------------------------------------------------------
   Four-colour and colourblind decks.

   Two colours is the default because it is what the felt looks like. Four
   colour is the standard fix for misreading a flush, and the colourblind
   palette swaps the red/green pair that deuteranopia collapses.
   -------------------------------------------------------------------------- */
:root[data-deck="four"] .card.suit-d { color: #2f6fd0; }
:root[data-deck="four"] .card.suit-c { color: #1f8a4c; }
:root[data-deck="four"] .card.suit-h { color: #c0392b; }
:root[data-deck="four"] .card.suit-s { color: #1a1a1a; }

:root[data-deck="colourblind"] .card.suit-d { color: #0072b2; }
:root[data-deck="colourblind"] .card.suit-c { color: #d55e00; }
:root[data-deck="colourblind"] .card.suit-h { color: #cc79a7; }
:root[data-deck="colourblind"] .card.suit-s { color: #111111; }

/* Persona reveal, offered where you want it: looking at a hand you just lost,
   rather than buried in two separate settings panels. */
.result-persona-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-size: 0.82rem;
  color: rgba(244, 240, 232, 0.72);
  cursor: pointer;
}
.result-persona-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold, #d9ad5b);
}

/* Chips read on top of a card corner rather than behind it. On a nine-seat
   oval there is not always clean space between a player's cards and the pot,
   so where they do meet the amount has to be the thing you can read. */
.bet-marker { z-index: 7; }

/* Muck or show. Live you are never made to table a beaten hand, and the habit
   of pushing it back is worth practising. */
.muck-prompt {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(217, 173, 91, 0.35);
  background: rgba(217, 173, 91, 0.08);
}
.muck-prompt p {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
}
.muck-buttons { display: flex; gap: 0.5rem; }
.muck-button {
  flex: 1 1 0;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.muck-button.primary {
  border-color: var(--gold);
  background: rgba(217, 173, 91, 0.22);
  color: #ffe9ae;
}
.muck-note {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: rgba(244, 240, 232, 0.6);
}

/* Running a board out. Nobody can bet, and saying so is the difference between
   "the river had no betting round" and "the money was already in". */
.action-banner.runout {
  border-color: rgba(240, 163, 163, 0.55);
  background: rgba(60, 22, 22, 0.92);
  color: #ffd7d7;
  letter-spacing: 0.04em;
}

/* Along the top of the oval, "below the seat" points straight at the board.
   The badge is a static last line of the seat column, which works for the eight
   seats whose column grows towards the rail and fails for the back row, whose
   column grows towards the middle of the felt. Measured in production: a
   winner's badge covering 940 square pixels of a board card.

   These four get it lifted above the portrait instead, over empty felt. It has
   to come after the rule that made the badge static, or it does nothing. */
.seat.back-row .seat-award {
  position: absolute;
  left: 50%;
  top: -0.4rem;
  bottom: auto;
  transform: translate(-50%, -100%);
  margin: 0;
  max-width: 92px;
}

/* ---- Setup form: grouped sections ------------------------------------- *
 * The form was ten unrelated controls in a flat two-column grid, with
 * "Table texture" and "Time of day" sitting side by side saying nearly the
 * same thing. Grouping them under headings is most of the fix; the other half
 * is telling somebody who they are about to play against before they play.  */
.setup-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
}
.setup-group-title {
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent, #e3c07b);
}
.setup-group-note {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(244, 240, 232, 0.62);
}
.setup-group-note strong { color: rgba(244, 240, 232, 0.92); }
.setup-group-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.7rem 0.9rem;
  align-items: start;
}
/* Labels own their control, so a long note under one field stops dragging the
   field beside it out of alignment - which is why Sound used to sit low. */
.setup-group-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.setup-group-fields select,
.setup-group-fields input { width: 100%; min-width: 0; }

/* ---- Field readout ----------------------------------------------------- */
.field-readout {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.field-verdict {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
.field-verdict.good { color: #8ee5ad; }
.field-verdict.mid { color: rgba(244, 240, 232, 0.8); }
.field-verdict.bad { color: #ff9b9b; }
.field-rows { display: grid; gap: 0.3rem; }
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 2.2rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
}
.field-row-label { display: flex; flex-direction: column; color: rgba(244, 240, 232, 0.86); }
.field-row-note { font-size: 0.68rem; color: rgba(244, 240, 232, 0.45); }
.field-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.field-bar > span { display: block; height: 100%; border-radius: 999px; background: rgba(244, 240, 232, 0.5); }
.field-row.hard .field-bar > span { background: #ff9b9b; }
.field-row.mid .field-bar > span { background: #e3c07b; }
.field-row.soft .field-bar > span { background: #8ee5ad; }
.field-row-seats { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.field-pace, .field-source {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(244, 240, 232, 0.55);
}
.field-source { font-style: italic; }

@media (max-width: 520px) {
  .field-row { grid-template-columns: minmax(0, 1fr) 56px 2rem; }
  .setup-group { padding: 0.8rem 0.75rem 0.85rem; }
}

/* The sections stack full width; the two-column grid now lives INSIDE each
   section. Left as it was, "Who is at the table" and "The game" sat side by
   side and squeezed the field readout into a column narrow enough that
   "Competent regulars" wrapped over three lines. */
.setup-fields {
  grid-template-columns: minmax(0, 1fr);
}
.setup-fields .setup-group { grid-column: 1 / -1; }
.setup-group:last-of-type { margin-bottom: 0; }
/* With the section full width the label no longer needs to wrap, and the bar
   can take the space it was never given. */
.field-row { grid-template-columns: minmax(0, 260px) minmax(60px, 1fr) 2.4rem; }
.field-row-label { white-space: nowrap; }
.field-row-note { white-space: normal; }
@media (max-width: 560px) {
  .field-row { grid-template-columns: minmax(0, 1fr) 64px 2rem; }
  .field-row-label { white-space: normal; }
}
/* A time-of-day select with one option is fixed, not broken. Say so. */
.field-locked select { opacity: 0.55; cursor: not-allowed; }
/* What the table does to the price of the leak above it. Set apart from the
   detail because it is a different kind of claim: the leak is about the hand,
   this is about the room. */
.leak-conditions {
  margin: 0.4rem 0 0;
  padding-left: 0.7rem;
  border-left: 2px solid rgba(227, 192, 123, 0.45);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(244, 240, 232, 0.62);
}

/* ------------------------------------------------- the hand-reading drill */

/* Two questions above the action buttons. The rule they are designed around is
   that they must never be in the way: the buttons underneath stay live whether
   or not anything here has been touched, so the drill can be ignored on any
   hand without a dialog and without a nag. */
.read-drill {
  /* Its own full-width row above the buttons, the same way the sizing track
     takes one. Sitting inline beside them squeezed the "it is $10 to call"
     heading into a column one word wide. */
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(227, 192, 123, 0.22);
  background: rgba(227, 192, 123, 0.05);
}
/* With the drill on its own row, the buttons would otherwise drop into the
   narrow first column. They take the full width underneath it instead, which is
   the bigger tap target anyway. When the drill is hidden nothing changes. */
.read-drill:not([hidden]) ~ .action-buttons { grid-column: 1 / -1; }
.read-question { display: grid; gap: 0.4rem; }
.read-prompt {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.read-prompt strong { color: var(--text); font-weight: 700; }
.read-options { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Small, quiet and quick to hit. They are a note to yourself, not a decision
   that costs money - the buttons below are that. */
.read-chip {
  min-height: 38px;
  flex: 1 1 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
  padding: 0.4rem 0.7rem;
}
.read-chip:hover { background: rgba(255, 255, 255, 0.11); }
.read-chip.selected {
  background: var(--button);
  border-color: var(--button);
  color: var(--button-text);
}

/* The buckets get one colour each, used in the bar, the legend and the stats
   table, so the same idea is the same colour everywhere it appears. */
.bucket-thick { --bucket: #6fc48b; }
.bucket-thin { --bucket: #a8cf72; }
.bucket-showdown { --bucket: #e3c07b; }
.bucket-draw { --bucket: #7fb6e6; }
.bucket-air { --bucket: #b8807a; }

.read-review {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}
.read-review h3 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.62;
  font-weight: 600;
}
.read-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.read-item { display: grid; gap: 0.35rem; }
.read-item.skipped { opacity: 0.5; }
.read-item-head {
  margin: 0;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.read-street { color: var(--gold); font-weight: 700; }
.read-villain { color: var(--muted); }
.read-said { margin: 0; font-size: 0.9rem; }

/* A range is a shape rather than an answer, and this is the whole reason the
   feature exists: seeing that his line was 40% one pair and 25% nothing is what
   eventually makes the next guess better. */
.read-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.read-seg { background: var(--bucket); opacity: 0.55; }
/* The one you named is the one lit up. */
.read-seg.named { opacity: 1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.read-legend {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.74rem;
  color: var(--muted);
}
.read-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.read-key {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--bucket);
  display: inline-block;
}
.read-actual { margin: 0.15rem 0 0; font-size: 0.85rem; opacity: 0.8; }
.read-actual .card { transform: scale(0.82); transform-origin: left center; }
.read-findings { margin: 0.35rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }

/* The confusion matrix. The diagonal is what you meant; everything off it is
   the shape of the misread, which is the actual coaching. */
.read-matrix td { text-align: right; }
.read-matrix td:first-child, .read-matrix th:first-child { text-align: left; }
.read-diagonal { color: var(--gold); font-weight: 700; }
.read-heavy { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 720px) {
  /* Full 44px touch target on a phone: this gets tapped in a hurry, with one
     thumb, while it is your turn. */
  .read-chip { flex: 1 1 30%; min-height: 44px; font-size: 0.78rem; padding: 0.4rem 0.5rem; }
}
/* A read that could not be marked says why, quietly. */
.read-unmarked { margin: 0; font-size: 0.78rem; color: var(--muted); opacity: 0.85; }


/* ==========================================================================
   THE FELT: ONE COORDINATE SYSTEM
   ==========================================================================

   Everything above this line that positioned a seat, a hole card, a bet chip or
   a dealer disc is superseded here. There used to be five rings, each an ellipse
   in percent of the felt, each tuned by eye at one window size. A percentage
   ellipse warps with its container and each ring warped by a different amount,
   so the gaps between them opened and closed with the window: right on the
   desktop it was tuned on, wrong on a tablet, broken on a phone. The 41 media
   queries across seven breakpoints above are mostly patches for one collision at
   one width, and this section is what makes them unnecessary.

   One rule replaces all of it: everything belonging to a player lives in one box
   - their "pod" - which hangs off a single anchor on one ellipse and grows in
   towards the pot. A seat can no longer be drawn on top of its own cards,
   because they are the same box.

   Every size here is in cqw or cqh: percentages of the felt's own width and
   height. That is what makes the layout survive any screen. The same percentages
   live in src/ui/seat-layout.js, and test/seat-layout.test.js reads this file to
   check the two agree, then proves no two pods can overlap. The felt's aspect
   ratio is therefore a free choice, set per breakpoint below purely to use
   whatever space the screen has.
   ========================================================================== */

.poker-table-wrap {
  /* `size`, not `inline-size`: cqh resolves to zero without it and every pod
     would collapse. A test asserts this word. */
  container-type: size;
  aspect-ratio: 16 / 10;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}
.poker-table {
  position: absolute;
  inset: 0;
  overflow: visible;
}
/* The wooden rail is drawn just outside the ring the seats are anchored to, so
   players sit inside the rail rather than on it. The anchors are at 4% and 5%
   from the edges (RAIL in src/ui/seat-layout.js is 46 and 45 percent radii), so
   the wood goes at 1.5% and 2.5% and the seats clear it.

   It used to be `inset: 13% 5% 9%` - an asymmetric guess, unrelated to where the
   seats actually were, which is why avatars sat half on the wood on a tablet. */
.poker-table::before {
  inset: 2.5% 1.5%;
}
.poker-table-wrap {
  background:
    radial-gradient(circle at 50% 50%, rgba(29, 148, 94, 0.68) 0 30%, rgba(12, 91, 61, 0.92) 31% 52%, transparent 53%),
    radial-gradient(circle at center, rgba(255,255,255,0.07), transparent 34%),
    linear-gradient(145deg, #07120f, #0e211b);
}

/* ---- The pod ---- */

.pod {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6cqw;
  /* The anchor is the pod's outer edge, on the rail, not its centre. That is
     what stops a pod being drawn out over the rail at any size. */
  transform: translate(var(--pod-tx), var(--pod-ty));
  pointer-events: none;
}
/* Direction of travel: the player is always on the rail side, their cards and
   chips always on the pot side, the way they sit at a real table. Sizes must
   match POD_SIZE in src/ui/seat-layout.js - a test reads them from here. */
.pod-up { flex-direction: column-reverse; width: 12.4cqw; height: 18.5cqh; }
.pod-down { flex-direction: column; width: 12.4cqw; height: 18.5cqh; }
.pod-right { flex-direction: row; width: 19.1cqw; height: 10.3cqh; }
.pod-left { flex-direction: row-reverse; width: 19.1cqw; height: 10.3cqh; }
/* The hero's own cards are the one thing on the felt that is read every hand, so
   they do not shrink to the ring and the hero's pod is taller to hold them. It
   can afford to be: the hero sits alone at the bottom, with their nearest
   neighbours a third of the felt away. */
.pod-hero { width: 12.4cqw; height: 25cqh; }

/* What a player has in front of them: their cards, and the chips they have put
   in this street, side by side on one line. Giving the chips a line of their own
   made every pod taller than the ring could hold. */
.pod-front {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  flex: 0 0 auto;
}
.pod-front:empty { display: none; }

/* The seat pill keeps every style it had. All it loses is its own position:
   the pod owns that now. */
.pod .seat {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0.4cqw;
  pointer-events: auto;
}
.pod-right .seat,
.pod-left .seat {
  width: 8cqw;
}
.pod .seat.active { transform: scale(1.04); }
.pod .seat.empty { min-height: 3.4cqh; font-size: 1.4cqw; }

/* Type, portraits and the chip readout scale with the felt, so a pod holds its
   shape instead of bursting at small sizes. The clamps are legibility floors,
   not tuning. The seat itself keeps the look it already had - portrait over name
   over chips, no box around it - because that was a deliberate decision and none
   of it is what was broken. */
.pod .seat-top { gap: 0.1cqh; margin-bottom: 0; }
.pod .avatar {
  width: 3.6cqw;
  height: 3.6cqw;
  min-width: 26px;
  min-height: 26px;
}
.pod .avatar svg { width: 100%; height: 100%; }
.pod .seat-name { margin: 0; font-size: clamp(0.62rem, 1.35cqw, 0.92rem); line-height: 1.15; }
.pod .status { font-size: clamp(0.5rem, 1.05cqw, 0.7rem); margin: 0; line-height: 1.2; }
.pod .persona-badge { font-size: clamp(0.46rem, 0.98cqw, 0.68rem); }
.pod .seat-stack-visual {
  gap: 0.25cqw;
  min-width: 0;
  height: auto;
  margin: 0;
}
.pod .seat-stack-visual .side-chip-stack { width: 1.9cqw; height: 2.4cqw; min-width: 12px; min-height: 14px; }
.pod .seat-stack-visual em { font-size: clamp(0.64rem, 1.5cqw, 1rem); color: rgba(255, 244, 214, 0.95); }
/* The chips themselves were 30px wide whatever the felt was, so on a tablet they
   overflowed their own holder and the amount printed on top of them. */
.pod .seat-stack-visual i {
  width: 100%;
  height: 0.75cqw;
  min-height: 4px;
  transform: translateY(calc(1.5cqw - (var(--chip-index, 0) * 0.24cqw)));
}
/* The chip graphic is decoration; the number is the thing being read. Clip it so
   a stray chip can never sit across the pot total. */
.pod .seat-stack-visual .side-chip-stack,
.center-hud .pot-chip-pile,
.center-hud .pot-chip-pile .side-chip-stack { overflow: hidden; }
.center-hud .pot-chip-pile .side-chip-stack { width: 100%; height: 100%; }
.center-hud .pot-chip-pile i {
  width: 100%;
  height: 0.85cqw;
  min-height: 5px;
  transform: translateY(calc(1.7cqw - (var(--chip-index, 0) * 0.26cqw)));
}

/* ---- The three things in front of a player ---- */

/* Dealer and blind discs ride on the portrait, on the side away from the pot.
   They used to be a ring of their own, each nudged around an orbit until they
   stopped touching, which is how the button and the small blind came to render
   as one badge. Two discs on one seat now sit side by side and cannot collide,
   and discs on different seats cannot collide because their pods cannot.

   A row of their own was the first attempt and it was wrong: a disc is present
   on three seats out of nine, and the row cost the other six the height. */
.pod-markers {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 40%);
  display: flex;
  align-items: center;
  gap: 0.25cqw;
}
.pod-markers:empty { display: none; }
/* The talk bubble hangs below its seat, which for the seats along the top of the
   oval is straight onto their own cards. Those seats get it above instead: the
   rail side, where there is nothing to cover. */
.pod-down .action-bubble {
  top: auto;
  bottom: 100%;
  transform: translate(-50%, -20%);
}
.pod-up .pod-markers { top: 100%; bottom: auto; transform: translate(-50%, -15%); }
.pod-right .pod-markers { top: 50%; bottom: auto; left: auto; right: 100%; transform: translate(40%, -50%); }
.pod-left .pod-markers { top: 50%; bottom: auto; left: 100%; transform: translate(-40%, -50%); }
.pod .position-marker {
  position: static;
  transform: none;
  transition: none;
  width: 2.4cqw;
  height: 2.4cqw;
  min-width: 15px;
  min-height: 15px;
  font-size: clamp(0.42rem, 0.95cqw, 0.7rem);
}
.pod .position-marker.dealer-button {
  width: 2.7cqw;
  height: 2.7cqw;
  min-width: 17px;
  min-height: 17px;
}

.pod-cards {
  position: static;
  transform: none;
  flex: 0 0 auto;
  display: flex;
  gap: 0.3cqw;
  padding: 0.15cqw;
  animation: none;
}
.pod-cards .card {
  min-width: 3cqw;
  width: 3cqw;
  height: 4.2cqw;
  font-size: clamp(0.5rem, 1.3cqw, 1rem);
  border-radius: 0.4cqw;
}
.pod-cards.hero .card {
  min-width: 4.4cqw;
  width: 4.4cqw;
  height: 6.2cqw;
  font-size: clamp(0.8rem, 1.9cqw, 1.6rem);
}

.pod-bet {
  position: static;
  transform: none;
  flex: 0 0 auto;
  gap: 0.25cqw;
  padding: 0.2cqw 0.4cqw;
  font-size: clamp(0.5rem, 1.1cqw, 0.8rem);
  animation: none;
  white-space: nowrap;
}
.pod-bet .chip-stack { width: 1.1cqw; height: 1.1cqw; min-width: 8px; min-height: 8px; }

/* The seat's own committed-chips pill is redundant now that the bet chip is part
   of the pod and unmistakably the same player's. */
.seat-commit-mini { display: none; }

/* ---- The middle ---- */

/* One centred stack. The board and the pot were previously centred separately,
   at 42% and 55% of a felt whose height changed with the window, which is how
   the pot badge came to sit on top of the community cards on a phone. */
.center-hud {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqh;
  width: auto;
  pointer-events: none;
}
.center-hud .board-cards {
  display: flex;
  justify-content: center;
  gap: 0.6cqw;
  min-height: 0;
  margin: 0;
}
.center-hud .card {
  min-width: 4.4cqw;
  width: 4.4cqw;
  height: 6.2cqw;
  font-size: clamp(0.7rem, 1.9cqw, 1.5rem);
  border-radius: 0.5cqw;
}
.center-hud .table-pot-core {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  min-width: 0;
  min-height: 0;
  padding: 0.5cqh 1.2cqw;
}
.center-hud .table-pot-core span { font-size: clamp(0.5rem, 1.05cqw, 0.76rem); }
.center-hud .table-pot-core strong { font-size: clamp(0.85rem, 2.1cqw, 1.7rem); }
.center-hud .pot-chip-pile { width: 5.5cqw; height: 2.2cqw; margin: 0; }

/* ---- Narrow screens ----

   Nine pods at desktop proportions do not fit around a 740px oval: the type hits
   its legibility floor and bursts the pod. So below 900px the pods take a bigger
   share of the felt, and the felt turns squarer to use the height a portrait
   screen has going spare. Both sets of proportions are checked by the same
   overlap test, so neither is a guess. */
@media (max-width: 900px) {
  .poker-table-wrap { aspect-ratio: 1 / 1; }
  .poker-table-wrap .pod-up { width: 16.6cqw; height: 18.4cqh; }
  .poker-table-wrap .pod-down { width: 16.6cqw; height: 18.4cqh; }
  .poker-table-wrap .pod-right { width: 27.3cqw; height: 12.4cqh; }
  .poker-table-wrap .pod-left { width: 27.3cqw; height: 12.4cqh; }
  .poker-table-wrap .pod-hero { width: 16.6cqw; height: 18.4cqh; }
  .pod-right .seat, .pod-left .seat { width: 11cqw; }
  .pod .avatar { width: 5cqw; height: 5cqw; }
  .pod .seat-name { font-size: clamp(0.62rem, 1.9cqw, 0.9rem); }
  .pod .seat-stack-visual .side-chip-stack { width: 2.6cqw; height: 3.2cqw; }
  .pod .seat-stack-visual em { font-size: clamp(0.6rem, 2cqw, 0.86rem); }
  .pod .position-marker { width: 3.4cqw; height: 3.4cqw; font-size: clamp(0.42rem, 1.3cqw, 0.66rem); }
  .pod .position-marker.dealer-button { width: 3.8cqw; height: 3.8cqw; }
  .pod-cards .card { min-width: 4.2cqw; width: 4.2cqw; height: 5.9cqw; font-size: clamp(0.5rem, 1.8cqw, 0.9rem); }
  .pod-cards.hero .card { min-width: 6cqw; width: 6cqw; height: 8.4cqw; font-size: clamp(0.7rem, 2.6cqw, 1.3rem); }
  .pod-bet { font-size: clamp(0.5rem, 1.6cqw, 0.76rem); }
  .center-hud .card { min-width: 6.4cqw; width: 6.4cqw; height: 9cqw; font-size: clamp(0.7rem, 2.7cqw, 1.3rem); }
  .center-hud .table-pot-core strong { font-size: clamp(0.85rem, 3cqw, 1.5rem); }
}

/* ---- Phones ----

   Same compact proportions, a taller felt, and the hero lifted out of the ring
   into `.hero-strip` below it - which is the one thing the old phone layout got
   right and is kept. */
@media (max-width: 560px) {
  .poker-table-wrap { aspect-ratio: 4 / 5; }
  .pod:has(.seat.hero) .pod-cards,
  .pod:has(.seat.hero) .seat { display: none; }
  .action-bubble { display: none; }
  .center-hud .pot-chip-pile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pod .seat.active { transform: none; }
}

/* ---- The read drill's two questions ----

   Each answer carries the plain sentence and the term it is called, stacked.
   The sentence is the definition, which is what lets one drill serve somebody
   who has never heard "capped" and somebody who already thinks in those terms:
   a beginner answers the English and learns the word by seeing it sit under the
   answer they just chose. */
.read-chip.shape-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
  line-height: 1.25;
  padding-block: 0.5rem;
}
.shape-chip .chip-plain { font-weight: 800; }
.shape-chip .chip-term {
  font-size: 0.72em;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold, #d9ad5b);
  opacity: 0.85;
}
.read-chip.shape-chip.selected .chip-term { opacity: 1; }
.read-mark { font-weight: 950; letter-spacing: 0.04em; }
.read-mark.hit { color: #8ee5ad; }
.read-mark.miss { color: rgba(246, 242, 234, 0.6); }
.read-gloss { color: rgba(246, 242, 234, 0.58); font-weight: 600; font-size: 0.92em; }

/* ---- The drill clock ----
   Opt-in, and deliberately tighter than a real table: practice harder than the
   game. Running out never blocks the hand - the action buttons stay live and the
   read records as unanswered, the same as skipping always has. */
.read-clock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 1.15rem;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.read-clock-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(126, 224, 160, 0.45), rgba(126, 224, 160, 0.75));
  transition: width 250ms linear;
}
.read-clock.spent .read-clock-fill { background: rgba(239, 142, 142, 0.5); }
.read-clock-text {
  position: relative;
  padding-inline: 0.55rem;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  color: rgba(246, 242, 234, 0.9);
}
.read-question.locked { opacity: 0.55; }
.read-chip:disabled { cursor: default; }

/* The three lanes.
   Each is a card with a coloured spine rather than a coloured background: the
   panel already has a lot of tiles in it and three tinted blocks would fight
   the felt. The spine is enough to say "these three are one set, and they are
   different from each other". */
.lane {
  position: relative;
  padding: 0.85rem 0.9rem 0.7rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.lane::before {
  content: "";
  position: absolute;
  inset: 0.8rem auto 0.8rem 0;
  width: 3px;
  border-radius: 3px;
  background: var(--lane-colour, rgba(244, 240, 232, 0.3));
}
.lane-value { --lane-colour: #8ee5ad; }
.lane-bluff { --lane-colour: #d9ad5b; }
.lane-charge { --lane-colour: #7fb6e8; }

/* The verdict is the sentence somebody reads if they read nothing else, so it
   is set above the numbers and larger than them. */
.lane-verdict {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}

/* A caveat that is smaller than the number it qualifies is a caveat nobody
   reads. This one is the same size as the body note and set apart, because the
   charge figures are genuinely one-street numbers and will be misread if that
   is not said next to them. */
.panel-note.caveat {
  margin-top: 0.55rem;
  padding-left: 0.6rem;
  border-left: 2px solid rgba(244, 240, 232, 0.18);
  font-style: italic;
}

.lane .money-row:first-of-type { margin-top: 0.5rem; }

/* The sizing ladder.
   Two rows carry meaning and the rest are context, so they are marked rather
   than the whole table being decorated: the size you actually bet, and the
   smallest one that would have denied a correct call. */
.sizing-review .sizing-where {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: rgba(244, 240, 232, 0.55);
}
.sizing-table td, .sizing-table th { font-variant-numeric: tabular-nums; }
.sizing-table tr.sizing-actual {
  background: rgba(217, 173, 91, 0.10);
}
.sizing-table tr.sizing-actual td:first-child { font-weight: 800; }
.sizing-table tr.sizing-floor td {
  border-top: 1px solid rgba(127, 182, 232, 0.45);
  border-bottom: 1px solid rgba(127, 182, 232, 0.45);
}
.sizing-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(217, 173, 91, 0.22);
  color: #ffe9ae;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.sizing-table .positive { color: #8ee5ad; }
.sizing-table .negative { color: #ff9b9b; }

/* The uncapped-range flag. Sits above the ladder because it is the finding and
   the table is the evidence, not the other way round. */
.uncapped-fire {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid #ff9b9b;
  border-radius: 0 10px 10px 0;
  background: rgba(255, 155, 155, 0.08);
}
.uncapped-fire .leak-headline { margin: 0 0 0.3rem; font-weight: 800; }
.uncapped-fire .leak-detail { margin: 0; font-size: 0.85rem; color: rgba(244, 240, 232, 0.75); }