/* table.css — rectangular table, all 9 players on the edge */

.poker-table {
  max-width: var(--content-wide);
  margin: var(--space-2) auto var(--space-4);
  padding-inline: var(--space-3);
}

.table-rect {
  position: relative;
  margin-inline: auto;
  max-width: 44rem;
  min-height: 0;
}

/* ---------- Grid rail: seats on perimeter, felt in center ---------- */
.table-rail {
  container-type: inline-size;
  container-name: table-rail;
  --seat-col: 3.5rem;
  --seat-font-scale: 1.1;
  --felt-card-pad: 1.75rem;
  --rail-gap: 2px;
  /* Felt is narrower than the center grid track; side cards/bets add this gap so they land on felt */
  --felt-inline-scale: 0.97;
  --felt-side-gap: calc((100cqi - 2 * var(--seat-col) - 2 * var(--rail-gap)) * (1 - var(--felt-inline-scale)) / 2);
  --seat-bet-line-height: 1.2;
  --seat-bet-height: calc(0.5rem * var(--seat-font-scale) * var(--seat-bet-line-height));
  --seat-bet-felt-gap: 2px;
  --felt-top-card-gap: 2px;
  --felt-top-card-to-bet-gap: 2px;
  --felt-top-card-h: 23px;
  /* Top band: 2px + cards + 2px + bet chip + 2px before dealer prompt */
  --felt-top-band: calc(
    var(--felt-top-card-gap) + var(--felt-top-card-h) + var(--felt-top-card-to-bet-gap) +
      var(--seat-bet-height) + 2px
  );
  --felt-card-pad-top: var(--felt-top-band);
  /* Hero card size — used by the felt bottom band (bet + hole cards) */
  --hero-card-w: 56px;
  --hero-card-h: calc(var(--hero-card-w) * 1.4);
  /* Bottom band: hero bet chips, then hero hole cards, on the felt */
  --felt-bottom-band: calc(
    var(--seat-bet-height) + var(--seat-bet-felt-gap) + var(--hero-card-h) +
      var(--seat-bet-felt-gap)
  );
  display: grid;
  grid-template-columns: var(--seat-col) 1fr var(--seat-col);
  grid-template-rows: auto 0.9fr 0.9fr 0.9fr auto;
  gap: var(--rail-gap);
  padding: 6px;
  border-radius: var(--radius-xl);
  /* Dark pebbled leather rail + warm mahogany wash so it still reads brown */
  background-color: var(--color-mahogany);
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-mahogany) 48%, transparent),
      color-mix(in srgb, var(--color-mahogany-2) 32%, transparent)
    ),
    url('../assets/leather-rail.jpg');
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -1px 3px rgba(0, 0, 0, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

.player-seats {
  display: contents;
}

.table-felt {
  position: relative;
  --felt-card-pad: 1.75rem;
  --seat-bet-line-height: 1.2;
  --seat-bet-height: calc(0.5rem * var(--seat-font-scale) * var(--seat-bet-line-height));
  --seat-bet-felt-gap: 2px;
  --felt-top-card-gap: 2px;
  --felt-top-card-to-bet-gap: 2px;
  --felt-top-card-h: 23px;
  --felt-top-band: calc(
    var(--felt-top-card-gap) + var(--felt-top-card-h) + var(--felt-top-card-to-bet-gap) +
      var(--seat-bet-height) + 2px
  );
  --felt-card-pad-top: var(--felt-top-band);
  /* Inherit --hero-card-w / --felt-bottom-band from .table-rail so bands stay in sync */
  grid-column: 2;
  grid-row: 2 / 5;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% * var(--felt-inline-scale, 0.97));
  justify-self: center;
  min-height: 0;
  height: 100%;
  /* Top/side pads: opponent hole cards + bet chips under them;
     bottom pad: hero bet chips + hero hole cards */
  padding: var(--felt-card-pad-top) var(--felt-card-pad) var(--felt-bottom-band);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 92% 88% at 50% 48%, var(--color-surface-dynamic) 0%, var(--color-surface-offset) 58%, var(--color-bg) 100%);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* Seat grid placement — all 9 on the rail edge */
.player-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  z-index: 2;
  padding: 1px;
  transition: opacity var(--transition-interactive);
}

.player-seat[data-seat='0'] {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: end;
  transform: translateX(calc(-50% - 1.75rem));
}
.player-seat[data-seat='1'] {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: end;
  transform: translateX(calc(50% + 1.75rem));
}
.player-seat[data-seat='2'] { grid-column: 3; grid-row: 2; justify-self: start; align-self: center; }
.player-seat[data-seat='3'] { grid-column: 3; grid-row: 3; justify-self: start; align-self: center; }
.player-seat[data-seat='4'] { grid-column: 3; grid-row: 4; justify-self: start; align-self: center; }
.player-seat[data-seat='5'] { grid-column: 1; grid-row: 4; justify-self: end; align-self: center; }
.player-seat[data-seat='6'] { grid-column: 1; grid-row: 3; justify-self: end; align-self: center; }
.player-seat[data-seat='7'] { grid-column: 1; grid-row: 2; justify-self: end; align-self: center; }

/* Felt layout: badge + prompt docked top, table center docked bottom.
 * Dealer station flex-grows into the space above the street badge; the prompt
 * may expand up to that band and keeps a 5px gap before the board street badge. */
.felt-header,
.dealer-station {
  --dealer-prompt-street-gap: 5px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 22rem;
  min-height: 0;
  margin-bottom: var(--dealer-prompt-street-gap);
  /* Card + bet band lives in felt pad; hair of clearance here */
  padding-top: 2px;
  overflow: hidden;
}

.dealer-station .scenario-type-badge {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  font-size: calc(0.6875rem * 1.1);
  line-height: 1.25;
  padding: 1px var(--space-2);
  /* Pull badge down so 30% of its height overlaps the dealer prompt */
  margin-bottom: calc(-0.3 * (1.25em + 2px));
}

.felt-prompt {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  /* Inset prompt so side-seat card + bet column stays clear on left/right.
   * No bottom padding — the station's 5px margin is the gap to the street badge. */
  padding-inline: var(--felt-card-pad);
  padding-top: 2px;
  padding-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: stretch;
}

.felt-prompt.is-empty,
.felt-prompt[hidden] {
  display: none;
}

.dealer-prompt {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  /* Grow with copy up to the street-badge band (parent fills that space). */
  height: fit-content;
  max-height: 100%;
  /* Beat .scenario-prompt { margin-bottom } so the only gap to the street badge is 5px. */
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  --dealer-prompt-font: 0.6875rem;
  --dealer-prompt-scale: 1.166; /* was 1.296; -10% */
  font-size: calc(var(--dealer-prompt-font) * var(--dealer-prompt-scale));
  line-height: 1.4;
  text-align: left;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  transition: none;
}

.dealer-prompt.prompt-fade-in {
  animation: dealer-prompt-in 180ms ease both;
}

@keyframes dealer-prompt-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dealer-prompt.prompt-fade-out {
  opacity: 0;
  transform: translateY(-4px);
}

.dealer-prompt::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}

.table-center {
  --table-center-font-scale: 1.15;
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 92%;
  text-align: center;
}

.stage-plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: calc(0.5rem * var(--table-center-font-scale, 1.15));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  max-width: 100%;
  text-align: center;
  line-height: 1.2;
}

.hero-mid-row .stage-plaque .felt-badge {
  font-size: calc(0.64125rem * var(--table-center-font-scale, 1.15)); /* −5% */
  padding: 1px var(--space-1);
}

.hero-mid-row .stage-plaque .field-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.69825rem; /* −5% */
  letter-spacing: 0.03em;
  line-height: 1.25;
  gap: 0;
  width: 100%;
}

.hero-mid-row .stage-plaque .field-avg-line {
  display: block;
  width: 100%;
  text-align: center;
}

.felt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(0.6875rem * var(--table-center-font-scale));
  line-height: 1.25;
  color: var(--color-on-primary);
  background: var(--color-primary);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.field-avg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: calc(0.5rem * var(--table-center-font-scale));
}

.pot-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-1) / 2);
}

.pot-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.pot-value {
  font-family: var(--font-mono);
  font-size: calc(0.9rem * var(--table-center-font-scale));
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.blinds-plaque {
  font-family: var(--font-mono);
  font-size: calc(0.5625rem * var(--table-center-font-scale));
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.pot-sub,
.to-call-chip {
  font-family: var(--font-mono);
  font-size: calc(0.675rem * var(--table-center-font-scale));
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.to-call-chip {
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
}

.board-area {
  display: flex;
  justify-content: center;
  width: 100%;
}

.board-area .board-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-1) / 2);
}

.board-area .board-cards,
.board-area .board-placeholder {
  --card-w: var(--board-card-w, 40px);
}

.board-area {
  --board-card-w: 40px;
}

.board-placeholder {
  display: flex;
  gap: var(--space-1);
  height: calc(var(--board-card-w) * 1.4);
}

.board-slot {
  width: var(--board-card-w);
  height: 100%;
  border: 1.5px dashed var(--color-text-muted);
  border-radius: calc(var(--board-card-w) * 0.1);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0.9;
}

[data-theme='light'] .board-slot {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  border-color: var(--color-border);
}

.board-area .no-board-note {
  font-size: calc(0.625rem * var(--table-center-font-scale));
  color: var(--color-text-faint);
  font-style: italic;
  margin: 0;
  text-transform: none;
}

/* Stage-specific felt accents */
.poker-table[data-stage='bubble'] .stage-badge,
.poker-table[data-stage='final'] .stage-badge {
  background: var(--color-warning);
  color: var(--color-on-primary);
}

/* ---------- Player seats ---------- */
.seat-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  border: 2px solid var(--color-border);
  font-size: calc(0.5rem * var(--seat-font-scale));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.seat-stack {
  font-family: var(--font-mono);
  font-size: calc(0.5625rem * var(--seat-font-scale));
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
  line-height: 1.1;
}

.seat-cards {
  display: flex;
  gap: 1px;
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.card-back {
  display: block;
  width: 16px;   /* was 13px; +20% */
  height: 23px;  /* was 19px; +20% */
  border-radius: 2px;
  background: linear-gradient(135deg, #1a3d6e, #0f2847);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Top seats: cards 2px below felt top; bets 2px below cards */
.player-seat[data-seat='0'] .seat-cards,
.player-seat[data-seat='1'] .seat-cards {
  left: 50%;
  top: 100%;
  bottom: auto;
  transform: translate(-50%, calc(var(--rail-gap, 2px) + var(--felt-top-card-gap, 2px)));
}

/* Right seats: outer card edge docks to the felt's right edge */
.player-seat[data-seat='2'] .seat-cards,
.player-seat[data-seat='3'] .seat-cards,
.player-seat[data-seat='4'] .seat-cards {
  right: 100%;
  left: auto;
  top: 50%;
  transform: translate(calc(-1 * var(--felt-side-gap, 0px)), -50%);
}

/* Left seats: outer card edge docks to the felt's left edge */
.player-seat[data-seat='5'] .seat-cards,
.player-seat[data-seat='6'] .seat-cards,
.player-seat[data-seat='7'] .seat-cards {
  left: 100%;
  right: auto;
  top: 50%;
  transform: translate(var(--felt-side-gap, 0px), -50%);
}

.player-seat.seat-folded .seat-cards,
.seat-cards.seat-cards-folded {
  opacity: 1;
}

/* Occupied live player pucks match the hero gold treatment */
.player-seat:not(.seat-empty):not(.seat-folded) .seat-avatar {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 2px var(--color-primary);
}

.player-seat.seat-folded .seat-cards .card-back {
  filter: grayscale(0.55) contrast(1.05) brightness(0.95);
  opacity: 0.85;
  background: linear-gradient(135deg, #8a7340, #5c4a22);
  border-color: rgba(211, 163, 57, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.seat-bet {
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  transform: translate(-50%, 100%);
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-mono);
  font-size: calc(0.5rem * var(--seat-font-scale));
  font-weight: 600;
  line-height: var(--seat-bet-line-height);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* Keep top-seat bets 2px below the card backs */
.player-seat[data-seat='0'] .seat-bet,
.player-seat[data-seat='1'] .seat-bet {
  bottom: auto;
  top: 100%;
  transform: translate(
    -50%,
    calc(
      var(--rail-gap, 2px) + var(--felt-top-card-gap, 2px) + var(--felt-top-card-h, 23px) +
        var(--felt-top-card-to-bet-gap, 2px)
    )
  );
}

/* Right seats: bet chips share the cards' felt-edge dock column */
.player-seat[data-seat='2'] .seat-bet,
.player-seat[data-seat='3'] .seat-bet,
.player-seat[data-seat='4'] .seat-bet {
  left: auto;
  right: 100%;
  bottom: auto;
  top: 50%;
  transform: translate(
    calc(-1 * var(--felt-side-gap, 0px)),
    calc(var(--felt-top-card-h, 23px) / 2 + var(--felt-top-card-to-bet-gap, 2px))
  );
}

/* Left seats: bet chips share the cards' felt-edge dock column */
.player-seat[data-seat='5'] .seat-bet,
.player-seat[data-seat='6'] .seat-bet,
.player-seat[data-seat='7'] .seat-bet {
  left: 100%;
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translate(
    var(--felt-side-gap, 0px),
    calc(var(--felt-top-card-h, 23px) / 2 + var(--felt-top-card-to-bet-gap, 2px))
  );
}

.seat-bet[hidden],
.seat-cards[hidden],
.seat-allin-badge[hidden],
.to-call-chip[hidden] {
  display: none;
}
.seat-bet.is-hidden,
.seat-cards.is-hidden,
.seat-allin-badge.is-hidden,
.to-call-chip.is-hidden {
  visibility: hidden;
}

.dealer-button {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--radius-full);
  background: #f3f1e8;
  color: #16181c;
  font-size: calc(0.5rem * var(--seat-font-scale));
  font-weight: 800;
  border: 1px solid rgba(0, 0, 0, 0.2);
  line-height: 1;
}

.player-seat {
  position: relative;
}

.seat-interactive {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.seat-interactive:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.seat-interactive[aria-expanded='true'] .seat-avatar {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.player-seat.seat-folded.seat-interactive[aria-expanded='true'] .seat-avatar {
  box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 2px #6b7280;
}

.player-seat.seat-interactive:hover:not(.seat-empty):not(.seat-folded) .seat-avatar,
.hero-seat.seat-interactive:hover .seat-avatar {
  border-color: var(--color-primary);
}

.seat-allin-badge {
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: calc(0.4375rem * var(--seat-font-scale));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-on-primary);
  background: var(--color-error);
  border: 1px solid rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* If both badges show, keep dealer on the right and all-in on the left */
.seat-avatar:has(.dealer-button) .seat-allin-badge,
.player-seat:has(.dealer-button) .seat-allin-badge,
.hero-seat:has(.dealer-button) .seat-allin-badge {
  left: -3px;
  right: auto;
}

.seat-hole-cards {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0;
  padding-bottom: 0;
}

.seat-hole-cards .hole-cards {
  --card-w: 46px;
  gap: calc(var(--space-1) / 2);
}

/* ---------- Hero zone: felt-centered cards; mid row; button row ---------- */
.hero-zone {
  --hero-card-w: 56px;
  --hero-card-h: calc(var(--hero-card-w) * 1.4);
  --decision-btn-h: 1.875rem;
  --decision-btn-min: 4.25rem;
  --decision-btn-gap: calc(var(--space-1) / 2);
  /* Keep felt bottom band in sync when hero card size changes (e.g. mobile) */
  --felt-bottom-band: calc(
    var(--seat-bet-height) + var(--seat-bet-felt-gap) + var(--hero-card-h) +
      var(--seat-bet-felt-gap)
  );
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--space-1) / 2);
  /* Pull hero stack up so bet + hole cards sit on the felt bottom band */
  padding-top: var(--felt-bottom-band);
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
  position: relative;
  top: calc(-1 * var(--felt-bottom-band));
  margin-bottom: calc(-1 * var(--felt-bottom-band));
}

/* Mid row: bet slider | hero avatar | stage info */
.hero-mid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  column-gap: var(--space-2);
  width: 100%;
  min-height: 0;
}

/* Matched overlay hosts: same width + shared mid-row height */
.hero-mid-row .bet-slider-wrap,
.hero-mid-row .stage-plaque-wrap {
  width: 100%;
  max-width: 14rem;
  align-self: stretch;
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
}

.hero-mid-row .bet-slider-wrap {
  grid-column: 1;
  justify-self: end;
}

.hero-mid-row .hero-seat-mount {
  grid-column: 2;
  justify-self: center;
  align-self: center;
}

.hero-mid-row .stage-plaque-wrap {
  grid-column: 3;
  justify-self: start;
}

.hero-mid-row .stage-plaque-wrap .stage-plaque {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1;
}

.hero-mid-row .stage-plaque-wrap .stage-plaque .felt-badge {
  flex-shrink: 0;
}

/* Button row: All-In, Raise, Fold, Call (+ review / next when shown) */
.hero-btn-row {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
  gap: var(--decision-btn-gap);
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0;
}
.hero-timer-lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.hero-timer-lock[hidden] {
  display: none;
}

/* Flatten raise/decision wrappers so their buttons share one row */
.hero-btn-row .hero-raise-row,
.hero-btn-row .hero-decisions {
  display: contents;
}

.hero-raise-row[hidden],
.hero-decisions[hidden] {
  display: none !important;
}

.hero-btn-row .decision-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: var(--decision-btn-h);
  height: var(--decision-btn-h);
  box-sizing: border-box;
  padding: 0 var(--space-1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border-bottom-width: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.28);
}

.hero-btn-row .decision-btn:focus,
.hero-btn-row .decision-btn:focus-visible {
  outline: none;
}

.hero-btn-row .decision-btn[hidden] {
  display: none;
}

.hero-btn-row .decision-btn.is-replaying-click {
  animation: decision-btn-replay-click 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes decision-btn-replay-click {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  18% {
    transform: translateY(3px) scale(0.94);
    filter: brightness(0.88);
    box-shadow:
      inset 0 3px 8px rgba(0, 0, 0, 0.4),
      0 0 0 2px var(--color-primary),
      0 0 14px rgba(211, 163, 57, 0.55);
  }
  55% {
    transform: translateY(1px) scale(0.98);
    filter: brightness(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 0 2px var(--color-primary),
      0 0 18px rgba(211, 163, 57, 0.7);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* Shared mid-row overlay hosts (bet slider + stage plaque) */
.bet-slider-wrap,
.stage-plaque-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
}

.bet-slider-wrap {
  width: 100%;
  gap: 3px;
  padding: calc(var(--space-1) / 2) var(--space-1);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18);
}

.stage-plaque-wrap {
  position: relative;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  padding: calc(var(--space-1) / 2) var(--space-1);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18);
}

.stage-plaque-wrap .stage-plaque {
  /* plate lives on the wrap again */
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.bet-slider-wrap[hidden] {
  display: none;
}

.bet-slider-header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-1);
  line-height: 1.1;
  min-width: 0;
}

.bet-slider-readout {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  flex-wrap: wrap;
}

.bet-slider-primary {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-primary);
}

.bet-slider-secondary {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.bet-slider-tertiary {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--color-text-faint);
}

.bet-slider-tertiary[hidden] {
  display: none;
}

.bet-slider-track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.25rem;
}

.bet-slider-end {
  font-size: 0.4375rem;
  font-weight: 600;
  color: var(--color-text-faint);
  line-height: 1;
  user-select: none;
}

.bet-slider-end-max {
  color: var(--color-primary);
}

.bet-slider {
  --bet-fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.45rem;
  margin: 2px 0;
  direction: rtl;
  border-radius: var(--radius-full);
  background:
    linear-gradient(
      90deg,
      rgba(211, 163, 57, 0.55) 0%,
      rgba(211, 163, 57, 0.55) var(--bet-fill),
      transparent var(--bet-fill)
    ),
    linear-gradient(180deg, #1a1208 0%, #2a2010 45%, #3a3018 100%);
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.bet-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid #7a5a18;
  background: linear-gradient(180deg, #f0d078 0%, #d3a339 55%, #a87820 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-interactive);
}

.bet-slider::-moz-range-thumb {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid #7a5a18;
  background: linear-gradient(180deg, #f0d078 0%, #d3a339 55%, #a87820 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.35);
}

.bet-slider:active::-webkit-slider-thumb {
  transform: scale(0.94);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.25);
}

.bet-slider:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bet-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.bet-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  height: 36px;
  padding: 0 2px;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(122, 90, 24, 0.55);
  background: linear-gradient(180deg, rgba(42, 32, 16, 0.95) 0%, rgba(26, 18, 8, 0.98) 100%);
  color: var(--color-text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.25);
  transition:
    background var(--transition-interactive),
    color var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    opacity var(--transition-interactive);
}

.bet-chip.is-selected {
  color: #1a1208;
  border-color: #c9a24a;
  background: linear-gradient(180deg, #f0d078 0%, #d3a339 55%, #a87820 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(211, 163, 57, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.bet-chip:disabled,
.bet-chip[aria-disabled='true'] {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}

.bet-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hero-seat-mount .hero-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  /* Static so .seat-bet anchors to .hero-zone (felt-centered) */
  position: static;
}

.hero-seat-mount {
  position: static;
  flex-shrink: 0;
}

.hero-seat-mount .seat-avatar {
  width: 2rem;
  height: 2rem;
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 2px var(--color-primary);
}

/* Hole cards: under bet chips, centered on the felt (same axis as .seat-bet) */
.hero-zone > .seat-hole-cards.hand-display {
  position: absolute;
  left: 50%;
  top: calc(var(--seat-bet-height) + var(--seat-bet-felt-gap));
  bottom: auto;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

.hero-zone > .seat-hole-cards .hole-cards {
  --card-w: var(--hero-card-w);
  gap: calc(var(--space-1) / 2);
  align-items: flex-end;
  justify-content: center;
}

/* Bet chips: same horizontal center as hole cards, above them on the felt */
.hero-seat .seat-bet {
  top: 0;
  bottom: auto;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  z-index: 4;
}

.btn-next-compact {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(2 * var(--decision-btn-min) + var(--decision-btn-gap));
  min-width: calc(2 * var(--decision-btn-min) + var(--decision-btn-gap));
  max-width: none;
  height: var(--hero-card-h);
  min-height: var(--hero-card-h);
  padding: calc(var(--space-1) / 2) 1.6em calc(var(--space-1) / 2) var(--space-2);
  font-size: calc(0.6875rem * 1.125);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: inherit;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 1px solid var(--color-primary-active);
  border-bottom-width: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.32);
}

.btn-next-compact .btn-next-label {
  line-height: 1;
}

.btn-next-compact .btn-next-chevron {
  position: absolute;
  right: 0.4em;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: -0.12em;
  pointer-events: none;
}

.btn-next-compact:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn-next-compact[hidden] {
  display: none;
}

/* Round Review control: on the green felt, 2px from the edge, above the stage badge.
 * Specificity beats .table-felt > * { position: relative } in mobile-play.css.
 * Default = teaching match (green + green glow). .is-review-mismatch = miss (red + bounce).
 * Match and mismatch share identical geometry; only color tokens change. */
.table-felt > .btn-review-compact {
  --btn-top: #6bb892;
  --btn-face: #4d8b70;
  --btn-bottom: #356652;
  --btn-text: #f4fff8;
  --btn-border: #7ec4a0;
  --btn-border-hot: #9ad4b4;
  --btn-review-size: 2.35rem;
  --btn-review-glow: 0 0 0 1px rgba(126, 196, 160, 0.55),
    0 0 12px 2px rgba(77, 139, 112, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.45);
  --btn-review-glow-hot: 0 0 0 1px rgba(154, 212, 180, 0.7),
    0 0 16px 3px rgba(77, 139, 112, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.45);
  --btn-icon-glow: drop-shadow(0 0 2px rgba(126, 196, 160, 0.55));
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--btn-review-size);
  min-width: var(--btn-review-size);
  max-width: var(--btn-review-size);
  height: var(--btn-review-size);
  min-height: var(--btn-review-size);
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  border-radius: 50%;
  color: var(--btn-text);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-face) 42%, var(--btn-bottom) 100%);
  border: 2px solid var(--btn-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    var(--btn-review-glow);
  cursor: pointer;
}

.table-felt > .btn-review-compact.is-review-mismatch {
  --btn-top: #e0887a;
  --btn-face: #d3675c;
  --btn-bottom: #a4342a;
  --btn-text: #fff5f3;
  --btn-border: #e0887a;
  --btn-border-hot: #f0a89c;
  --btn-review-glow: 0 0 0 1px rgba(224, 136, 122, 0.55),
    0 0 12px 2px rgba(211, 103, 92, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.45);
  --btn-review-glow-hot: 0 0 0 1px rgba(240, 168, 156, 0.7),
    0 0 16px 3px rgba(211, 103, 92, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.45);
  --btn-icon-glow: drop-shadow(0 0 2px rgba(224, 136, 122, 0.55));
}

.table-felt > .btn-review-compact .btn-review-icon {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  pointer-events: none;
  filter: var(--btn-icon-glow);
}

.table-felt > .btn-review-compact:hover {
  filter: brightness(1.08);
  color: var(--btn-text);
  border-color: var(--btn-border-hot);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-face) 42%, var(--btn-bottom) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    var(--btn-review-glow-hot);
}

.table-felt > .btn-review-compact:active {
  filter: brightness(0.96);
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    var(--btn-review-glow);
}

.table-felt > .btn-review-compact:focus-visible {
  outline: 2px solid var(--btn-border);
  outline-offset: 2px;
}

.table-felt > .btn-review-compact[hidden] {
  display: none;
}

/* Bounce only applied when Review is red (teaching mismatch). */
.table-felt > .btn-review-compact.is-review-mismatch.is-review-ready {
  animation: review-ready-bounce 1.2s ease-out 1;
  transform-origin: center bottom;
  will-change: transform, filter;
}
@keyframes review-ready-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  10%,
  45% {
    transform: translateY(-16px) scale(1.28);
    filter: brightness(1.2);
  }
  25%,
  60% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .table-felt > .btn-review-compact.is-review-mismatch.is-review-ready {
    animation: review-ready-flash 0.9s ease-out 1;
  }
  @keyframes review-ready-flash {
    0%,
    100% {
      filter: brightness(1);
    }
    20%,
    55% {
      filter: brightness(1.3);
    }
    40%,
    75% {
      filter: brightness(1);
    }
  }
}

/* Previous / Continue / Next share equal-width dock space across the felt. */
.hero-btn-row > .feedback-action-compact {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: var(--decision-btn-h, 1.875rem);
  min-height: var(--decision-btn-h, 1.875rem);
}
.hero-btn-row:has(> .feedback-action-compact:not([hidden])) {
  flex-wrap: nowrap;
}


.btn-runout-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(2 * var(--decision-btn-min) + var(--decision-btn-gap));
  min-width: calc(2 * var(--decision-btn-min) + var(--decision-btn-gap));
  height: var(--hero-card-h);
  min-height: var(--hero-card-h);
  padding: calc(var(--space-1) / 2) var(--space-2);
  font-size: calc(0.6875rem * 1.125);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-runout-compact[hidden] {
  display: none;
}

.player-seat.seat-winner .seat-avatar,
.hero-seat.seat-winner .seat-avatar {
  box-shadow: 0 0 0 2px #d4b45a, 0 0 12px rgba(212, 180, 90, 0.55);
}

.seat-cards.seat-cards-revealed {
  gap: 1px;
}
.seat-cards.seat-cards-revealed .playing-card {
  --card-w: 22px;
  width: 22px;
  height: 31px;
  font-size: 8px;
  border-radius: 2px;
}
.seat-cards.seat-cards-revealed .card-rank {
  font-size: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .player-seat.seat-winner .seat-avatar,
  .hero-seat.seat-winner .seat-avatar {
    box-shadow: 0 0 0 2px #d4b45a;
  }
  .seat-cards-revealed .playing-card {
    animation: none;
  }
}

/* Live-in-hand seats (not folded / empty) share the primary avatar accent. */
.player-seat.seat-live .seat-avatar,
.hero-seat.seat-live .seat-avatar,
.player-seat.seat-villain .seat-avatar,
.player-seat.seat-allin .seat-avatar {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 2px var(--color-primary);
}

.player-seat.seat-to-act .seat-avatar,
.hero-seat.seat-to-act .seat-avatar {
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 1px var(--color-surface),
    0 0 0 2px var(--color-primary),
    0 0 10px rgba(211, 163, 57, 0.45);
}

/* Golden glow + countdown on cards while action is on this seat */
.seat-cards.is-acting {
  /* Keep position:absolute from .seat-cards — do not switch to relative */
  gap: 2px;
  border-radius: 2px;
  overflow: visible;
  box-shadow:
    0 0 0 1.5px var(--color-primary),
    0 0 10px rgba(211, 163, 57, 0.65);
  animation: acting-card-pulse 1.1s ease-in-out infinite;
}

.seat-cards.is-acting .card-back {
  /* Keep both card backs readable under the timer digits */
  opacity: 1;
  filter: none;
}

.hole-cards.is-acting {
  position: relative;
  border-radius: 4px;
  overflow: visible;
  box-shadow:
    0 0 0 2px var(--color-primary),
    0 0 12px rgba(211, 163, 57, 0.7);
  animation: acting-card-pulse 1.1s ease-in-out infinite;
}

.seat-hole-cards.is-acting .hole-cards,
.seat-hole-cards.is-acting {
  position: relative;
}

/* Digits only — no fill — centered on the card backs */
.seat-action-timer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: block;
  width: max-content;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: transparent;
  box-shadow: none;
  color: #ffe7a0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow:
    0 0 2px #000,
    0 0 4px #000,
    1px 0 0 #000,
    -1px 0 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 1px 0 #000,
    -1px 1px 0 #000;
}

.hole-cards.is-acting .seat-action-timer {
  font-size: 1.125rem;
}

@keyframes acting-card-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1.5px var(--color-primary),
      0 0 8px rgba(211, 163, 57, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 1.5px var(--color-primary-hover),
      0 0 14px rgba(232, 186, 80, 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seat-cards.is-acting,
  .hole-cards.is-acting {
    animation: none;
  }

  .dealer-prompt.prompt-fade-in {
    animation: none;
  }

  .hero-btn-row .decision-btn.is-replaying-click {
    animation: none;
    outline: 2px solid var(--color-primary);
  }
}

.player-seat.seat-folded,
.player-seat.seat-empty {
  opacity: 1;
}

/* Folded pucks: grey ring + translucent overlay so out-of-hand seats read as disabled */
.player-seat.seat-folded .seat-avatar {
  opacity: 1;
  border-color: #6b7280;
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 2px #6b7280;
  filter: none;
}

.player-seat.seat-folded .seat-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(75, 85, 99, 0.42);
  pointer-events: none;
  z-index: 1;
}

.player-seat.seat-folded .seat-stack {
  opacity: 1;
  color: var(--color-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.player-seat.seat-folded .seat-bet,
.player-seat.seat-folded .seat-allin-badge {
  opacity: 0.82;
  filter: saturate(0.75) contrast(1.05);
}

.player-seat.seat-empty {
  opacity: 0.35;
}

.player-seat.seat-empty .seat-avatar {
  border-style: dashed;
}

.player-seat.seat-allin .seat-bet {
  background: var(--color-error);
}

/* ---------- Trainer shell: fill viewport below header ---------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100svh;
}

.site-header {
  flex-shrink: 0;
}

main#main-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#view-trainer:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#view-about:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#view-tutorial:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#view-profile:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#view-feedback:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#view-trainer:not([hidden]) .poker-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding-inline: var(--space-3);
  max-width: none;
}

#view-trainer:not([hidden]) .table-rect {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}

#view-trainer:not([hidden]) .table-rail {
  flex: 1;
  min-height: 0;
}

#view-trainer:not([hidden]) .table-felt {
  min-height: 0;
  height: 100%;
}

@media (max-width: 720px) {
  .site-header {
    border-bottom: none;
    padding-block: 0;
    overflow: visible;
  }

  /* Table — edge-to-edge on mobile */
  #view-trainer:not([hidden]) .poker-table {
    padding: 0;
  }

  #view-trainer:not([hidden]) .table-rect {
    max-width: none;
    margin: 0;
  }

  #view-trainer:not([hidden]) .table-rail {
    --seat-col: 2.75rem;
    --rail-gap: 0px;
    padding: 2px;
    gap: var(--rail-gap);
    border-radius: 0;
    box-shadow: none;
    grid-template-rows: auto minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
  }

  #view-trainer:not([hidden]) .table-felt {
    min-height: 0;
    height: 100%;
    /* Keep top/bottom bands so seat + hero bet chips clear the felt content */
    padding: var(--felt-card-pad-top) var(--space-1) var(--felt-bottom-band);
    border-radius: var(--radius-sm);
  }

}

/* ---------- iPhone 13 / narrow mobile (390px) ---------- */
@media (max-width: 390px) {
  .header-inner {
    padding-inline: var(--space-2);
  }

  .stats-bar {
    max-width: 7.5rem;
  }

  .stat {
    min-width: 4.25rem;
  }

  .stat-label {
    font-size: 0.5rem;
  }

  .stat-value {
    font-size: 0.75rem;
  }

  #view-trainer:not([hidden]) .table-rail {
    --seat-col: 2.35rem;
    padding: 1px;
  }

  /* Top seats hug the center of the top edge */
  .player-seat[data-seat='0'] {
    transform: translateX(calc(-50% - 2rem));
  }
  .player-seat[data-seat='1'] {
    transform: translateX(calc(50% + 2rem));
  }

  .seat-avatar {
    width: 1.55rem;
    height: 1.55rem;
    font-size: calc(0.4375rem * var(--seat-font-scale));
  }

  .hero-seat-mount .seat-avatar {
    width: 1.65rem;
    height: 1.65rem;
  }

  .table-rail,
  .hero-zone {
    --hero-card-w: 50px;
  }
  .hero-zone {
    --decision-btn-min: 4.25rem;
    --decision-btn-h: 2.125rem;
  }

  .hero-btn-row .decision-btn {
    font-size: 0.625rem;
    padding: 0 calc(var(--space-1) / 2);
  }

  .btn-next-compact,
  .feedback-action-compact {
    font-size: 0.625rem;
    padding: 0 var(--space-1);
  }

  .table-felt > .btn-review-compact {
    --btn-review-size: 2.125rem;
  }

  .table-felt > .btn-review-compact .btn-review-icon {
    width: 0.95rem;
    height: 0.95rem;
  }

  .seat-stack {
    font-size: calc(0.5rem * var(--seat-font-scale));
  }

  .board-area .board-cards,
  .board-area .board-placeholder {
    --board-card-w: 34px;
    --card-w: 34px;
  }

  .felt-header,
  .dealer-station {
    width: 98%;
    padding-top: 2px;
  }

  .dealer-prompt {
    --dealer-prompt-font: 0.5625rem; /* 0.625 * 0.9 */
    line-height: 1.35;
    padding: 3px var(--space-2);
  }

  .table-center {
    gap: 2px;
    width: 96%;
  }

  .field-avg {
    display: none;
  }

}

@media (min-width: 391px) and (max-width: 720px) {
  .table-rail {
    --seat-col: 3rem;
  }

  .table-rail,
  .hero-zone {
    --hero-card-w: 52px;
  }

  .board-area .board-cards,
  .board-area .board-placeholder {
    --board-card-w: 37px;
    --card-w: 37px;
  }
}

@media (min-width: 721px) {
  .table-rail {
    --seat-col: 3.75rem;
  }

  .table-felt {
    min-height: 10.8rem;
  }

  .dealer-prompt {
    --dealer-prompt-font: calc(var(--text-sm) * 0.9);
  }

  .seat-avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: calc(0.5625rem * var(--seat-font-scale));
  }

  .table-rail,
  .hero-zone {
    --hero-card-w: 64px;
  }
  .hero-zone {
    --decision-btn-min: 4.75rem;
    --decision-btn-h: 1.875rem;
  }

  .hero-btn-row .decision-btn {
    font-size: 0.75rem;
  }

  .btn-next-compact,
  .feedback-action-compact {
    font-size: 0.75rem;
  }

  .table-felt > .btn-review-compact {
    --btn-review-size: 2.125rem;
  }

  .board-area .board-cards,
  .board-area .board-placeholder {
    --board-card-w: 45px;
    --card-w: 45px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .player-seat.seat-live .seat-avatar,
  .hero-seat.seat-live .seat-avatar,
  .player-seat.seat-villain .seat-avatar,
  .player-seat.seat-allin .seat-avatar {
    animation: seat-pulse 2s ease-in-out infinite;
  }
}

@keyframes seat-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--color-surface),
      0 0 0 2px var(--color-primary),
      0 0 0 0 transparent;
  }
  50% {
    box-shadow:
      0 0 0 1px var(--color-surface),
      0 0 0 2px var(--color-primary),
      0 0 6px 2px rgba(211, 163, 57, 0.55);
  }
}


/* ---------- End-of-hand reaction (win / lose / split) — lives in dealer prompt ---------- */
.outcome-reaction {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
}
.outcome-reaction[hidden] {
  display: none !important;
}
.outcome-reaction.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: outcome-pop 520ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}
.outcome-reaction-face {
  font-size: 1.35rem;
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}
.outcome-reaction-label {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.1;
}
.outcome-reaction-burst {
  position: absolute;
  inset: -12%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.outcome-reaction[data-reaction='win'] {
  border-color: #d4b45a;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #d4b45a 22%, var(--color-surface)) 0%,
    var(--color-surface) 70%
  );
}
.outcome-reaction[data-reaction='win'] .outcome-reaction-label {
  color: #c49a2e;
}
.outcome-reaction[data-reaction='win'] .outcome-reaction-face {
  animation: outcome-bounce 900ms ease-in-out infinite;
}
.outcome-reaction[data-reaction='win'] .outcome-reaction-burst {
  opacity: 1;
  background:
    radial-gradient(circle at 20% 30%, rgba(212, 180, 90, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 25%, rgba(255, 220, 120, 0.7) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 80%, rgba(212, 180, 90, 0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 75%, rgba(255, 240, 160, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 10%, rgba(255, 210, 90, 0.5) 0 2px, transparent 3px);
  animation: outcome-sparkle 1.1s ease-out both;
}

.outcome-reaction[data-reaction='lose'] {
  border-color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-surface));
}
.outcome-reaction[data-reaction='lose'] .outcome-reaction-label {
  color: var(--color-text-muted);
}
.outcome-reaction[data-reaction='lose'] .outcome-reaction-face {
  animation: outcome-droop 700ms ease-out both;
}

.outcome-reaction[data-reaction='split'] {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)) 0%,
    var(--color-surface) 72%
  );
}
.outcome-reaction[data-reaction='split'] .outcome-reaction-label {
  color: var(--color-primary);
}
.outcome-reaction[data-reaction='split'] .outcome-reaction-face {
  animation: outcome-bounce 1.1s ease-in-out 1;
}

@keyframes outcome-pop {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.88);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes outcome-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-4px) scale(1.08);
  }
  70% {
    transform: translateY(1px) scale(0.98);
  }
}
@keyframes outcome-droop {
  0% {
    transform: translateY(-6px) scale(1.05);
    opacity: 0.4;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes outcome-sparkle {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0.55;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .outcome-reaction.is-visible,
  .outcome-reaction[data-reaction='win'] .outcome-reaction-face,
  .outcome-reaction[data-reaction='lose'] .outcome-reaction-face,
  .outcome-reaction[data-reaction='split'] .outcome-reaction-face,
  .outcome-reaction[data-reaction='win'] .outcome-reaction-burst {
    animation: none;
  }
  .outcome-reaction.is-visible {
    opacity: 1;
    transform: none;
  }
}