/* ============================================================
   The poker table
   ============================================================ */

.table-wrap { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .table-wrap.with-coach { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

.felt {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  border-radius: 48% / 40%;
  background:
    radial-gradient(ellipse at 50% 42%, var(--felt-1) 0%, var(--felt-2) 72%);
  border: 14px solid var(--felt-rail);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.55),
    0 18px 50px rgba(0, 0, 0, 0.5);
}

/* Suit watermark in the middle of the felt. */
.felt::before {
  content: '♠';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13rem;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  line-height: 1;
}

.board-area {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 90%;
}

.board { display: flex; gap: 6px; min-height: 76px; align-items: center; justify-content: center; flex-wrap: wrap; }

.pot-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  padding: 5px 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(3px);
  white-space: nowrap;
}
.pot-chip .label { font-size: var(--t-xs); color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.06em; }

.street-tag {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45); font-weight: 700;
}

/* Card faces keep their own sizes on purpose. A rank is drawn to a card that
   is 54px wide, not to the interface's type scale: a step up would overflow
   it and a step down would rattle around inside it. The text that is
   interface — seat names, stacks, the street tag, the sizing presets — is on
   the scale like everything else.
   ---------------- seats ---------------- */

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: opacity 0.3s;
}
.seat.folded { opacity: 0.35; }

.seat-plate {
  width: 100%;
  background: rgba(6, 12, 18, 0.82);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.seat.acting .seat-plate {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(227, 178, 60, 0.2), 0 0 22px rgba(227, 178, 60, 0.35);
}
.seat.hero .seat-plate { border-color: rgba(77, 159, 255, 0.5); }
.seat.winner .seat-plate { border-color: var(--green); box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.22); }

.seat-name {
  font-size: var(--t-sm); font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.seat-stack { font-size: var(--t-base); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.seat-pos {
  font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}

.seat-cards { display: flex; gap: 3px; min-height: 54px; align-items: center; }

.seat-action {
  position: absolute;
  top: -12px;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  background: #0d1620;
  border: 1px solid var(--border-bright);
  white-space: nowrap;
  z-index: 3;
}
.seat-action.aggressive { border-color: var(--red); color: #ff9ea2; }
.seat-action.passive { border-color: var(--blue); color: #9ecbff; }
.seat-action.fold { border-color: var(--border); color: var(--text-faint); }

.seat-bet {
  position: absolute;
  display: flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(227, 178, 60, 0.45);
  color: var(--gold);
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
  z-index: 4;
}

.dealer-button {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffffff, #cbd5e1);
  color: #0b0f14;
  font-size: 0.72rem; font-weight: 900;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 5;
}

/* Seat placement around the oval.
   Side seats anchor to the rail rather than centring on a percentage: a
   fixed-width plate centred at 9% hangs off the edge once the felt is
   narrow, and with the coach panel alongside it the felt is never much
   wider than 776px — not even on a large desktop. */
.seat[data-slot="0"] { left: 50%; top: 89%; transform: translate(-50%, -50%); }
.seat[data-slot="3"] { left: 50%; top: 11%; transform: translate(-50%, -50%); }
.seat[data-slot="1"] { left: 3%;  top: 71%; transform: translateY(-50%); }
.seat[data-slot="2"] { left: 3%;  top: 29%; transform: translateY(-50%); }
.seat[data-slot="4"] { left: auto; right: 3%; top: 29%; transform: translateY(-50%); }
.seat[data-slot="5"] { left: auto; right: 3%; top: 71%; transform: translateY(-50%); }

/* Bets sit inboard of their seat, so they never cross the rail. */
.seat[data-slot="1"] .seat-bet, .seat[data-slot="2"] .seat-bet { right: auto; left: 100%; margin-left: 6px; top: 50%; transform: translateY(-50%); }
.seat[data-slot="4"] .seat-bet, .seat[data-slot="5"] .seat-bet { left: auto; right: 100%; margin-right: 6px; top: 50%; transform: translateY(-50%); }

/* Seats on the top half hang their cards below the plate, so nothing
   spills over the rail. */
.seat[data-slot="2"],
.seat[data-slot="3"],
.seat[data-slot="4"] { flex-direction: column-reverse; }
.seat[data-slot="2"] .seat-action,
.seat[data-slot="3"] .seat-action,
.seat[data-slot="4"] .seat-action { top: auto; bottom: -12px; }

/* Top and bottom seats put their bet toward the middle of the felt. The side
   seats are handled above; setting both top and bottom on the same element
   stretches it into a tall oval instead of leaving a compact pill. */
.seat[data-slot="0"] .seat-bet { top: -30px; bottom: auto; left: 50%; transform: translateX(-50%); }
.seat[data-slot="3"] .seat-bet { bottom: -30px; top: auto; left: 50%; transform: translateX(-50%); }

.seat[data-slot="0"] .dealer-button { top: -8px; right: -6px; }
.seat[data-slot="1"] .dealer-button { top: -8px; right: -6px; }
.seat[data-slot="2"] .dealer-button { bottom: -8px; right: -6px; }
.seat[data-slot="3"] .dealer-button { bottom: -8px; left: -6px; }
.seat[data-slot="4"] .dealer-button { bottom: -8px; left: -6px; }
.seat[data-slot="5"] .dealer-button { top: -8px; left: -6px; }

/* ---------------- playing cards ---------------- */

.card {
  width: 38px;
  height: 54px;
  border-radius: 5px;
  background: linear-gradient(170deg, #ffffff 0%, #eef2f6 100%);
  color: #12181f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  user-select: none;
  flex: none;
  position: relative;
}
.card .rank { font-size: 1.02rem; }
.card .suit { font-size: 0.92rem; margin-top: 1px; }
.card.red { color: #d8232a; }
.card.blue { color: #1857c4; }
.card.green { color: #14804a; }

.card.back {
  background:
    repeating-linear-gradient(45deg, #1e3a5f 0 5px, #16304f 5px 10px);
  border: 1.5px solid #0d1f33;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.07), 0 2px 6px rgba(0,0,0,0.45);
}

.card.lg { width: 54px; height: 76px; border-radius: 7px; }
.card.lg .rank { font-size: 1.45rem; }
.card.lg .suit { font-size: 1.3rem; }

.card.sm { width: 28px; height: 40px; border-radius: 4px; }
.card.sm .rank { font-size: 0.78rem; }
.card.sm .suit { font-size: 0.7rem; }

.card.dealt { animation: dealIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-24px) rotate(-8deg) scale(0.85); }
  to { opacity: 1; transform: none; }
}

.card-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* ---------------- action bar ---------------- */

.action-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  gap: 12px;
}

.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.action-buttons .btn { flex: 1; min-width: 110px; }

.sizing { display: grid; gap: 10px; }
.sizing-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sizing-row .btn.sm { flex: none; }

/* Each preset says what it will actually make. In a small pot several
   fractions land on the same legal minimum, and seeing the number is what
   tells you that is the rules, not a broken button. */
.size-presets { gap: 6px; }
.size-presets .size-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  line-height: 1.15; padding: 6px 8px;
  /* Equal shares of the row, so all five fit on one line on a phone. */
  flex: 1 1 0; min-width: 0;
}
.size-presets .size-name { font-size: var(--t-sm); }
.size-presets .size-chips { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-dim); }
.size-presets .size-btn.is-active {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 15%, transparent);
}
.size-presets .size-btn.is-active .size-chips { color: var(--gold); }

.size-tune .step-btn {
  font-family: var(--mono); font-size: var(--t-md); font-weight: 700;
  min-width: 46px; padding: 6px 10px;
}
.size-tune .raise-input {
  width: 92px; flex: none;
  background: var(--bg-deep, #10161f);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--gold);
  font-family: var(--mono); font-size: var(--t-md); font-weight: 700;
  text-align: center;
  padding: 7px 6px;
}
.size-tune .raise-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.size-tune .raise-slider { flex: 1 1 160px; min-width: 120px; }

input[type="range"] {
  flex: 1;
  min-width: 160px;
  accent-color: var(--gold);
  height: 6px;
}

.raise-amount {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 74px;
  text-align: right;
}

/* ---------------- coach panel ---------------- */

.coach {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
.coach h3 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }

.coach-metric {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.coach-metric:last-child { border-bottom: 0; }
.coach-metric .k { color: var(--text-dim); }
.coach-metric .v { font-family: var(--mono); font-weight: 700; }
.coach-metric .v.good { color: var(--green); }
.coach-metric .v.bad { color: var(--red); }

.verdict-box {
  margin-top: 12px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-bright);
  background: var(--bg-raised);
  font-size: 0.86rem;
  animation: rise 0.2s ease;
}
.verdict-box.good { border-left-color: var(--green); }
.verdict-box.bad { border-left-color: var(--red); }
.verdict-box.ok { border-left-color: var(--blue); }
.verdict-box .head { font-weight: 700; margin-bottom: 4px; }

.log {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-dim);
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}
.log .street-line { color: var(--gold); font-weight: 700; }

/* ---------------- range grid ---------------- */

.range-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  max-width: 640px;
}
.range-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  background: #131c26;
  color: #55677d;
  border: 1px solid transparent;
  cursor: default;
  user-select: none;
}
.range-cell.in { background: var(--gold); color: #23180a; }
.range-cell.value { background: #2fa06a; color: #04220f; }
.range-cell.bluff { background: #b8532f; color: #fee; }
.range-cell.pair { border-color: rgba(255,255,255,0.35); }
.range-cell.highlight { outline: 2px solid var(--blue); outline-offset: 1px; z-index: 2; }

.range-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-dim); }
.range-legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -2px; }

/* ============================================================
   The table on touch screens
   ------------------------------------------------------------
   Seat plates are a fixed width but were positioned by
   percentage, so on a narrow felt they hung off the rail — on
   an iPhone one plate was clipped away entirely. Below the
   desktop width the side seats anchor to the felt's edges
   instead of being centred on a percentage, which keeps every
   plate inside the oval at any size.
   ============================================================ */

@media (max-width: 1320px) {
  .felt {
    aspect-ratio: 4 / 3;
    min-height: 0;
    border-width: 10px;
  }
  .felt::before { font-size: 9rem; }

  .seat { width: min(38%, 150px); }
  .seat-plate { padding: 5px 7px; }
  .seat-name { font-size: 0.76rem; }
  .seat-stack { font-size: 0.82rem; }
  .seat-pos { font-size: 0.58rem; }

}

@media (max-width: 700px) {
  .felt { aspect-ratio: 5 / 6; border-width: 8px; border-radius: 46% / 38%; }
  .felt::before { font-size: 6rem; }

  /* A phone felt is about 350px across, and six seats plus their cards will
     not fit at desktop proportions — plates ended up sitting on top of the
     cards. Two things buy back the room:
       - the seat plate becomes a compact chip: who, and how much
       - face-down opponent cards are hidden, because a card back carries no
         information at all. They reappear at showdown, when they mean
         something. Whether an opponent is still in the hand is already clear
         from their plate, since folded seats dim and collapse. */
  .seat { width: min(32%, 96px); }
  .seat-plate { padding: 4px 6px; border-radius: 8px; }
  .seat-name { font-size: 0.66rem; gap: 2px; }
  .seat-stack { font-size: 0.74rem; }
  .seat-pos { font-size: 0.52rem; letter-spacing: 0.05em; }
  .seat-action { font-size: 0.56rem; padding: 1px 5px; top: -10px; }
  .seat-bet { font-size: 0.66rem; padding: 1px 6px; }

  .seat:not(.hero) .seat-cards,
  .seat:not(.hero) .card.back { display: none; }
  .seat:not(.hero) .card-row { gap: 2px; }

  .card { width: 26px; height: 37px; }
  .card .rank { font-size: 0.72rem; }
  .card .suit { font-size: 0.64rem; }
  .card.lg { width: 38px; height: 54px; }
  .card.lg .rank { font-size: 1.02rem; }
  .card.lg .suit { font-size: 0.92rem; }

  .board { min-height: 58px; gap: 4px; }
  .pot-chip { padding: 4px 12px; font-size: 0.9rem; }
  .dealer-button { width: 21px; height: 21px; font-size: 0.62rem; }

  /* On a felt this small the inboard bet chips can reach the centre, so pin
     them just outside the plate instead of beside the (now hidden) cards. */
  .seat[data-slot="1"] .seat-bet, .seat[data-slot="2"] .seat-bet { margin-left: 3px; }
  .seat[data-slot="4"] .seat-bet, .seat[data-slot="5"] .seat-bet { margin-right: 3px; }
  .seat[data-slot="3"] .seat-bet { bottom: -24px; }
  .seat[data-slot="0"] .seat-bet { top: -24px; }

  .lab-felt { padding: 14px 10px; gap: 12px; }
  .lab-hands { gap: 16px; }
}

/* Sliders need a real thumb to drag on a touch screen. This lives here rather
   than in base.css because table.css loads later, and the action-bar slider
   rule above would otherwise win on source order alone. */
@media (pointer: coarse) {
  input[type="range"], .lab-slider { height: 44px; }
  .lab-slider { margin: 4px 0; }
  /* Thumb-sized: a number worth aiming at, steppers worth pressing. */
  .size-tune .raise-input { min-height: 46px; width: 120px; font-size: 1.3rem; }
  .size-tune .step-btn { min-width: 60px; }
}

/* On a phone the slider — the coarsest control of the three — takes a line of
   its own rather than fighting the number for the last 80 pixels. On a tablet
   there is room for all four side by side. */
@media (pointer: coarse) and (max-width: 720px) {
  .size-tune { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; }
  .size-tune .raise-input { width: auto; }
  .size-tune .raise-slider { grid-column: 1 / -1; }
}

/* ============================================================
   HAND REVIEW
   ============================================================ */

.hand-card-wrap { position: relative; }

.hand-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 12px 40px 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hand-card:hover { background: var(--bg-hover); border-color: var(--border-bright); }
.hand-card.cooler { border-left-color: var(--blue); }

.hand-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hand-card-title { font-weight: 650; }
.hand-card-when { margin-left: auto; white-space: nowrap; }

.hand-card-body {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 9px;
}
.hand-card-cards { display: flex; align-items: center; gap: 6px; }
.hand-card-numbers { margin-left: auto; font-size: 0.84rem; }
.hand-card-cost { color: var(--red); font-weight: 600; }

.hand-card-remove {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--text-faint);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.hand-card-remove:hover { background: var(--bg-hover); color: var(--red); }

/* ---- the replay itself ---- */

.replay-panel { display: grid; gap: 12px; }
/* The felt is the game's felt, so give it the game's width. Without a cap it
   stretches to the full page here, because there is no coach column beside
   it, and the same hand would look like a different table. */
.replay-panel .felt { max-width: 820px; margin: 0 auto; width: 100%; }

.replay-transport {
  display: flex; align-items: center; gap: 10px;
}
.replay-transport .btn { flex: none; }

/* The dots scroll rather than shrink: a 40-action hand would otherwise
   squeeze them below the point of being tappable. */
.replay-dots {
  flex: 1;
  display: flex; align-items: center; gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px 2px;
  min-width: 0;
}
.replay-dots::-webkit-scrollbar { display: none; }

.replay-dot {
  flex: none;
  width: 10px; height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-bright);
  background: var(--bg-raised);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.replay-dot.street { border-radius: 2px; background: var(--border-bright); }
.replay-dot.mine { width: 14px; height: 14px; }
.replay-dot.mine.good { background: var(--green); border-color: var(--green); }
.replay-dot.mine.ok { background: var(--gold); border-color: var(--gold); }
.replay-dot.mine.bad { background: var(--red); border-color: var(--red); }
.replay-dot.here { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); transform: scale(1.25); }

.verdict-panel { border-left: 3px solid var(--border-bright); }
.verdict-panel.good { border-left-color: var(--green); }
.verdict-panel.ok { border-left-color: var(--gold); }
.verdict-panel.bad { border-left-color: var(--red); }

.replay-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 18px;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .hand-card-when { margin-left: 0; width: 100%; }
  .hand-card-numbers { margin-left: 0; }
  /* Apple's 44pt minimum: a 10px dot is a target you miss on a phone. */
  .replay-dot { width: 14px; height: 14px; }
  .replay-dot.mine { width: 18px; height: 18px; }
  .replay-dots { gap: 7px; padding: 12px 2px; }
}

.hand-card-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; }

/* ---- the coach naming the spot ---- */

.spot-tag {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  background: rgba(214, 168, 63, 0.08);
  border: 1px solid var(--gold-dim);
}
.spot-icon { font-size: 1.3rem; line-height: 1.2; }
.spot-name { font-weight: 650; font-size: 0.92rem; }
.spot-why { font-size: 0.82rem; color: var(--text-dim); margin-top: 2px; }

.verdict-better {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 550;
}

.learned-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.86rem;
  padding: 4px 0;
}
.learned-row .right, .learned-row .wrong { width: 1em; flex: none; font-weight: 700; }
.learned-row .right { color: var(--green); }
.learned-row .wrong { color: var(--red); }

/* The felt: a table is a material, and a flat green ellipse is a shape.
   Lives here rather than in base.css because this sheet loads second and
   would otherwise quietly win the argument. */
.felt {
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, #24714f 0%, #17563b 45%, #0e3f2a 100%);
  box-shadow:
    inset 0 2px 30px rgba(0, 0, 0, 0.35),
    inset 0 -18px 40px rgba(0, 0, 0, 0.25);
}