/* PokerThangs web-app v2 — graphite & chip red */

.app-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px 90px; }

/* App header & tabs */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 12, 16, 0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.app-header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 62px;
}
.tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 999px;
  padding: 4px;
}
.tab-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-2);
  font: 600 14px var(--font-body);
  letter-spacing: -0.01em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-control);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--bg);
  background: linear-gradient(180deg, var(--red-hot), var(--red));
  box-shadow: 0 4px 14px var(--red-glow);
}

.tab-panel { display: none; padding-top: 30px; }
.tab-panel.active { display: block; }

.app-title { font-size: clamp(24px, 3vw, 32px); margin: 0 0 6px; }
.app-sub { color: var(--text-2); margin: 0 0 24px; max-width: 70ch; }

/* ---------- Trainer: layout ----------
   One third table, two thirds content, with the table sticky so it stays in
   view while the frameworks scroll. The decision lives in a bar docked to the
   bottom of the viewport, so it is reachable from anywhere in the hand. */
.trainer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.trainer-stage-col { min-width: 0; }
.trainer-main-col { min-width: 0; }

/* ---------- Trainer: the table ---------- */
/* --plate is the seat nameplate width. Every collision-sensitive number in the
   ring geometry is derived from it, so the narrow column shrinks one value. */
.table-stage { --plate: 140px; position: relative; padding: 16px; }
.stage-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 6px 14px;
}
.stage-label {
  font: 700 10.5px var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.view-tabs {
  margin-left: auto;
  display: flex;
  gap: 4px;
  background: var(--bg-raise);
  border: 1px solid var(--line-control);
  border-radius: 999px;
  padding: 4px;
}
.view-tab {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-2);
  font: 600 12.5px var(--font-body);
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-control);
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
}
.view-tab:hover { color: var(--text); }
.view-tab.active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-control); }

.table-felt {
  position: relative;
  height: 560px;
  border-radius: 280px;
  background: radial-gradient(60% 90% at 50% 32%, #1d2130, var(--surface) 74%, #101219);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 -6px 32px rgba(255, 70, 85, 0.04), var(--shadow-soft);
}
/* Reads view trades card backs for two paragraphs per seat, so the ring needs
   more vertical room to keep the same clearances. */
.table-felt.v-reads { height: 620px; border-radius: 310px; }
.table-felt.v-reads::before { border-radius: 296px; }
.table-felt::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 266px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

/* Odds view rail. It sits under the felt, not on it, so the ring keeps every
   pixel of its geometry and the pills can wrap at any width. */
.odds-rail {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 2px;
}
.odds-rail:not(:empty) { margin-top: 12px; }
.fact-pill {
  font: 600 12.5px var(--font-mono);
  color: var(--text-2);
  background: rgba(16, 18, 25, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}
.fact-pill b { color: var(--text); }
.fact-pill.hot { color: var(--red-hot); border-color: var(--red-line); background: rgba(255, 70, 85, 0.14); }
.board-empty {
  font: 600 13px var(--font-mono);
  letter-spacing: 0.3em;
  color: var(--text-3);
}
.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: var(--plate);
  z-index: 1;
}
.seat .hole { display: flex; gap: 3px; margin-bottom: -11px; }
.seat.hero-seat .hole { margin-bottom: -7px; }
.seat .hole .pcard { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55); width: 30px; height: 42px; border-radius: 6px; }
.seat.hero-seat .hole .pcard { width: 40px; height: 55px; border-radius: 7px; }
.seat.hero-seat .hole .pcard .rank { font-size: 23px; }
.seat.hero-seat .hole .pcard .suit { font-size: 11px; }
.seat .nameplate {
  position: relative;
  z-index: 1;
  width: 100%;
  background: rgba(16, 18, 25, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 7px 10px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.seat .nameplate > span { display: block; }
.seat .nameplate .who { font-weight: 700; font-size: 13.5px; color: var(--text); }
.seat .nameplate .who .pos { color: var(--red-hot); font-family: var(--font-mono); font-size: 11px; margin-left: 5px; }
.seat .nameplate .who .pos.solo { margin-left: 0; }
.seat .nameplate .prof { font-size: 11px; color: var(--text-3); }
.seat .nameplate .stackline { font-family: var(--font-mono); font-size: 13px; color: var(--text); font-weight: 600; }
.seat .nameplate .stackline small { font: 500 10px var(--font-body); color: var(--text-3); }
.seat .nameplate .betline {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-top: 3px;
}
.seat .nameplate .betline b { font: 700 11px var(--font-mono); color: var(--red-hot); }
/* The per-villain effective stack only fits where a seat can be a full-width
   row, so on the ring it stays hidden. Framework 8 carries the same arithmetic
   in prose for every villain in the hand. */
.seat .nameplate .eff { display: none; font-size: 10.5px; color: var(--text-3); }
.seat .nameplate .eff b { color: var(--text-2); font-family: var(--font-mono); }
.seat .nameplate .vstate { font: 600 10.5px var(--font-body); letter-spacing: 0.06em; color: var(--text-3); text-transform: uppercase; }
.seat .read-line { font-size: 10.5px; color: var(--text-3); font-style: italic; margin-top: 2px; }
/* Reads view writes two paragraphs of character into every plate. Clamped, a
   seat has a predictable height and the ring spacing holds at any width. */
.seat .nameplate .prof,
.seat .read-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seat .nameplate .prof { -webkit-line-clamp: 2; line-clamp: 2; }
.seat .read-line { -webkit-line-clamp: 3; line-clamp: 3; }
.seat .aggro {
  display: inline-block;
  font: 700 9px var(--font-body);
  letter-spacing: 0.14em;
  color: var(--red-hot);
  background: var(--red-tint);
  border: 1px solid var(--red-line);
  border-radius: 999px;
  padding: 1.5px 7px;
  margin-top: 3px;
}
.seat.hero-seat .nameplate { border-color: var(--red-line); box-shadow: 0 0 28px rgba(255, 70, 85, 0.22), 0 6px 18px rgba(0, 0, 0, 0.4); }

/* De-emphasise folded seats with saturation, not opacity. Opacity 0.4 dropped
   the nameplate text to 3.56:1; desaturating leaves it at 16.74:1. */
.seat.folded { filter: saturate(0.12); }
/* An unnamed seat is a small, quiet marker: the position label is the point.
   Colours stay above 4.5:1 (--text-2 is 8.4:1 and --text-3 is 6.3:1 on
   --bg-raise), so nothing here relies on transparency to recede. */
.seat.vacant { width: auto; }
.seat.vacant .nameplate {
  width: auto;
  min-width: 58px;
  padding: 4px 9px;
  background: var(--bg-raise);
  border: 1px dashed var(--line-strong);
  box-shadow: none;
}
.seat.vacant .nameplate .who .pos { color: var(--text-2); font-size: 12px; font-weight: 700; }
.seat.vacant .hole .pcard { filter: saturate(0.1) brightness(0.72); }
.seat.v-empty .nameplate { border-style: dotted; }
.seat.v-empty .nameplate .who .pos { color: var(--text-3); }

/* ALL-IN sits inside the nameplate so it can never look like a replacement for
   the hole cards. An all-in player still holds cards, and they still render. */
.seat .nameplate .badge {
  display: inline-block;
  font: 700 10px var(--font-body);
  letter-spacing: 0.12em;
  color: var(--bg);
  background: linear-gradient(180deg, var(--red-hot), var(--red));
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 0 3px;
  box-shadow: 0 4px 12px var(--red-glow);
}
.seat.allin .nameplate { border-color: var(--red-line); }

/* Board and pot live in the centre column of the ring. Both are width-bounded
   so nine seats can be placed against the rim without either one growing into
   them as the felt narrows. */
.board-area {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 5px;
  align-items: center;
}
/* The board runs a size down from the hero's own cards so the centre column
   stays clear of the seats pinned to the rim. */
.board-area .pcard { width: 40px; height: 56px; border-radius: 7px; }
.board-area .pcard .rank { font-size: 22px; }
.board-area .pcard .suit { font-size: 11px; }
.pot-area {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 180px;
  text-align: center;
  white-space: normal;
}
.pot-area .label { font: 600 10px var(--font-body); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-3); }
.pot-area .amount { font: 700 24px var(--font-mono); color: var(--text); letter-spacing: -0.02em; }
.pot-area .facing { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.pot-area .facing b { color: var(--red-hot); font-family: var(--font-mono); }

/* Scenario header row */
.scenario-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 16px; }
.scenario-bar h2 { margin: 0; font-size: 25px; flex: 0 1 auto; }
.scenario-bar .tagline { color: var(--text-2); font-size: 14.5px; flex: 1 1 240px; }
.scenario-bar .stakes { font: 600 12px var(--font-mono); color: var(--text-3); margin-left: auto; }
.scenario-jump { display: flex; gap: 8px; }
.scenario-jump .btn { padding: 7px 15px; font-size: 12.5px; }

/* Action history, collapsed by default. It is reference, not the question. */
.history { padding: 0; overflow: hidden; }
.hist-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: var(--font-body);
}
.hist-toggle:hover { background: rgba(255, 255, 255, 0.02); }
.hist-label { font: 700 12px var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.hist-hint { margin-left: auto; font: 700 11px var(--font-mono); letter-spacing: 0.06em; color: var(--red-hot); }
.history .fw-chev { color: var(--red); transition: transform 0.2s; font-size: 12px; flex: 0 0 auto; }
.history.open .fw-chev { transform: rotate(90deg); }
.hist-body { display: none; padding: 0 22px 18px; }
.history.open .hist-body { display: block; }
.history .street { margin: 12px 0 4px; }
.history .street-name {
  display: inline-block;
  font: 700 10.5px var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-hot);
  background: var(--red-tint);
  border: 1px solid var(--red-line);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.history ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14.5px; }
.history li { margin: 4px 0; }
.history li b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag-pill {
  font: 700 11.5px var(--font-body);
  letter-spacing: 0.08em;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 5px 13px;
}
.tag-note { font-size: 13.5px; color: var(--text-2); margin-top: 10px; }

/* Framework cards. Locked until the user commits: several bodies name the
   correct answer outright, so an open card turns the hand into a reading test. */
.fw-section { margin-top: 20px; }
.fw-section .app-title { margin-top: 6px; font-size: 22px; }
.fw-section .app-sub { margin-bottom: 14px; font-size: 14.5px; }
.fw-lock {
  padding: 24px 26px;
  border-color: var(--red-line);
  background: linear-gradient(180deg, rgba(255, 70, 85, 0.07), var(--surface));
}
.fw-lock h3 { font-size: 21px; margin: 6px 0 8px; }
.fw-lock p { color: var(--text-2); margin: 0 0 16px; font-size: 14.5px; }
.fw-lock-eyebrow {
  display: block;
  font: 700 10.5px var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-hot);
}
.fw-lock .btn { padding: 10px 18px; font-size: 13px; }

.fw-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.fw-card { overflow: hidden; transition: border-color 0.15s; }
.fw-card.open { border-color: var(--line-strong); }
.fw-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.fw-head:hover { background: rgba(255, 255, 255, 0.02); }
.fw-num {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 13px var(--font-mono);
  color: var(--red-hot);
  background: var(--red-tint);
  border: 1px solid var(--red-line);
}
.fw-title { font: 700 16.5px var(--font-display); letter-spacing: -0.01em; }
.fw-stat { margin-left: auto; font: 600 12px var(--font-mono); color: var(--text-3); text-align: right; max-width: 42%; }
.fw-chev { color: var(--red); transition: transform 0.2s; font-size: 12px; }
.fw-card.open .fw-chev { transform: rotate(90deg); }
.fw-body { display: none; padding: 2px 20px 20px 64px; color: var(--text-2); font-size: 15px; line-height: 1.7; }
.fw-body b { color: var(--text); }
.fw-card.open .fw-body { display: block; }
.fw-body .eff-block {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--red);
  background: var(--red-tint);
  border-radius: 0 12px 12px 0;
}
.fw-body .eff-block .eff-title {
  font: 700 11px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-hot);
  display: block;
  margin-bottom: 5px;
}
.fw-controls { display: flex; gap: 10px; margin-top: 14px; }
.fw-controls .btn { padding: 9px 18px; font-size: 13px; }

/* Decision dock, sticky to the bottom of the viewport, so the question and the
   three buttons are reachable from anywhere in the hand instead of sitting
   under a wall of framework text. */
.decision-dock {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin: 22px -20px 0;
  padding: 13px 20px 15px;
  background: rgba(11, 12, 16, 0.93);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--red-line);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.55);
}
.dock-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dock-q { flex: 1 1 300px; min-width: 0; }
.dock-label {
  display: block;
  font: 700 10px var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dock-prompt { margin: 2px 0 0; color: var(--text); font-size: 14.5px; line-height: 1.45; }
.dock-result { display: block; font: 700 17px var(--font-display); letter-spacing: -0.01em; margin-top: 2px; }
.dock-result.good { color: var(--green); }
.dock-result.bad { color: var(--red-hot); }
.dock-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.dock-opts .btn { min-width: 116px; padding: 11px 20px; font-size: 14px; }

.decision-feedback {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.65;
  display: none;
}
.decision-feedback.show { display: block; }
.decision-feedback.good { background: var(--green-tint); border: 1px solid var(--green-line); color: var(--text); }
.decision-feedback.bad { background: var(--red-tint); border: 1px solid var(--red-line); color: var(--text); }
.decision-feedback .fb-head {
  display: block;
  font: 700 17px var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.decision-feedback.good .fb-head { color: var(--green); }
.decision-feedback.bad .fb-head { color: var(--red-hot); }

/* Button row at the end of a run. The trainer's own next-hand buttons live in
   the dock now, but js/drills.js still ends a drill with this row. */
.trainer-next { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Drills ---------- */
.drill-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.drill-card {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-radius: var(--radius-lg);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-align: left;
  color: var(--text);
  font-family: var(--font-body);
}
.drill-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-deep); }
.drill-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
@supports not (aspect-ratio: 16 / 9) {
  .drill-card img { height: 200px; }
}
.drill-card .dc-body { padding: 15px 17px 17px; }
.drill-card h3 { margin: 0 0 4px; font-size: 17.5px; }
.drill-card p { margin: 0; font-size: 13px; color: var(--text-2); }
.drill-card .dc-icon {
  height: 120px;
  display: grid;
  place-items: center;
  font: 700 24px var(--font-mono);
  color: var(--red-hot);
  background:
    radial-gradient(320px 120px at 50% 130%, var(--red-tint), transparent 70%),
    var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.drill-stage { max-width: 780px; margin: 0 auto; }
.drill-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.drill-topbar h2 { margin: 0; font-size: 22px; }
.drill-topbar .score { margin-left: auto; font: 600 14px var(--font-mono); color: var(--text-2); }
.drill-topbar .btn { padding: 8px 16px; font-size: 12.5px; }

.timerbar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin-bottom: 16px; }
.timerbar .fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red)); transition: width 0.1s linear; }
.timerbar.hot .fill { background: linear-gradient(90deg, var(--red), var(--red-hot)); box-shadow: 0 0 12px var(--red-glow); }

.drill-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  display: block;
}
.drill-saw {
  margin: 14px 0 4px;
  padding: 11px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 0 12px 12px 0;
  color: var(--text-2);
  font-size: 14.5px;
  font-style: italic;
}
.drill-q { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; margin: 16px 0 12px; }

/* Mini felt: the animated table scene above math-drill questions. Same
   graphite-oval look as the Trainer felt, compacted, with the action script
   staggering in via --i step indexes and --mf-step timing. */
.mini-felt {
  position: relative;
  height: 340px;
  margin: 4px auto 14px;
  max-width: 640px;
  border-radius: 170px;
  background: radial-gradient(60% 90% at 50% 32%, #1d2130, var(--surface) 74%, #101219);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 14px 44px rgba(0, 0, 0, 0.45), inset 0 -5px 24px rgba(255, 70, 85, 0.04);
}
.mini-felt::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 160px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}
.mf-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 118px;
}
.mf-seat.vacant { opacity: 0.38; }
.mf-plate {
  background: rgba(10, 12, 18, 0.88);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 4px 8px;
  min-width: 40px;
}
.mf-seat.hero .mf-plate { border-color: var(--red-line); box-shadow: 0 0 0 1px var(--red-line), 0 4px 14px rgba(0, 0, 0, 0.4); }
.mf-plate > span { display: block; }
.mf-who { font: 700 11px var(--font-body); color: var(--text); }
.mf-who .mf-pos { display: inline; font: 700 9px var(--font-mono); color: var(--red-hot); margin-left: 4px; }
.mf-plate .mf-pos { font: 700 9.5px var(--font-mono); color: var(--text-3); letter-spacing: 0.04em; }
.mf-tag { font: 600 9px var(--font-body); color: var(--text-3); max-width: 110px; }
.mf-hole { display: flex; gap: 2px; margin-bottom: -6px; }
.mf-hole .pcard { width: 22px; height: 31px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.mf-hole .pcard .rank { font-size: 12px; }
.mf-hole .pcard .suit { font-size: 7px; }

/* Action pills: invisible until their step, then they land. */
.mf-pill {
  margin-top: 3px;
  font: 700 10px var(--font-mono);
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  opacity: 0;
  animation: mfIn 0.3s ease-out both;
  animation-delay: calc(var(--i, 0) * var(--mf-step, 380ms) + 220ms);
}
.mf-pill.k-bet, .mf-pill.k-raise, .mf-pill.k-jam, .mf-pill.k-open { border-color: var(--red-line); color: var(--red-hot); }
.mf-pill.ghost { border-style: dashed; border-color: var(--red); color: var(--red-hot); background: var(--red-tint); }
.mf-pill.fold { color: var(--text-3); background: none; }
@keyframes mfIn {
  from { opacity: 0; transform: translateY(7px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
.mf-seat.will-fold { animation: mfFold 0.35s ease-out both; animation-delay: calc(var(--fold-i, 0) * var(--mf-step, 380ms) + 220ms); }
@keyframes mfFold { to { opacity: 0.34; filter: grayscale(0.7); } }

.mf-board {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
}
.mf-board .pcard { width: 26px; height: 36px; border-radius: 4px; }
.mf-street { font: 700 10px var(--font-body); letter-spacing: 0.18em; color: var(--text-3); margin-left: 6px; }
.mf-pot {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.mf-pot .mf-label { display: block; font: 600 9.5px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.mf-pot .mf-amount { font: 700 21px var(--font-mono); color: var(--red-hot); letter-spacing: -0.02em; }
/* The board and pot are centered by a translate the entrance animation must
   PRESERVE: fill-mode both + "transform: none" would pin them to their
   top-left corner and shove both blocks down-right forever. */
.mf-in { opacity: 0; animation: mfInC 0.3s ease-out both; animation-delay: calc(var(--i, 0) * var(--mf-step, 380ms) + 220ms); }
@keyframes mfInC {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 7px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 560px) {
  .mini-felt { height: 300px; }
  .mf-seat { max-width: 88px; }
  .mf-tag { display: none; }
  .mf-who { font-size: 9.5px; }
  .mf-plate { padding: 3px 5px; }
  .mf-pill { font-size: 8px; padding: 1px 5px; margin-top: 2px; }
  .mf-hole .pcard { width: 18px; height: 25px; }
}
/* The global reduced-motion rule shortens durations but leaves delays alone,
   which would keep every pill invisible for the length of the script. Kill
   the choreography entirely instead: everything simply appears. */
@media (prefers-reduced-motion: reduce) {
  .mf-pill, .mf-in, .mf-seat.will-fold { animation-delay: 0s !important; }
}

/* Range Reading: the 13x13 hand grid. Suited above the diagonal, offsuit
   below, pairs on it; in-range cells fill chip-red. Sized so all 169 cells
   stay on screen on a phone. */
.range-grid-wrap { margin: 6px 0 4px; }
.range-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  max-width: 560px;
  margin: 0 auto;
}
.rg-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 8.5px var(--font-mono);
  letter-spacing: -0.03em;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.rg-cell.rg-p { background: var(--surface-2); }
/* Engines without aspect-ratio would collapse every cell to its text line;
   keep the squares roughly square there. */
@supports not (aspect-ratio: 1) {
  .rg-cell { padding: 42% 0; box-sizing: border-box; }
}
.rg-cell.on {
  background: var(--red-deep);
  border-color: var(--red);
  color: #fff;
}
.rg-legend {
  margin: 8px 0 0;
  text-align: center;
  font: 600 11px var(--font-body);
  letter-spacing: 0.05em;
  color: var(--text-3);
}
@media (max-width: 480px) {
  .range-grid { gap: 1px; }
  .rg-cell { font-size: 6.5px; border-radius: 3px; }
}
.drill-pot-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font: 700 16px var(--font-mono);
  margin: 10px 0 6px;
}
.drill-pot-parts .part {
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 5px 11px;
  color: var(--text);
  line-height: 1.25;
}
.drill-pot-parts .part small { display: block; font: 500 10px var(--font-body); color: var(--text-3); }
.drill-pot-parts .part.total { color: var(--red-hot); }
.drill-pot-parts .plus { color: var(--red); }
.drill-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.opt-btn {
  appearance: none;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid var(--line-control);
  background: var(--surface-2);
  color: var(--text);
  font: 600 15.5px var(--font-body);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.opt-btn:hover { border-color: var(--red-line); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.opt-btn.correct { border-color: var(--green-line); background: var(--green-tint); }
.opt-btn.wrong { border-color: var(--red-line); background: var(--red-tint); }
.opt-btn:disabled { cursor: default; }
.drill-teach {
  display: none;
  margin-top: 14px;
  padding: 17px 19px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.7;
}
.drill-teach.show { display: block; }
.drill-teach .verdict { font: 700 16px var(--font-display); display: block; letter-spacing: -0.01em; }
.drill-teach .verdict.good { color: var(--green); }
.drill-teach .verdict.bad { color: var(--red-hot); }
.drill-next { margin-top: 14px; }

/* The verdict and the "press Enter" affordance share the first line of the
   graded state, which is the line the teach block opens with directly under the
   options you just clicked. The Next button is a long way down past the whole
   explanation, so the keyboard shortcut has to be visible up here or nobody
   will ever learn it exists. */
.verdict-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
}
.next-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  font: 600 12px var(--font-body);
  color: var(--text-2);
  white-space: nowrap;
}
.next-hint kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 7px 3px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--surface-2), var(--bg-raise));
  border: 1px solid var(--line-control);
  border-bottom-width: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font: 700 11px/1.25 var(--font-mono);
  color: var(--text);
  text-align: center;
}

/* ---------- Chip Counting scene ----------
   The felt is a fixed-pixel 2.5D projection built by js/chipdrill.js, so it is
   crisp at any density and identical at 390px and 1440px. The only thing this
   block owns is how it sits in the stage: the picture and the seat map share a
   row on a wide screen and stack on a phone, and the felt keeps its own
   scrollbar so a wide formation can never push the page sideways.
   Nothing here animates, so there is nothing for prefers-reduced-motion to
   turn off. */
.drill-chipscene {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 14px 0 4px;
}
.chipscene-map { flex: 0 1 230px; min-width: 170px; }
.chipscene-felt { flex: 0 1 auto; max-width: 100%; overflow-x: auto; }
.chipscene-reveal { max-width: 100%; }

/* ---------- The exploded reveal ----------
   Every card is one group of the arrangement and is only as wide and as tall as
   the chips it holds, so they pack across the row. The old reveal was four
   full-width blocks stacked vertically, each one a short row of chips floating
   in a wide empty panel, and reading the answer meant scrolling past all of it.
   Nothing was removed to shorten it: the base, the tier, the loose and side
   groups, the per-stack labels, the HIDDEN rings and the per-group subtotals
   are all still here, just laid out sideways instead of downwards. */
.reveal-lede {
  margin: 12px 0 6px;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.reveal-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.reveal-card {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 7px 9px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.reveal-card-head {
  margin: 0 0 5px;
  font: 700 9.5px var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.reveal-card-head span { color: var(--red-hot); }
.reveal-plan svg { margin-top: 2px; }

/* The reveal is a static exploded diagram, not the projected felt, so unlike
   js/chipdrill.js's scene it does NOT pin its disc size in pixels: the one knob
   lives here and shrinks on a phone, where ten barrels wrapping across a 326px
   column is what the scroll height is actually made of. --chip-face and
   --chip-step follow from --chip-w in css/tokens.css, so the artwork stays
   square with the box at every size. */
.reveal-card .rv-row {
  --chip-w: 32px;
  --chip-num: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
}
.rv-cell { border-radius: 9px; padding: 4px 2px 4px; flex: 0 0 auto; text-align: center; }
/* --tall is the tallest chip COUNT in this card, set per card by chipdrill.js. */
.rv-cell .rv-stack {
  position: relative;
  margin: 0 auto;
  width: calc(var(--chip-w) + 8px);
  height: calc(var(--chip-face) + var(--tall, 1) * var(--chip-step) + 3px);
}
.rv-cell .rv-mix { font: 600 9.5px/1.3 var(--font-mono); color: var(--text-3); margin-top: 4px; }
.rv-cell .rv-val { font: 700 11px/1.25 var(--font-mono); color: var(--text); }
.rv-cell .rv-mix.gone, .rv-cell .rv-val.gone { color: var(--red-hot); }
.rv-cell .rv-gone {
  font: 700 8.5px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--red-hot);
}

@media (max-width: 620px) {
  .drill-chipscene { gap: 12px; }
  .chipscene-map { flex: 1 1 100%; max-width: 230px; }
  /* On a phone the cards are the full column anyway, so spend the width on
     chips rather than on four sets of card padding, and draw the discs a size
     down: a card of ten barrels at 32px wraps to two rows of 124px stacks, and
     that alone was a third of the scroll. */
  .reveal-grid { gap: 6px; }
  .reveal-card { padding: 6px 7px 7px; }
  .reveal-card .rv-row { --chip-w: 24px; --chip-num: 8px; }
  .reveal-card-head { font-size: 9px; letter-spacing: 0.06em; }
}

.drill-done { text-align: center; padding: 44px 20px; }
.drill-done .big { font: 700 56px var(--font-display); letter-spacing: -0.03em; color: var(--text); }
.drill-done .big small { color: var(--text-3); }
.drill-done p { color: var(--text-2); }

/* ---------- Progress ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat-tile { padding: 20px 22px; }
.stat-tile .k { font: 600 11px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.stat-tile .v { font: 700 36px var(--font-display); letter-spacing: -0.03em; color: var(--text); }
.stat-tile .v small { font-size: 16px; color: var(--text-3); font-weight: 500; }
.stat-tile .d { font-size: 12.5px; color: var(--text-2); }

.prog-section { margin-top: 24px; }
.prog-section h3 { font-size: 19px; margin-bottom: 14px; }
.acc-row { display: grid; grid-template-columns: 170px 1fr 175px; gap: 14px; align-items: center; margin: 12px 0; }
.acc-row .name { font-size: 14px; color: var(--text); font-weight: 600; }
.acc-row .name small { display: block; color: var(--text-3); font-weight: 400; font-size: 11.5px; }
.acc-track { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.acc-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--red-deep), var(--red)); min-width: 2px; transition: width 0.5s ease; }
.acc-val { font: 600 13px var(--font-mono); color: var(--text-2); text-align: right; }
.prog-empty { color: var(--text-3); font-size: 14px; padding: 8px 0 2px; }
.prog-clear { margin-top: 30px; }
.grade-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-chip {
  font: 700 13.5px var(--font-mono);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: var(--surface-2);
}
.grade-chip.a { border-color: var(--green-line); color: var(--green); background: var(--green-tint); }
.grade-chip.low { border-color: var(--red-line); color: var(--red-hot); background: var(--red-tint); }

/* ---------- Reference ---------- */
.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ref-card { padding: 22px 24px; }
.ref-card h3 { font-size: 18px; margin-bottom: 8px; }
.ref-card p, .ref-card li { color: var(--text-2); font-size: 14.5px; }
.ref-card ul { padding-left: 18px; margin: 8px 0; }
.ref-card li { margin: 6px 0; }
.ref-card li b { color: var(--text); }
.ref-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.ref-table th, .ref-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.ref-table th { color: var(--text-3); font: 700 11px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.ref-table td { color: var(--text-2); font: 500 13.5px var(--font-mono); }
.ref-table td:first-child { font-family: var(--font-body); color: var(--text); }
.ref-table tr:last-child td { border-bottom: none; }

/* ---------- Desktop: one third table, two thirds content ----------
   Adam's call. The stage sticks so the hand stays in view while the frameworks
   scroll past it, and the felt drops to a compact ring: the seat coordinates
   are percentages, so the same nine slots serve a 340px column and an 800px
   felt. Only the plate width, the board size and the pot block change. */
@media (min-width: 881px) {
  .trainer-layout {
    grid-template-columns: minmax(380px, 36%) minmax(0, 1fr);
    gap: 24px;
  }
  .trainer-stage-col { position: sticky; top: 74px; align-self: start; }

  .table-stage { --plate: 104px; padding: 10px; }
  .table-felt { height: 470px; border-radius: 50%; }
  .table-felt::before { inset: 9px; border-radius: 50%; }

  .stage-head { padding: 0 2px 10px; gap: 8px; }
  .stage-label { font-size: 9.5px; letter-spacing: 0.14em; }
  .view-tab { padding: 5px 11px; font-size: 11.5px; }

  .seat .nameplate { padding: 4px 6px; border-radius: 9px; line-height: 1.28; }
  .seat .nameplate .who { font-size: 11px; }
  .seat .nameplate .who .pos { display: block; margin-left: 0; font-size: 9.5px; }
  .seat .nameplate .stackline { font-size: 11px; }
  .seat .nameplate .stackline small { display: none; }
  .seat .nameplate .betline b { font-size: 9.5px; }
  /* The chips are the product. Hiding them to buy column width defeats the
     point of the drill this app is built around, so they stay and run one
     size down instead. */
  .seat .nameplate .betline .chipset {
    display: inline-flex;
    /* --chip-w is the only geometry knob: tokens.css derives the face and the
       step from it so the SVG viewBox is never stretched. */
    --chip-w: 19px; --chip-gap: 3px; --chip-num: 7px;
    margin-top: 2px;
  }
  .seat .nameplate .vstate { font-size: 8.5px; letter-spacing: 0.04em; }
  .seat .nameplate .badge { font-size: 8px; padding: 1px 7px; letter-spacing: 0.08em; }
  .seat .aggro { font-size: 7.5px; padding: 1px 5px; }
  /* In a view that is entirely about people, two identical card backs were
     never carrying information, so the plates get that height instead. */
  .seat .nameplate .prof,
  .seat .read-line { font-size: 9px; line-height: 1.25; }
  .table-felt.v-reads { height: 520px; }
  .table-felt.v-reads .seat .hole { display: none; }
  .seat.vacant .nameplate { min-width: 46px; padding: 3px 7px; }
  .seat.vacant .nameplate .who .pos { font-size: 10.5px; }

  .seat .hole { gap: 2px; margin-bottom: -9px; }
  .seat .hole .pcard { width: 24px; height: 33px; border-radius: 5px; }
  .seat.hero-seat .hole { margin-bottom: -6px; }
  .seat.hero-seat .hole .pcard { width: 32px; height: 44px; border-radius: 6px; }
  .seat.hero-seat .hole .pcard .rank { font-size: 18px; }
  .seat.hero-seat .hole .pcard .suit { font-size: 9px; }

  .board-area { gap: 3px; }
  .board-area .pcard { width: 22px; height: 31px; border-radius: 4px; }
  .board-area .pcard .rank { font-size: 13px; }
  .board-area .pcard .suit { font-size: 7px; }

  .pot-area { width: 142px; }
  .pot-area .label { font-size: 8px; letter-spacing: 0.14em; }
  .pot-area .amount { font-size: 17px; }
  .pot-area .facing { font-size: 9.5px; line-height: 1.3; }
  .pot-area .chipset { --chip-w: 23px; --chip-gap: 4px; --chip-num: 8px; }

  .fact-pill { font-size: 11px; padding: 5px 10px; white-space: normal; }
}

/* A short viewport cannot hold a 500px sticky column plus the header, so the
   stage goes back to scrolling with the page. */
@media (min-width: 881px) and (max-height: 660px) {
  .trainer-stage-col { position: static; }
}

/* Small tablets and big phones still get the ring, on a felt only about 500px
   across, so the plates come in to keep the rim clear of the centre. */
@media (max-width: 660px) {
  .table-stage { --plate: 124px; }
}

/* Single column but still roomy: the board can run full size. */
@media (min-width: 700px) and (max-width: 880px) {
  .board-area { gap: 7px; }
  .board-area .pcard { width: 56px; height: 78px; border-radius: 10px; }
  .board-area .pcard .rank { font-size: 33px; }
  .board-area .pcard .suit { font-size: 15px; }
}

@media (max-width: 880px) {
  .ref-grid { grid-template-columns: 1fr; }
  /* The stat ("Call $40 to win $100, need 28.6%") is the densest thing on the
     card, so it reflows onto its own line instead of being hidden. Source order
     is num, title, stat, chev, so the chevron is re-ordered back onto line one. */
  .fw-head { flex-wrap: wrap; row-gap: 6px; }
  .fw-num { order: 1; }
  .fw-title { order: 2; }
  .fw-chev { order: 3; margin-left: auto; }
  .fw-stat {
    order: 4;
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
    padding-left: 46px;
    text-align: left;
  }
  .fw-body { padding-left: 20px; }
  .acc-row { grid-template-columns: 110px 1fr 120px; }
  .app-header-inner { flex-wrap: wrap; height: auto; padding: 10px 20px 12px; }
  .tabs { margin-left: 0; width: 100%; justify-content: space-between; }
  .tab-btn { padding: 8px 12px; font-size: 13px; }
}

/* ---------- Phones: the felt stops being a racetrack ----------
   The seat coordinates are percentages of an ellipse. Below 560px the felt is
   narrower than two nameplates side by side, so absolute seating always
   collides. Everything becomes ordinary flow instead: the ring reads top to
   bottom in clockwise order from the hero's left, so the geometry lesson
   survives as an ordering lesson. This must stay AFTER the 880px block so it
   wins the cascade. */
@media (max-width: 560px) {
  .table-stage { padding: 10px; }
  .stage-head { flex-wrap: wrap; gap: 10px; padding: 0 2px 10px; }
  .view-tabs { margin-left: auto; }

  /* .table-felt.v-reads pins a fixed ring height and outranks a single-class
     rule on specificity, so the stacked layout has to unpin it by name. */
  .table-felt,
  .table-felt.v-reads {
    height: auto;
    min-height: 0;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
  }
  .table-felt::before,
  .table-felt.v-reads::before { inset: 5px; border-radius: 16px; }

  /* Every seat becomes a full-width row: cards left, nameplate right. */
  .seat {
    position: static;
    transform: none;
    order: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    text-align: left;
  }
  /* A 90px gutter so hole cards and the hero's cards line up down the left
     edge. Folded seats render no cards, so they start at the edge, which reads
     as "out of the hand". */
  .seat .hole { margin-bottom: 0; flex: 0 0 auto; min-width: 90px; justify-content: center; }
  .seat .hole .pcard { width: 34px; height: 47px; border-radius: 6px; }
  .seat.hero-seat .hole { margin-bottom: 0; }
  .seat.hero-seat .hole .pcard { width: 42px; height: 58px; border-radius: 7px; }
  .seat.hero-seat .hole .pcard .rank { font-size: 24px; }
  .seat.hero-seat .hole .pcard .suit { font-size: 11px; }
  .seat .nameplate {
    max-width: none;
    width: 100%;
    min-width: 0;
    padding: 5px 10px;
    text-align: left;
    box-shadow: none;
    line-height: 1.3;
  }
  .seat .nameplate .betline { justify-content: flex-start; }
  /* A full-width row has room for the whole read and the effective stack. */
  .seat .nameplate .eff { display: block; }
  .seat .nameplate .prof,
  .seat .read-line { -webkit-line-clamp: none; line-clamp: none; display: block; }
  .seat .read-line { font-style: italic; }

  /* Empty and folded seats collapse to a single quiet line so eight of them do
     not push the hero off the screen. */
  .seat.vacant { gap: 0; }
  .seat.vacant .hole { min-width: 90px; }
  .seat.vacant .nameplate {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 3px 10px;
  }
  .seat.vacant .nameplate > span { display: block; }

  /* Hero drops to the bottom, under the board and pot. */
  .seat.hero-seat { order: 5; }

  .board-area {
    position: static;
    transform: none;
    order: 2;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 4px 0;
  }
  /* Five 56px cards do not fit a 390px phone, so the board uses the md size. */
  .board-area .pcard { width: 48px; height: 66px; border-radius: 8px; }
  .board-area .pcard .rank { font-size: 27px; }
  .board-area .pcard .suit { font-size: 12px; }

  .pot-area {
    position: static;
    transform: none;
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: auto;
    white-space: normal;
    gap: 4px 10px;
  }
  .pot-area .amount { font-size: 22px; }

  .scenario-bar h2 { font-size: 21px; }
  .scenario-bar .stakes { margin-left: 0; }
  .dock-prompt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
  }
  .dock-opts { width: 100%; }
  .dock-opts .btn { flex: 1 1 auto; min-width: 0; padding: 11px 12px; font-size: 13.5px; }
  .decision-dock { padding: 11px 16px 13px; margin: 18px -20px 0; }
}

/* Touch targets. Every app control keeps its compact mouse metrics, but a
   finger gets the 44px floor (.btn gets the same floor in tokens.css). */
@media (pointer: coarse) {
  .tab-btn, .drill-jump-btn, .hist-toggle, .view-tab { min-height: 44px; }
}