/* v21 · the table.
 *
 * Identity: a dealer's training table, not a casino floor. Deep pine felt, a
 * brass rail, bone cards with real printed faces. Nothing flashes, nothing
 * jackpots, nothing sells you anything — the only thing competing for attention
 * is the coach line, because that is the part of this game that is actually the
 * game. Phone-first: one column, thumb-reachable controls, 44px targets.
 */

:root {
  /* felt */
  --felt:        oklch(27% 0.048 158);
  --felt-deep:   oklch(18% 0.034 160);
  --felt-lit:    oklch(33% 0.058 156);
  --felt-line:   oklch(40% 0.050 156 / .34);

  /* brass and bone */
  --brass:       oklch(80% 0.118 88);
  --brass-deep:  oklch(58% 0.100 80);
  --bone:        oklch(95% 0.014 92);
  --bone-dim:    oklch(95% 0.014 92 / .62);
  --bone-faint:  oklch(95% 0.014 92 / .34);

  /* cards */
  --card-paper:  #F6F2E7;
  --card-panel:  #EFE8D6;
  --card-tint:   #D9CFB4;
  --card-edge:   #CFC5AB;
  --card-red:    #B03426;
  --card-black:  #1A211E;
  --back-ground: #17392C;
  --back-line:   oklch(58% 0.085 158 / .55);
  --back-rule:   var(--brass);

  /* the chart */
  --k-hit:       oklch(62% 0.140 150);
  --k-stand:     oklch(60% 0.165 32);
  --k-double:    oklch(62% 0.140 240);
  --k-split:     oklch(60% 0.150 305);
  --k-surrender: oklch(52% 0.020 250);

  /* verdicts */
  --good:        oklch(72% 0.150 150);
  --bad:         oklch(66% 0.180 25);
  --even:        var(--brass);

  --font-game:   "Fraunces", ui-serif, Georgia, serif;
  --font-ui:     "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --vh: 100vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--felt-deep);
  color: var(--bone);
  font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  /* The felt: a lit pool in the middle, falling off to the rail. */
  background:
    radial-gradient(120% 80% at 50% 34%, var(--felt-lit), transparent 62%),
    radial-gradient(140% 100% at 50% 50%, var(--felt), var(--felt-deep) 78%);
  background-attachment: fixed;
}

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

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }

/* ── screens ──────────────────────────────────────────────────────────────── */

.screen { display: none; }
body[data-screen='title'] #s-title { display: grid; }
body[data-screen='table'] #s-table { display: grid; }

/* ── the title ────────────────────────────────────────────────────────────── */

.screen--title {
  min-height: 100dvh;
  place-items: center;
  padding: clamp(20px, 6vw, 48px);
}
.title-inner { max-width: 34rem; text-align: center; }

.eyebrow {
  margin: 0 0 18px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}

.wordmark {
  margin: 0;
  font-family: var(--font-game);
  font-size: clamp(6rem, 30vw, 11rem);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.04em;
  color: var(--bone);
  position: relative;
}
/* A brass rule through the numerals, like a chip inlay. */
.wordmark span {
  background: linear-gradient(180deg, var(--bone) 46%, var(--brass) 46%, var(--brass) 54%, var(--bone) 54%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 10px 0 0;
  font-family: var(--font-game);
  font-size: clamp(1.1rem, 4.4vw, 1.45rem);
  font-weight: 500;
  color: var(--bone);
}
.blurb {
  margin: 18px auto 0;
  max-width: 30rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--bone-dim);
}

.title-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin: 30px 0 0;
}

.title-facts {
  margin: 34px 0 0; padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid var(--felt-line);
  display: grid; gap: 10px;
  text-align: left;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--bone-dim);
}
.title-facts b { color: var(--bone); font-weight: 600; }

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--brass);
  --btn-fg: #16241C;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  min-height: 46px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform var(--ease) 140ms, filter 140ms, opacity 140ms;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .3; cursor: default; }

.btn--big { padding: 16px 34px; font-size: 1.02rem; min-height: 54px; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--bone);
  box-shadow: inset 0 0 0 1.5px var(--felt-line);
}
.btn--quiet {
  --btn-bg: oklch(38% 0.030 158); --btn-fg: var(--bone);
}

.icon-btn {
  appearance: none; border: 0; background: none;
  width: 40px; height: 40px; padding: 8px;
  border-radius: 50%;
  color: var(--bone-dim);
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.icon-btn:hover { color: var(--bone); background: oklch(100% 0 0 / .07); }
.icon-btn svg { width: 100%; height: 100%; display: block; }

/* ── the table screen ─────────────────────────────────────────────────────── */

.screen--table {
  min-height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  max-width: 34rem;
  margin-inline: auto;
  width: 100%;
}

.rail {
  display: flex; align-items: center; gap: 6px;
  padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  border-bottom: 1px solid var(--felt-line);
  background: linear-gradient(180deg, oklch(0% 0 0 / .22), transparent);
}
.bank {
  margin: 0 0 0 2px;
  font-family: var(--font-game);
  font-size: 1.16rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
}
.accuracy {
  margin: 0 auto 0 10px;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--bone-faint);
  transition: color 300ms;
}
.accuracy[data-grade='high'] { color: var(--good); }
.accuracy[data-grade='mid']  { color: var(--brass); }
.accuracy[data-grade='low']  { color: var(--bad); }

/* ── the felt ─────────────────────────────────────────────────────────────── */

.felt {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 4px;
  padding: 14px 12px 6px;
  min-height: 0;
}

.seat { display: grid; justify-items: center; align-content: center; gap: 6px; }

.seat-label {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: clamp(84px, 24vw, 118px);
}
/* Cards overlap like a real hand, with the last one fully visible. */
.cards > .card + .card { margin-left: calc(var(--w) * -0.3); }

.total {
  margin: 0;
  font-family: var(--font-game);
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  min-height: 1.3em;
}
.total.is-bust { color: var(--bad); }

/* the strip between the two seats: the shoe, the arc, the count */
.strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-top: 1px solid var(--felt-line);
  border-bottom: 1px solid var(--felt-line);
}
.arc {
  margin: 0;
  text-align: center;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
/* The shoe empties as the cards come out — a real progress bar, not decoration. */
.shoe {
  --left: 1;
  width: 30px; height: 20px;
  border: 1.5px solid var(--bone-faint);
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  align-items: stretch;
}
.shoe i {
  display: block;
  height: 100%;
  width: calc(var(--left) * 100%);
  background: repeating-linear-gradient(90deg, var(--brass) 0 2px, transparent 2px 4px);
  transition: width 500ms var(--ease);
}
.count {
  margin: 0;
  display: flex; align-items: baseline; gap: 4px;
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bone-faint);
  font-variant-numeric: tabular-nums;
}
.count b { font-size: .84rem; color: var(--bone); font-weight: 600; }
.count[data-tone='good'] b { color: var(--good); }
.count[data-tone='bad'] b  { color: var(--bad); }

/* the result banner, floating over the felt */
.banner {
  position: absolute;
  inset-inline: 0;
  top: 46%;
  margin: 0;
  text-align: center;
  font-family: var(--font-game);
  font-size: clamp(1.3rem, 6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bone);
  text-shadow: 0 2px 18px oklch(0% 0 0 / .5);
  pointer-events: none;
  opacity: 0;
  transform: scale(.94);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  z-index: 3;
}
.banner.is-on { opacity: 1; transform: scale(1); }
.banner[data-tone='good'] { color: var(--good); }
.banner[data-tone='bad']  { color: var(--bad); }

/* split hands sit side by side and shrink to fit */
.hands {
  display: flex; gap: 10px; justify-content: center; width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.hands::-webkit-scrollbar { display: none; }
.hand {
  display: grid; justify-items: center; gap: 4px;
  padding: 6px 8px 4px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  transition: border-color 200ms, background 200ms, opacity 200ms;
  min-width: 0;
}
.hands .hand:only-child { padding: 0; }
.hands .hand:not(:only-child).is-active {
  border-color: var(--brass);
  background: oklch(100% 0 0 / .045);
}
.hands .hand:not(.is-active):not(:only-child) { opacity: .58; }
.hand-foot {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.wager { font-size: .76rem; color: var(--brass); font-weight: 600; }
.hand[data-result='win'] .total,
.hand[data-result='blackjack'] .total { color: var(--good); }
.hand[data-result='lose'] .total,
.hand[data-result='bust'] .total { color: var(--bad); }
.hand[data-result='surrender'] { opacity: .5; }

/* ── cards ────────────────────────────────────────────────────────────────── */

.card {
  --w: clamp(60px, 17vw, 84px);
  position: relative;
  width: var(--w);
  aspect-ratio: 240 / 336;
  flex: 0 0 auto;
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
  filter: drop-shadow(0 6px 12px oklch(0% 0 0 / .45));
}
.card-side { position: absolute; inset: 0; }
.card-front { opacity: 1; }
.card-back  { opacity: 0; }
.card.is-down .card-front { opacity: 0; }
.card.is-down .card-back  { opacity: 1; }
.card-face { width: 100%; height: 100%; display: block; }
.hands .hand:not(:only-child) .card { --w: clamp(46px, 13vw, 64px); }

/* The turn: pinch to nothing, swap faces at the narrow point, open out again. */
.card.is-flipping { animation: card-turn 320ms var(--ease); }
@keyframes card-turn {
  0%   { transform: scaleX(1); }
  47%  { transform: scaleX(.05); }
  53%  { transform: scaleX(.05); }
  100% { transform: scaleX(1); }
}

/* Dealt in from the shoe, up and to the left of the felt. */
.card.is-dealing {
  transform: translate(-170px, -110px) rotate(-12deg) scale(.86);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .card, .card.is-dealing { transition: opacity 160ms linear; transform: none; }
  .card.is-flipping { animation: none; }
  .banner { transition: opacity 120ms linear; transform: none; }
}

/* ── the coach ────────────────────────────────────────────────────────────── */

.coach {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: oklch(0% 0 0 / .26);
  border-left: 3px solid var(--bone-faint);
  min-height: 58px;
}
.coach-mark {
  width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--bone-faint);
  flex: 0 0 auto;
}
.coach-line {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--bone-dim);
}
.coach[data-tone='right'] { border-left-color: var(--good); }
.coach[data-tone='right'] .coach-mark { border-color: var(--good); background: var(--good); }
.coach[data-tone='wrong'] { border-left-color: var(--bad); }
.coach[data-tone='wrong'] .coach-mark { border-color: var(--bad); }
.coach[data-tone='lead'],
.coach[data-tone='note'] { border-left-color: var(--brass); }
.coach[data-tone='lead'] .coach-mark,
.coach[data-tone='note'] .coach-mark { border-color: var(--brass); }
.coach[data-tone='right'] .coach-line,
.coach[data-tone='wrong'] .coach-line,
.coach[data-tone='lead'] .coach-line { color: var(--bone); }

.coach.pop { animation: coach-pop 300ms var(--ease); }
@keyframes coach-pop { from { transform: translateY(4px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .coach.pop { animation: none; } }

/* ── controls ─────────────────────────────────────────────────────────────── */

.controls { padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }

/* Which control block is live is driven entirely by the game's phase. */
.bet-rail, .action-row { display: none; }
body[data-phase='bet'] .bet-rail { display: grid; gap: 12px; justify-items: center; }
body[data-phase='play'] .action-row,
body[data-phase='insurance'] .action-row,
body[data-phase='dealer'] .action-row,
body[data-phase='settle'] .action-row { display: flex; }

.chip-tray { display: flex; gap: 10px; justify-content: center; }
.chip {
  appearance: none; border: 0; background: none; padding: 0;
  width: clamp(52px, 15vw, 64px);
  aspect-ratio: 1;
  cursor: pointer;
  transition: transform 160ms var(--ease), opacity 160ms;
  filter: drop-shadow(0 4px 8px oklch(0% 0 0 / .4));
}
.chip:hover:not(:disabled) { transform: translateY(-4px); }
.chip:active:not(:disabled) { transform: translateY(0) scale(.96); }
.chip:disabled { opacity: .28; cursor: default; }
.chip svg { width: 100%; height: 100%; display: block; }
.chip-body { fill: var(--chip); stroke: oklch(0% 0 0 / .35); stroke-width: 2; }
.chip-edge { stroke: var(--chip-edge); stroke-width: 9; stroke-linecap: butt; }
.chip-ring { fill: none; stroke: var(--chip-edge); stroke-width: 3; stroke-dasharray: 5 4; }
.chip-num {
  fill: var(--chip-ink);
  font-family: var(--font-game);
  font-size: 30px;
  font-weight: 600;
}
.chip[data-chip='red']    { --chip: #B4382F; --chip-edge: #F2E6D8; --chip-ink: #FFF6EC; }
.chip[data-chip='green']  { --chip: #2E7A50; --chip-edge: #F2E6D8; --chip-ink: #FFF6EC; }
.chip[data-chip='black']  { --chip: #23282B; --chip-edge: #D7C79E; --chip-ink: #F0E4C6; }
.chip[data-chip='purple'] { --chip: #5B3A86; --chip-edge: #F2E6D8; --chip-ink: #FFF6EC; }

.chip.nudge { animation: nudge 320ms; }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.bet-amount {
  margin: 0;
  min-height: 1.6em;
  font-family: var(--font-game);
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bone-faint);
}
.bet-amount.is-set { color: var(--brass); }
.bet-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.action-row {
  gap: 8px;
  align-items: center;
  min-height: 54px;
}
body[data-phase='play'] .action-row { display: grid; grid-template-columns: repeat(6, 1fr); }
.act { padding: 14px 6px; min-width: 0; }
/* The two you press on every hand get the top row to themselves. */
[data-act='hit'], [data-act='stand'] { grid-column: span 3; }
[data-act='double'], [data-act='split'], [data-act='surrender'] { grid-column: span 2; }
.act--fold { --btn-bg: oklch(38% 0.030 158); --btn-fg: var(--bone-dim); }
.ins, .next, .act-wait { display: none; }
.act-wait { margin: 0; color: var(--bone-faint); font-size: .86rem; letter-spacing: .06em; }

.action-row[data-mode='insurance'] { display: flex !important; justify-content: center; }
.action-row[data-mode='insurance'] .act:not(.ins) { display: none; }
.action-row[data-mode='insurance'] .ins { display: block; flex: 1 1 0; }
.ins { --btn-bg: oklch(38% 0.030 158); --btn-fg: var(--bone); }
.ins--take { --btn-bg: var(--brass); --btn-fg: #16241C; }

.action-row[data-mode='next'] { display: flex !important; justify-content: center; }
.action-row[data-mode='next'] .act:not(.next) { display: none; }
.action-row[data-mode='next'] .next { display: block; flex: 0 1 auto; padding-inline: 34px; }

.action-row[data-mode='wait'] { display: flex !important; justify-content: center; }
.action-row[data-mode='wait'] .act { display: none; }
.action-row[data-mode='wait'] .act-wait { display: block; }

/* The button the book would press, marked but never forced. */
.act.is-book { box-shadow: 0 0 0 2px var(--brass), 0 0 18px -2px var(--brass); }

/* ── sheets ───────────────────────────────────────────────────────────────── */

.sheet {
  position: fixed; inset: 0; z-index: 40;
  display: grid; align-items: end;
  background: oklch(0% 0 0 / 0);
  transition: background 300ms var(--ease);
}
.sheet.is-open { background: oklch(0% 0 0 / .55); }
.sheet-panel {
  background: var(--felt-deep);
  border-top: 2px solid var(--brass);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  max-height: 88dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  transform: translateY(100%);
  transition: transform 320ms var(--ease);
}
.sheet.is-open .sheet-panel { transform: translateY(0); }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 12px 20px;
  border-bottom: 1px solid var(--felt-line);
}
.sheet-title { margin: 0; font-family: var(--font-game); font-size: 1.2rem; font-weight: 600; }
.sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px max(24px, env(safe-area-inset-bottom));
}
.sheet-h { margin: 26px 0 6px; font-family: var(--font-game); font-size: 1rem; font-weight: 600; }
.sheet-p { margin: 0 0 12px; font-size: .86rem; line-height: 1.55; color: var(--bone-dim); }

/* ── the chart ────────────────────────────────────────────────────────────── */

.chart-rules {
  margin: 0 0 16px; padding: 10px 12px;
  border-radius: var(--r-sm);
  background: oklch(100% 0 0 / .05);
  font-size: .74rem; line-height: 1.5; color: var(--bone-dim);
}
.chart-block { margin-bottom: 22px; }
.chart-block h3 {
  margin: 0 0 8px;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
}
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart {
  border-collapse: separate;
  border-spacing: 2px;
  font-variant-numeric: tabular-nums;
  margin-inline: auto;
}
.chart th {
  font-size: .68rem; font-weight: 600;
  color: var(--bone-faint);
  padding: 2px 4px;
  white-space: nowrap;
}
.chart thead th { text-align: center; }
.chart tbody th { text-align: right; padding-right: 6px; color: var(--bone-dim); }
.cell {
  width: 26px; height: 26px;
  text-align: center;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 600;
  color: #0E1A14;
  position: relative;
}
.cell abbr { text-decoration: none; border: 0; }
.cell.hit       { background: var(--k-hit); }
.cell.stand     { background: var(--k-stand); }
.cell.double    { background: var(--k-double); }
.cell.split     { background: var(--k-split); }
.cell.surrender { background: var(--k-surrender); color: var(--bone); }
/* A cell you have played wrong carries a dot — your own blind spots, counted. */
.cell.missed::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #0E1A14;
}
.cell.live {
  outline: 2.5px solid var(--bone);
  outline-offset: 1px;
  z-index: 2;
}

.chart-legend {
  margin: 0 0 10px; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px;
  font-size: .76rem; color: var(--bone-dim);
}
.chart-legend li { display: flex; align-items: center; gap: 8px; }
.chart-legend .key {
  width: 22px; height: 22px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 600; color: #0E1A14;
  flex: 0 0 auto;
}
.chart-legend .hit { background: var(--k-hit); }
.chart-legend .stand { background: var(--k-stand); }
.chart-legend .double { background: var(--k-double); }
.chart-legend .split { background: var(--k-split); }
.chart-legend .surrender { background: var(--k-surrender); color: var(--bone); }
.chart-note { margin: 12px 0 0; font-size: .76rem; line-height: 1.5; color: var(--bone-faint); }

/* ── the record ───────────────────────────────────────────────────────────── */

.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.stat {
  padding: 14px; border-radius: var(--r-md);
  background: oklch(100% 0 0 / .05);
}
.stat--wide { grid-column: 1 / -1; border: 1px solid var(--felt-line); }
.stat-num {
  margin: 0;
  font-family: var(--font-game);
  font-size: 1.7rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
}
.stat--wide .stat-num { font-size: 2.6rem; }
.stat-label { margin: 2px 0 0; font-size: .72rem; letter-spacing: .05em; color: var(--bone-dim); }
.stat-sub { margin: 6px 0 0; font-size: .74rem; color: var(--bone-faint); }

.weak { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.weak li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: oklch(100% 0 0 / .05);
  font-size: .84rem;
}
.weak b { color: var(--bad); font-variant-numeric: tabular-nums; }

/* ── settings ─────────────────────────────────────────────────────────────── */

.opt { border: 0; margin: 0 0 20px; padding: 0; }
.opt legend {
  padding: 0; margin-bottom: 8px;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
}
.opt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 4px;
  border-radius: var(--r-sm);
  background: oklch(100% 0 0 / .05);
  font-size: .88rem;
  cursor: pointer;
  min-height: 44px;
}
.opt-row input { width: 18px; height: 18px; accent-color: var(--brass); flex: 0 0 auto; }

.rules-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 6px;
  font-size: .84rem; line-height: 1.5; color: var(--bone-dim);
}
.rules-list li { padding-left: 14px; position: relative; }
.rules-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brass);
}
.rules-list b { color: var(--bone); font-weight: 600; }

/* ── wider screens ────────────────────────────────────────────────────────── */

@media (min-width: 600px) {
  .felt { padding: 22px 20px 10px; gap: 10px; }
  .cards { min-height: 132px; }
  .card { --w: 92px; }
  .hands .hand:not(:only-child) .card { --w: 68px; }
  .coach { margin-inline: 20px; }
  .controls { padding-inline: 20px; }
}

@media (min-height: 760px) {
  .cards { min-height: 140px; }
}

/* ── split hands, last word ───────────────────────────────────────────────── */
/* Four hands will not fit at full size on any screen, so the cards step down as
   the splits multiply rather than pushing the felt sideways. These live at the
   end deliberately: the wider-screen block above also sets a split card width,
   and hand count has to beat screen width. */
.hands:has(.hand:nth-child(3)) { gap: 6px; }
.hands:has(.hand:nth-child(3)) .hand { padding-inline: 4px; }
.hands:has(.hand:nth-child(3)) .card { --w: clamp(38px, 10vw, 52px); }
.hands:has(.hand:nth-child(4)) .card { --w: clamp(32px, 8.4vw, 44px); }