/* ============================================================
   Texas Hold'em Trainer — design system
   Static / GitHub-Pages friendly: no build step, no external assets.
   ============================================================ */

:root {
  /* palette — obsidian base, warm (GRAND ATLANTIC crest pass) */
  --bg-0: #0a0908;
  --bg-1: #12100d;
  --bg-2: #1b1712;
  --panel: rgba(26, 23, 18, 0.72);
  --panel-solid: #1a1712;
  --panel-border: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.06);

  /* deeper casino felt + obsidian-leaning rail (GRAND ATLANTIC pass) */
  --felt-0: #1b6f4b;
  --felt-1: #0c4a30;
  --felt-2: #06301f;
  --rail: #3b2a19;
  --rail-hi: #59401f;

  /* crest gold — light #f7df9a / base #e2b755 / deep #a5813d */
  --gold: #e2b755;
  --gold-hi: #f7df9a;
  --gold-dim: #a5813d;
  /* one restrained cool accent, used sparingly (not the old sky-blue room) */
  --accent: #6fa8cc;
  --accent-dim: #3d7391;
  --violet: #a98bff;

  --good: #56c877;
  --good-bg: rgba(86, 200, 119, 0.14);
  --bad: #f0605a;
  --bad-bg: rgba(240, 96, 90, 0.14);
  --warn: #f0b429;
  --warn-bg: rgba(240, 180, 41, 0.14);

  --text: #eef2f7;
  --text-dim: #97a3b4;
  --text-faint: #5f6b7c;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);

  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-num: 'SF Mono', 'JetBrains Mono', 'Consolas', ui-monospace, monospace;
  font-size: 16px;
}

* { box-sizing: border-box; }

/* `clip` (not `hidden`) prevents horizontal scroll WITHOUT turning the page
   into a scroll container — `overflow-x: hidden` here silently broke the
   sticky header (it scrolled up into the felt, esp. on iOS Safari). */
html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(226, 183, 85, 0.09), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(165, 129, 61, 0.10), transparent 60%),
    var(--bg-0);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: var(--accent); }

/* ---------- Header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  /* brand pushes the wallet + nav cluster to the right; the header wraps to a
     second row on narrow screens instead of crushing the wallet */
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  /* full-width, taller header band: comfortably holds the shared wallet +
     brand + nav across the entire top of the viewport */
  width: 100%;
  min-height: 66px;
  padding: 0.7rem clamp(1rem, 3vw, 1.75rem);
  /* opaque: the felt must NOT bleed through as content scrolls underneath */
  background: #0b0f16;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.app-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  /* keep brand on the left; the wallet + nav cluster is pushed to the right */
  margin-right: auto;
  min-width: 0;
}
.app-header .brand .logo-mark {
  width: 30px; height: 30px; flex: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
.name-row { display: flex; gap: 0.5rem; }
.name-row input { flex: 1; }
.name-row #name-shuffle { flex: none; font-size: 1.1rem; padding: 0 0.8rem; }
.app-header .brand .grad {
  background: linear-gradient(90deg, var(--gold), #fff 60%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* right-side header cluster: canonical GA wallet + nav tabs */
.hdr-tools { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.app-header nav { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.app-header nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.app-header nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.app-header nav a.active { color: #0a0e14; background: var(--gold); }

main { max-width: 1240px; margin: 0 auto; padding: 1.25rem; }

/* ---------- Buttons ---------- */
button { font-family: inherit; }
.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.15rem;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.4); }
.btn.primary {
  color: #08120c;
  background: linear-gradient(180deg, #57d98a, #2fa863);
  box-shadow: 0 6px 18px rgba(47, 168, 99, 0.35);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn.gold {
  color: #14100a;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  box-shadow: 0 6px 18px rgba(226, 183, 85, 0.3);
}
.btn.gold:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
/* secondary buttons share the action-dock idiom: rounded, hairline highlight,
   gentle lift on hover, gold-tinted focus edge */
.btn.ghost {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn.ghost:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06));
  border-color: rgba(226, 183, 85, 0.42);
  transform: translateY(-1px);
}

/* ---------- Panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  backdrop-filter: blur(8px);
}
.panel h3 {
  margin: 0 0 0.7rem 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 0.45rem;
}
.panel h3 .ico { font-size: 0.95rem; }

/* ============================================================
   SETUP SCREEN
   ============================================================ */
.setup-wrap {
  max-width: 760px;
  margin: 2.2rem auto;
  animation: rise 0.5s ease both;
}
.setup-hero { text-align: center; margin-bottom: 1.6rem; }
.setup-hero h1 {
  font-size: 2.1rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.setup-hero h1 .grad {
  background: linear-gradient(90deg, var(--gold), #fff, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.setup-hero p { color: var(--text-dim); max-width: 560px; margin: 0 auto; }

.setup-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}
.setup-row { margin-bottom: 1.15rem; }
.setup-row > label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
select, input[type=text], input[type=number] {
  width: 100%;
  padding: 0.62rem 0.7rem;
  background: var(--bg-2);
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
}
select:focus, input:focus { outline: 2px solid var(--accent-dim); outline-offset: 0; }

.venue-notes {
  font-size: 0.86rem;
  color: var(--text-dim);
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
}
.venue-notes strong { color: var(--gold); }
.venue-notes ul { margin: 0.4rem 0 0 1.1rem; padding: 0; }
.venue-notes li { margin: 0.2rem 0; }

.setup-card .btn.primary { width: 100%; margin-top: 0.4rem; padding: 0.8rem; font-size: 1.05rem; }

.setup-tips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.setup-tips .tip {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
}
.setup-tips .tip .t-ico { font-size: 1.3rem; }
.setup-tips .tip .t-title { font-weight: 700; margin: 0.3rem 0 0.15rem; font-size: 0.92rem; }
.setup-tips .tip .t-body { color: var(--text-dim); font-size: 0.8rem; }
@media (max-width: 640px) { .setup-tips { grid-template-columns: 1fr; } }

/* ============================================================
   GAME LAYOUT
   ============================================================ */
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.1rem;
  align-items: start;
  margin-top: 1.1rem;
}
@media (max-width: 960px) {
  /* Single-column play zone. The natural DOM order already gives the redesigned
     stack — table → action buttons (dock) → HAND STRENGTH → analytics → log —
     because the hand-result between the dock and the side column is hidden until
     showdown. We only need the two wrappers to collapse to plain blocks and the
     side column to stop being a nested flex box, so the panels flow straight
     through. This keeps HAND STRENGTH right under the buttons, near the top. */
  /* !important beats the inline `display:grid` ui.js sets on #game-screen when
     the table is dealt — without it the mobile stack falls back to two grid
     columns and the dock lands beside the felt. */
  .game-layout {
    display: flex !important;
    flex-direction: column;
    gap: 0.6rem;
  }
  .game-layout > div:first-child { display: contents; }
  .side-col { display: contents; }
}

/* felt table */
.table-wrap {
  position: relative;
  width: 100%;
  /* flatter + a touch shorter than before: less dead felt in the middle */
  aspect-ratio: 16 / 9.1;
  min-height: 360px;
  /* clear, permanent gap from the sticky header so the oval's top edge
     never kisses the nav bar (paired with the opaque header above) */
  margin-top: 0.9rem;
  border-radius: 46% / 44%;
  background:
    radial-gradient(58% 52% at 50% 40%, #237c55 0%, var(--felt-0) 34%, var(--felt-1) 66%, var(--felt-2) 100%);
  border: 14px solid var(--rail);
  /* subtle crest-gold rim inlay between the leather rail rings */
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.65),
    0 0 0 4px rgba(226, 183, 85, 0.45),
    0 0 0 8px var(--rail-hi),
    0 0 0 10px rgba(0,0,0,0.55),
    inset 0 0 110px rgba(0, 0, 0, 0.62),
    var(--shadow-lg);
}
.table-wrap::before {
  /* felt micro-texture + soft vignette + inner rail ring */
  content: '';
  position: absolute; inset: 0;
  border-radius: 46% / 44%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 42%, transparent 52%, rgba(0,0,0,0.28) 100%),
    repeating-radial-gradient(circle at 50% 42%, rgba(255,255,255,0.014) 0, rgba(255,255,255,0.014) 1px, transparent 1px, transparent 3px);
}
.table-wrap::after {
  content: '';
  position: absolute; inset: 4.5%;
  border-radius: 46% / 44%;
  border: 2px solid rgba(226, 183, 85, 0.12);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.25);
  pointer-events: none;
}
.table-felt-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

.table-center {
  position: absolute;
  left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 66%;
  z-index: 3;
}
.pot-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.4));
  border: 1px solid rgba(226, 183, 85, 0.55);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.26rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
  font-family: var(--font-num);
  box-shadow: 0 0 20px rgba(226,183,85,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.2s ease;
}
.pot-pill::before { content: '💰'; font-size: 0.85em; filter: saturate(1.1); }
.pot-pill.bump { animation: potBump 0.35s ease; }
@keyframes potBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.board-cards {
  display: flex; justify-content: center; gap: 0.4rem;
  min-height: 76px; align-items: center;
}
/* small dark pill (like .pot-pill) so the street reads on green felt */
.street-badge {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.4));
  border: 1px solid rgba(226,183,85,0.42);
  padding: 0.16rem 0.62rem;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- Cards ---------- */
.card {
  --w: 52px;
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  background: linear-gradient(160deg, #ffffff, #eef1f5);
  color: #1a1a22;
  border-radius: 7px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0,0,0,0.08);
  flex: none;
  font-weight: 800;
  overflow: hidden;
}
/* Only cards explicitly flagged .deal animate in -- prevents the whole
   board/hole cards re-flipping on every repaint. */
.card.deal { animation: dealIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
.card.small { --w: 34px; border-radius: 5px; }
.card.red { color: #d21f3c; }
/* corner index + centre pip -- shared by the flat learn cards (.card) and
   the 3D table card faces (.cface) */
.card .corner, .cface .corner {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  line-height: 0.9;
  font-weight: 800;
}
/* slightly larger corner indices — reads better at a glance */
.card .corner .r, .cface .corner .r { font-size: calc(var(--w) * 0.38); }
.card .corner .s, .cface .corner .s { font-size: calc(var(--w) * 0.30); margin-top: -1px; }
.card .corner.tl, .cface .corner.tl { top: 4px; left: 5px; }
.card .corner.br, .cface .corner.br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.card .pip, .cface .pip {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--w) * 0.6);
  opacity: 0.92;
}
.card.small .corner.br { display: none; }
.card.small .pip { font-size: calc(var(--w) * 0.7); }
.card-slot.small .cface .corner.br { display: none; }
.card-slot.small .cface .pip { font-size: calc(var(--w) * 0.72); }

/* obsidian card back with a crest-gold guilloché + spade monogram */
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(226,183,85,0.05) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(-45deg, rgba(226,183,85,0.035) 0 5px, transparent 5px 10px),
    radial-gradient(120% 95% at 50% 0%, #1b1712, #0f0d0a 62%, #080706 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(226,183,85,0.45), inset 0 0 0 4px #0a0908;
}
/* guilloché frame */
.card.back::after {
  content: '';
  position: absolute; inset: 5px;
  border: 1px solid rgba(226,183,85,0.4);
  border-radius: 4px;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(226,183,85,0.05) 0deg 6deg, transparent 6deg 18deg);
}
/* centred crest-gold spade monogram */
.card.back::before {
  content: '♠';
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--w) * 0.6);
  color: rgba(226,183,85,0.68);
  text-shadow: 0 0 6px rgba(226,183,85,0.35);
}
.card.placeholder {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  animation: none;
}
.board-empty { color: rgba(255,255,255,0.4); font-size: 0.82rem; }

/* ============================================================
   3D TABLE CARDS (js/table.js) — real perspective flip
   ============================================================ */
.card-slot {
  --w: 56px;
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  flex: none;
  perspective: 850px;
}
.card-slot.small { --w: 36px; }
.card-slot.hidden { visibility: hidden; }
/* faint felt marker for an as-yet-undealt board spot */
.card-slot.board-slot.empty { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.08); border-radius: 8px; }
.card-slot.board-slot.empty .flipper { visibility: hidden; }

.flipper {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1);
  transform: rotateY(180deg); /* default: face-down (back showing) */
  will-change: transform;
}
.flipper.up { transform: rotateY(0deg); }
.cface {
  position: absolute; inset: 0;
  border-radius: calc(var(--w) * 0.14);
  overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.cface.front {
  background: linear-gradient(157deg, #ffffff 0%, #f4f6fa 52%, #e6eaf1 100%);
  color: #171b24;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9), 0 5px 12px rgba(0,0,0,0.45);
}
.cface.front.red { color: #d5253c; }
/* soft diagonal gloss sweep across the card face */
.cface.front::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 34%);
  pointer-events: none;
}
/* obsidian face-down table card + crest-gold guilloché & spade monogram */
.cface.back {
  transform: rotateY(180deg);
  background:
    radial-gradient(120% 90% at 50% 0%, #1c1813, #0f0d0a 58%, #080706 100%);
  box-shadow: inset 0 0 0 2px rgba(226,183,85,0.4), inset 0 0 0 4px #0a0908, 0 5px 12px rgba(0,0,0,0.45);
}
.cface.back::after {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(226,183,85,0.38);
  border-radius: calc(var(--w) * 0.1);
  background-image:
    repeating-linear-gradient(45deg, rgba(226,183,85,0.07) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(-45deg, rgba(226,183,85,0.05) 0 5px, transparent 5px 10px);
}
.cface.back::before {
  content: '♠';
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--w) * 0.58);
  color: rgba(226,183,85,0.6);
  text-shadow: 0 0 7px rgba(226,183,85,0.3);
}

/* deal-in: the slot flies down onto the felt (position), while the flipper
   handles the rotation separately -- no conflict between the two. */
.card-slot.dealing { animation: dealSlot 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both; animation-delay: var(--deal-delay, 0ms); }
@keyframes dealSlot {
  from { opacity: 0; transform: translateY(-42px) translateX(8px) rotate(-9deg) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

.hole { display: flex; justify-content: center; gap: 4px; margin: 0.3rem 0 0.25rem; min-height: calc(36px * 1.4); }

/* ============================================================
   POKER CHIPS + BET AREA + CHIP FLIGHT
   ============================================================ */
.pchip {
  width: 15px; height: 15px; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #ffe79a, #e3b64a 55%, #b98a2c);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.35),
    inset 0 0 0 3px rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.6);
  position: relative;
}
/* dashed "edge spots" of a real casino chip */
.pchip::before {
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.65) 0deg 12deg, transparent 12deg 42deg);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%);
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}
.chip-stack { position: relative; display: inline-flex; }
.chip-stack .pchip { margin-left: -9px; }
.chip-stack .pchip:first-child { margin-left: 0; }

.seat .bet-area {
  position: absolute;
  left: 50%; top: -26px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px;
  z-index: 5; white-space: nowrap;
  animation: betPlace 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.seat .bet-area .bet-amt {
  font-family: var(--font-num); font-weight: 800; font-size: 0.6rem; color: #ffe9a8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
/* the two top seats keep their chips on the felt side (below) */
.seat-3 .bet-area, .seat-4 .bet-area { top: auto; bottom: -26px; }
@keyframes betPlace {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.8); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* a single chip that physically flies from a seat to the pot (or back) */
.fly-chip {
  position: fixed; z-index: 90;
  width: 18px; height: 18px; border-radius: 50%; margin: -9px 0 0 -9px;
  background: radial-gradient(circle at 38% 32%, hsl(var(--chip-hue, 44) 85% 72%), hsl(var(--chip-hue, 44) 60% 45%));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.6);
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.6s ease;
  pointer-events: none;
}

/* ---------- Seats ---------- */
.seat {
  position: absolute;
  width: 132px;
  transform: translate(-50%, -50%);
  z-index: 4;
  transition: opacity 0.25s;
}
.seat .seat-inner {
  position: relative;
  /* glassy obsidian plate: rounded, translucent, hairline top highlight */
  background: linear-gradient(172deg, rgba(24, 21, 14, 0.78), rgba(10, 9, 8, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 0.4rem 0.4rem 0.5rem;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.seat.human .seat-inner { border-color: rgba(111, 168, 204, 0.55); box-shadow: 0 0 16px rgba(111,168,204,0.22), var(--shadow-md); }
.seat.acting .seat-inner {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(226, 183, 85, 0.45), 0 0 24px rgba(226, 183, 85, 0.5);
  animation: pulseGold 1.6s ease-in-out infinite;
}
/* rotating conic "timer" ring around the seat that's on the clock */
.seat.acting .seat-inner::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(var(--gold), rgba(226,183,85,0.05) 55%, var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 2.4s linear infinite;
  pointer-events: none;
}
.seat.thinking .seat-inner { animation: pulseGold 0.9s ease-in-out infinite; }
.seat.winner .seat-inner {
  border-color: var(--good);
  box-shadow: 0 0 0 2px rgba(86, 200, 119, 0.6), 0 0 30px rgba(86, 200, 119, 0.6);
  animation: winnerPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.seat.folded { opacity: 0.4; filter: saturate(0.45); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes winnerPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* ---------- Win celebration: chip payout · seat badge · hero popup ---------- */
/* heftier, brighter chip than the generic .fly-chip; slides pot -> winner */
.fly-chip.payout {
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  background: radial-gradient(circle at 38% 32%, #ffe9a8, #e2b755 60%, #b9963f);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.45), 0 3px 10px rgba(0,0,0,0.7),
              0 0 12px rgba(226,183,85,0.7);
  z-index: 95;
}
/* floating "+$X / hand" badge above a winning seat */
.win-badge {
  position: absolute; left: 50%; bottom: calc(100% - 4px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 0.28rem 0.6rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(20,26,34,0.97), rgba(12,16,22,0.97));
  border: 1px solid var(--good); color: var(--good);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 18px rgba(86,200,119,0.4);
  white-space: nowrap; pointer-events: none; z-index: 20;
  animation: winBadgeIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.win-badge.you {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 22px rgba(226,183,85,0.55);
}
.win-badge .wb-amt { font-family: var(--font-num); font-weight: 800; font-size: 0.95rem; line-height: 1; }
.win-badge .wb-hand {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0.85;
}
.win-badge.out { animation: winBadgeOut 0.55s ease forwards; }
@keyframes winBadgeIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.7); }
  60%  { transform: translateX(-50%) translateY(-4px) scale(1.06); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes winBadgeOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.9); }
}
/* centered celebratory card when the HUMAN wins */
.win-hero {
  position: absolute; left: 50%; top: 39%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.7rem 1.5rem; border-radius: 16px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(37,30,12,0.96), rgba(10,14,20,0.96));
  border: 1.5px solid var(--gold);
  box-shadow: 0 10px 40px rgba(0,0,0,0.65), 0 0 34px rgba(226,183,85,0.5),
              inset 0 0 22px rgba(226,183,85,0.14);
  pointer-events: none; z-index: 30; text-align: center;
  animation: winHeroIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.win-hero .wh-title {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.win-hero .wh-amt {
  font-family: var(--font-num); font-weight: 800; font-size: 1.9rem; line-height: 1.05;
  background: linear-gradient(90deg, var(--gold), #fff 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.win-hero .wh-hand { font-size: 0.78rem; font-weight: 700; color: var(--text-dim); }
.win-hero.out { animation: winHeroOut 0.6s ease forwards; }
@keyframes winHeroIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  55%  { transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes winHeroOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -54%) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .win-badge, .win-hero { animation-duration: 0.001s; }
}

.seat .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  margin: 0 auto 0.2rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  background: linear-gradient(160deg, #2a3550, #1c2432);
  border: 1px solid rgba(255,255,255,0.12);
}
.seat.human .avatar { background: linear-gradient(160deg, #2c6fb0, #1c3f66); }
.seat .seat-name { font-size: 0.65rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .seat-role {
  display: inline-block;
  font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  background: rgba(255,255,255,0.06);
  padding: 0.02rem 0.34rem; border-radius: 999px;
  margin-top: 0.1rem;
}
/* personality badge under a bot's name ("🪨 tight" · tooltip explains the read) */
.seat .seat-persona {
  display: inline-block;
  font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-dim);
  background: rgba(226, 183, 85, 0.08);
  border: 1px solid rgba(226, 183, 85, 0.22);
  padding: 0.02rem 0.34rem; border-radius: 999px;
  margin: 0.12rem auto 0;
  white-space: nowrap;
  cursor: help;
}
.seat .seat-cards { display: flex; justify-content: center; gap: 0.2rem; margin: 0.3rem 0 0.25rem; min-height: 48px; }
.seat .seat-stack {
  font-size: 0.68rem; font-weight: 800; color: var(--gold);
  font-family: var(--font-num);
  transition: color 0.25s;
}
.seat .seat-stack.flash { animation: stackFlash 0.5s ease; }
@keyframes stackFlash {
  0% { transform: scale(1); }
  35% { transform: scale(1.16); color: #fff; }
  100% { transform: scale(1); }
}
.seat .dealer-chip {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 900;
  border: 2px solid var(--gold);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* bet chips floating toward center */
.seat .seat-bet {
  position: absolute;
  left: 50%; bottom: -22px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.62rem; font-weight: 800;
  color: #ffe9a8;
  font-family: var(--font-num);
  display: flex; align-items: center; gap: 0.28rem;
}
.seat .seat-bet .chip-stack {
  position: relative; display: inline-flex; align-items: flex-end;
}
.seat .seat-bet .chip-stack .chip-dot { margin-left: -7px; }
.seat .seat-bet .chip-stack .chip-dot:first-child { margin-left: 0; }
.seat .seat-bet .chip-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #ffe08a, #d8a63a 62%, #a9781f);
  border: 1px solid rgba(0,0,0,0.45);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.22) inset, 0 1px 2px rgba(0,0,0,0.5);
}
.seat .seat-bet {
  animation: betIn 0.25s ease both;
}
@keyframes betIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.seat .badge-allin {
  display: inline-block; margin-top: 0.15rem;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em;
  color: #fff; background: var(--bad);
  padding: 0.02rem 0.32rem; border-radius: 999px;
}

/* floating "Calls $6" / "Folds" bubble shown as each seat acts */
.seat .action-bubble {
  position: absolute;
  left: 50%; top: -14px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.6rem; font-weight: 800;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: #10151d;
  border: 1px solid var(--gold);
  color: var(--gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  animation: bubbleIn 0.22s ease both;
  z-index: 6;
  pointer-events: none;
}
.seat .action-bubble.fold { border-color: #8a5450; color: #f2b3ae; }
.seat .action-bubble.check, .seat .action-bubble.call { border-color: #4f8a68; color: #a9e8c0; }
.seat .action-bubble.bet, .seat .action-bubble.raise, .seat .action-bubble.allin { border-color: var(--gold); color: var(--gold); }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.85); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* animated "thinking" dots on the seat that's on the clock */
.seat .action-bubble.thinking-dots {
  border-color: rgba(255,255,255,0.25);
  display: inline-flex; gap: 3px; padding: 0.28rem 0.5rem;
}
.seat .action-bubble.thinking-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  animation: thinkDot 1s ease-in-out infinite;
}
.seat .action-bubble.thinking-dots span:nth-child(2) { animation-delay: 0.18s; }
.seat .action-bubble.thinking-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes thinkDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* seat coordinates, 7-max (seat 0 = human, bottom center).
   Edge seats pulled inward so the 132px plates sit ON the felt oval
   instead of hanging off onto the leather rail. */
.seat-0 { left: 50%; top: 88%; }
.seat-1 { left: 15%; top: 74%; }
.seat-2 { left: 6%;  top: 42%; }
.seat-3 { left: 24%; top: 11%; }
.seat-4 { left: 50%; top: 5%; }
.seat-5 { left: 76%; top: 11%; }
.seat-6 { left: 94%; top: 42%; }
@media (max-width: 560px) {
  .seat { width: 104px; }
  .table-wrap { min-height: 360px; }
}

/* ---------- Action dock ---------- */
.action-dock {
  margin-top: 1rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  backdrop-filter: blur(8px);
}
.action-hint-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.6rem;
}
.action-hint-row #speed-btn {
  padding: 0.28rem 0.7rem; font-size: 0.78rem; flex: none;
  font-family: var(--font-num); font-weight: 700;
}
.action-hint {
  font-size: 0.82rem; color: var(--text-dim);
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
}
.action-hint .rec {
  font-weight: 800; color: var(--gold);
  background: rgba(226,183,85,0.12);
  border: 1px solid rgba(226,183,85,0.3);
  padding: 0.1rem 0.5rem; border-radius: 999px;
}

/* right-hand cluster of the hint row: the one-tap "play the read" + speed toggle */
.action-hint-tools {
  display: flex; align-items: center; gap: 0.4rem; flex: none;
}
/* "Play the read" — small, gold-outlined, obsidian fill so it reads as guidance
   without crowding the fold/check/call/raise buttons below. */
.play-read-btn {
  padding: 0.28rem 0.6rem; font-size: 0.76rem; flex: none;
  font-weight: 800; letter-spacing: 0.01em; line-height: 1;
  display: inline-flex; align-items: center; gap: 0.28rem;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(226,183,85,0.16), rgba(226,183,85,0.07));
  border: 1px solid rgba(226,183,85,0.45);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.play-read-btn:hover:not(:disabled) {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.play-read-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.97); }
.play-read-btn[hidden] { display: none; }
.play-read-btn .pr-genie { font-size: 0.92em; }
@media (max-width: 420px) {
  /* keep it from crowding the row on the smallest phones: icon + arrow only */
  .play-read-btn .pr-label { font-size: 0; }
  .play-read-btn .pr-label::before { content: "▶"; font-size: 0.8rem; }
}

/* Inline decision analytics strip inside the action dock. On desktop the full
   side panel is visible, so this stays hidden; on mobile (≤960px, side column
   below the fold) it surfaces the essential live numbers during the decision. */
#dock-analytics {
  display: none;
  gap: 0.4rem; margin-bottom: 0.6rem;
}
#dock-analytics .da-pill {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  padding: 0.32rem 0.4rem; border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
#dock-analytics .da-k {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim);
}
#dock-analytics .da-v {
  font-family: var(--font-num); font-weight: 800; font-size: 0.98rem; line-height: 1;
  color: var(--text);
}
#dock-analytics .da-v.gold { color: var(--gold); }
#dock-analytics .da-pill.ok { border-color: rgba(86,200,119,0.45); background: var(--good-bg); }
#dock-analytics .da-pill.ok .da-v { color: var(--good); }
#dock-analytics .da-pill.no { border-color: rgba(240,96,90,0.45); background: var(--bad-bg); }
#dock-analytics .da-pill.no .da-v { color: var(--bad); }
@media (max-width: 960px) {
  #dock-analytics { display: flex; }
}

/* ---- action buttons: clean, modern, tactile ---- */
.action-main { display: flex; gap: 0.5rem; align-items: stretch; }
.action-main .btn {
  flex: 1 1 0; min-width: 0; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 48px; padding: 0.5rem 0.7rem;
  border-radius: 13px;
  font-size: 0.97rem; font-weight: 700; letter-spacing: 0.005em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 2px rgba(0,0,0,0.28), 0 6px 16px rgba(0,0,0,0.26),
              inset 0 1px 0 rgba(255,255,255,0.14);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.action-main .btn:hover:not(:disabled) {
  transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 10px 22px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.16);
}
.action-main .btn:active:not(:disabled) {
  transform: translateY(1px); filter: brightness(0.98);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 2px 5px rgba(0,0,0,0.28);
}
.action-main .btn .ba-ic { font-size: 0.95em; line-height: 1; opacity: 0.9; font-weight: 700; }
.action-main .btn .ba-amt { font-family: var(--font-num); font-weight: 800; opacity: 0.95; }
.btn-fold  { background: linear-gradient(180deg, #b85b56, #91403c); }
.btn-check { background: linear-gradient(180deg, #3b4557, #2a3140); color: #e2e8f2; }
.btn-call  { background: linear-gradient(180deg, #33b877, #1f8b54); }
.btn-bet   { background: linear-gradient(180deg, #f0c968, #cca23f); color: #2a1e05; text-shadow: none; }
.btn-bet .ba-ic { opacity: 0.75; }

.bet-controls {
  margin-top: 0.7rem;
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}
.bet-presets { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bet-presets .btn {
  padding: 0.42rem 0.78rem; font-size: 0.8rem; font-weight: 700;
  border-radius: 10px; color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.bet-presets .btn:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,0.09); border-color: rgba(226,183,85,0.45); }
#btn-allin {
  color: #2a1e05; font-weight: 800;
  background: linear-gradient(180deg, #f0c968, #cca23f);
  border-color: rgba(0,0,0,0.18);
}
#btn-allin:hover:not(:disabled) { filter: brightness(1.05); background: linear-gradient(180deg, #f0c968, #cca23f); }
.slider-wrap { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 220px; }
input[type=range] {
  flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--gold), var(--gold-dim));
  border-radius: 999px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold));
  border: 2px solid #7c5d22; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold));
  border: 2px solid #7c5d22; cursor: pointer;
}
.bet-amount-box { width: 92px; text-align: center; font-family: var(--font-num); font-weight: 700; }

/* the wrapper is the centred overlay on the felt: it holds the result CARD and,
   directly BELOW it, the Deal Next Hand CTA as a SIBLING (never inside the card's
   internal scroll), so the CTA is always fully visible. pointer-events pass
   through the empty area so the idle felt behind stays untouched. */
.hand-result-wrap {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.6rem;
  pointer-events: none;
}
.hand-result-wrap > * { pointer-events: auto; }

.hand-result {
  /* overlaid dead-centre on the table felt (it lives inside the wrapper inside
     #table-wrap now), so a concluded hand reads right where you're looking
     instead of pushing the view down below your seat. */
  width: min(90%, 440px);
  height: max-content;
  /* leave room in the column for the sibling CTA below (button + gap) */
  max-height: calc(92% - 3.4rem);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  animation: rise 0.35s ease both;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(0, 0, 0, 0.4);
  /* it overlays the busy felt now, so keep the panel near-opaque + blurred so
     the read-out never washes into the seats/logo behind it */
  background-color: rgba(14, 13, 10, 0.94);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
}
.hand-result .headline { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.2rem; }
.hand-result .net-up { color: var(--good); }
.hand-result .net-down { color: var(--bad); }
.hand-result .detail { color: var(--text-dim); font-size: 0.86rem; margin-bottom: 0.7rem; }

/* ============================================================
   WINNING-HAND SHOWCASE — post-hand centrepiece (#hand-result.showcase)
   The winner's best five cards flip in large, the hand-making cards glow
   crest gold, kickers dim, and the payout counts up.
   ============================================================ */
.hand-result.showcase {
  padding: 1rem 1.1rem 0.9rem;
  /* near-opaque base (it now sits ON the felt) with the warm gold wash on top */
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(44, 35, 14, 0.6), transparent 60%),
    rgba(14, 13, 10, 0.95);
  border-color: rgba(226, 183, 85, 0.28);
}
/* brighter treatment when the HUMAN takes the pot */
.hand-result.showcase.you-win {
  border-color: rgba(226, 183, 85, 0.65);
  box-shadow: 0 0 0 1px rgba(226, 183, 85, 0.25), 0 0 38px rgba(226, 183, 85, 0.16),
              inset 0 0 30px rgba(226, 183, 85, 0.05);
}
.sc-head {
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--font-num);
}
.sc-rank {
  margin-top: 0.35rem;
  font-size: clamp(1.15rem, 3.2vw, 1.65rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  background: linear-gradient(90deg, var(--gold), #fff6dd 52%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rise 0.4s ease both;
}
.sc-rank-plain { font-size: 1.25rem; }
.sc-sub { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.15rem; }
.sc-cards {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 0.5rem; flex-wrap: wrap;
  margin: 0.7rem 0 0.6rem;
  perspective: 900px;
}
.sc-card {
  --w: 58px;
  animation: scReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes scReveal {
  0%   { opacity: 0; transform: translateY(26px) rotateY(88deg) scale(0.82); }
  60%  { opacity: 1; transform: translateY(-4px) rotateY(-8deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
/* the cards that COMPLETE the hand glow crest gold and sit a touch higher */
.sc-card.is-core {
  margin-bottom: 6px; /* lifts above the bottom-aligned kickers */
  box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(226, 183, 85, 0.55),
              0 6px 16px rgba(0, 0, 0, 0.5);
}
/* kickers ride along, dimmer */
.sc-card.is-kicker { filter: brightness(0.68) saturate(0.85); }
/* gold pip marking a card dealt to the winner's HOLE (vs the board) */
.sc-card.from-hole::before {
  content: '';
  position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6dd, var(--gold) 60%, var(--gold-dim));
  box-shadow: 0 0 6px rgba(226, 183, 85, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.sc-payline { font-size: 1rem; font-weight: 700; margin-top: 0.3rem; }
.sc-payline.you { font-size: 1.18rem; color: #fff6dd; }
.sc-amt {
  font-family: var(--font-num); font-weight: 800; font-size: 1.2em;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(226, 183, 85, 0.45);
  font-variant-numeric: tabular-nums;
}
.sc-losers {
  margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1px solid var(--stroke);
  display: flex; flex-direction: column; align-items: center; gap: 0.28rem;
}
.sc-losers-label {
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
}
.sc-loser { display: flex; align-items: center; gap: 0.5rem; opacity: 0.72; font-size: 0.8rem; }
.sc-loser .card.small { --w: 26px; border-radius: 4px; }
.sc-loser-name { font-weight: 700; max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-loser-cards { display: flex; gap: 3px; }
.sc-loser-hand { color: var(--text-dim); }
.sc-meta { margin-top: 0.45rem; }
.sc-meta .detail { margin-bottom: 0.25rem; }
/* the Deal Next Hand CTA is now a SIBLING below the card (see .hand-result-wrap),
   a normal gold button — never buried in the card's internal scroll */
.next-hand-btn {
  flex: 0 0 auto;
  padding: 0.7rem 1.8rem;
  font-size: 1rem;
  box-shadow: 0 8px 22px rgba(226, 183, 85, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .sc-card, .sc-rank { animation: none; } /* instant reveal, no flips */
}

/* ---------- Side panels ---------- */
.side-col { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- Hand-strength meter ---------- */
.strength-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.strength-pct { font-size: 1.7rem; font-weight: 800; font-family: var(--font-num); color: var(--text); line-height: 1; }
.strength-tier {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.16rem 0.55rem; border-radius: 999px; border: 1px solid transparent;
}
.strength-tier.monster { color: #ffe9a8; background: rgba(226,183,85,0.16); border-color: rgba(226,183,85,0.4); }
.strength-tier.strong  { color: #a9e8c0; background: rgba(86,200,119,0.16); border-color: rgba(86,200,119,0.4); }
.strength-tier.ahead   { color: #bfe0ff; background: rgba(89,183,255,0.16); border-color: rgba(89,183,255,0.4); }
.strength-tier.marginal{ color: #f0d69a; background: rgba(240,180,41,0.14); border-color: rgba(240,180,41,0.35); }
.strength-tier.weak    { color: #f2b3ae; background: rgba(240,96,90,0.16); border-color: rgba(240,96,90,0.4); }
.strength-bar {
  position: relative; height: 12px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, rgba(240,96,90,0.22), rgba(240,180,41,0.22), rgba(86,200,119,0.22));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.strength-bar > span {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.2,0.85,0.25,1), background 0.4s;
  background: linear-gradient(90deg, #59b7ff, #56c877);
}
.strength-bar > span.monster { background: linear-gradient(90deg, #e2b755, #ffe9a8); }
.strength-bar > span.strong  { background: linear-gradient(90deg, #2fa863, #56c877); }
.strength-bar > span.ahead   { background: linear-gradient(90deg, #2c7fc4, #59b7ff); }
.strength-bar > span.marginal{ background: linear-gradient(90deg, #b9963f, #f0b429); }
.strength-bar > span.weak    { background: linear-gradient(90deg, #a33, #e5534b); }
.strength-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,0.35); }
.strength-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.5rem; line-height: 1.45; }

/* ---------- Genie chat ---------- */
.genie h3 .genie-sub { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-faint); font-size: 0.7rem; margin-left: 0.3rem; }
.genie-log { display: flex; flex-direction: column; gap: 0.55rem; max-height: 320px; overflow-y: auto; padding-right: 0.15rem; }
.g-msg { display: flex; gap: 0.5rem; align-items: flex-start; animation: gIn 0.28s cubic-bezier(0.2,0.9,0.3,1) both; }
.g-msg.user { justify-content: flex-end; }
.g-ava {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
  background: radial-gradient(circle at 40% 30%, #7c5cff, #3f2b9e);
  box-shadow: 0 0 12px rgba(124,92,255,0.4);
}
.g-bubble {
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 12px; border-top-left-radius: 3px;
  padding: 0.55rem 0.7rem; font-size: 0.86rem; line-height: 1.5; color: var(--text);
  max-width: 88%;
}
.g-bubble b { color: var(--gold); }
.g-bubble.user {
  background: linear-gradient(180deg, #2c6fb0, #1c3f66); border-color: rgba(89,183,255,0.4);
  color: #eaf3ff; border-top-left-radius: 12px; border-top-right-radius: 3px;
}
.g-bubble.user b { color: #fff; }
.genie-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.g-chip {
  cursor: pointer; font-size: 0.78rem; font-weight: 600;
  padding: 0.34rem 0.7rem; border-radius: 999px;
  color: var(--accent); background: rgba(89,183,255,0.1);
  border: 1px solid rgba(89,183,255,0.3);
  transition: background 0.15s, transform 0.08s;
}
.g-chip:hover { background: rgba(89,183,255,0.2); }
.g-chip:active { transform: translateY(1px); }
@keyframes gIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Floating Genie (flashing icon + pop-out card) ---------- */
/* Genie FAB pinned BOTTOM-RIGHT on every viewport. transform:none so the fixed
   pop-out card anchors to the viewport, not a transformed ancestor. */
#genie-fab-wrap {
  position: fixed; right: 16px; bottom: 16px; top: auto; transform: none;
  z-index: 60; display: flex; align-items: flex-end;
}
#genie-fab {
  position: relative;
  width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid rgba(124,92,255,0.6);
  background: radial-gradient(circle at 40% 30%, #8f6bff, #4a2fae 70%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 0 rgba(124,92,255,0.5);
  cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: genieBreathe 2.6s ease-in-out infinite;
  transition: transform 0.12s;
}
#genie-fab:hover { transform: scale(1.06); }
#genie-fab:active { transform: scale(0.96); }
#genie-fab .genie-fab-ico { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.genie-dot {
  position: absolute; top: -2px; right: -2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bad); border: 2px solid #12151a;
  box-shadow: 0 0 8px rgba(240,96,90,0.8);
}
/* gentle idle glow so the icon is noticeable but not annoying */
@keyframes genieBreathe {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 0 rgba(124,92,255,0.0); }
  50%      { box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 22px 3px rgba(124,92,255,0.45); }
}
/* stronger attention flash when there's unread advice */
#genie-fab-wrap.has-news #genie-fab { animation: genieFlash 1s ease-in-out infinite; border-color: var(--gold); }
@keyframes genieFlash {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 0 rgba(226,183,85,0.0); transform: scale(1); }
  50%      { box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 26px 5px rgba(226,183,85,0.7); transform: scale(1.07); }
}

/* FAB now lives bottom-right, so the card opens UPWARD from it, right-aligned. */
.genie-card {
  position: absolute; right: 0; bottom: calc(100% + 14px); top: auto; transform: none;
  width: 330px; max-height: 74vh; display: flex; flex-direction: column;
  /* OPAQUE panel — the old translucent --panel relied on backdrop-blur, which
     iOS Safari drops, so the felt + action dock bled through the card. */
  background: linear-gradient(180deg, #201a11 0%, #14110b 100%);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 0.9rem 1rem 1rem;
  overflow: hidden; /* clip children to the rounded panel */
  z-index: 2; /* sit above the (mobile) scrim */
  animation: genieCardIn 0.24s cubic-bezier(0.2,0.9,0.3,1) both;
}
.genie-card[hidden] { display: none; }
@keyframes genieCardIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.genie-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.genie-card-title { font-weight: 800; font-size: 0.92rem; }
.genie-card-title .genie-sub { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-faint); font-size: 0.72rem; margin-left: 0.3rem; }
.genie-close {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--panel-border); background: rgba(255,255,255,0.05);
  color: var(--text-dim); cursor: pointer; font-size: 0.9rem; line-height: 1;
}
.genie-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }
/* The log must size to its CONTENT and never be flex-shrunk to nothing.
   `flex:1 1 auto` let flex-shrink collapse it to 0 height whenever the card had
   a definite floor (mobile `min-height:120px`): the head + chips already fill
   that floor, so the shrinkable log gave up all its height and the messages —
   though present in the DOM — overflowed a zero-height scroll box and vanished.
   `flex:0 0 auto` pins it to content height; the base `.genie-log`'s
   max-height:320px + overflow-y:auto still lets a long chat scroll in place. */
.genie-card .genie-log { flex: 0 0 auto; min-height: 0; overflow-y: auto; }
.genie-card .genie-actions { flex: 0 0 auto; }

/* card-head tools: history toggle + close, kept on one compact row */
.genie-head-tools { display: flex; align-items: center; gap: 0.35rem; }
.genie-hist-btn {
  flex: none; height: 26px; padding: 0 0.6rem; border-radius: 999px;
  border: 1px solid rgba(124,92,255,0.35); background: rgba(124,92,255,0.12);
  color: #cdbcff; cursor: pointer; font-size: 0.72rem; font-weight: 700;
  white-space: nowrap; line-height: 1;
}
.genie-hist-btn:hover { background: rgba(124,92,255,0.22); }
.genie-hist-btn.active { background: rgba(124,92,255,0.3); color: #efe9ff; border-color: rgba(124,92,255,0.6); }
.genie-mute {
  flex: none; height: 26px; padding: 0 0.6rem; border-radius: 999px;
  border: 1px solid var(--panel-border); background: rgba(255,255,255,0.05);
  color: var(--text-dim); cursor: pointer; font-size: 0.72rem; font-weight: 700;
  white-space: nowrap; line-height: 1;
  transition: color .15s, border-color .15s, background .15s;
}
.genie-mute:hover { background: rgba(255,255,255,0.12); color: var(--text); }
.genie-mute.is-muted { color: #ff6b81; border-color: rgba(255,107,129,0.5); background: rgba(255,107,129,0.12); }

/* ---------- Genie history: my call vs yours, last ~10 hands ---------- */
.genie-history {
  /* content-sized (see .genie-card .genie-log) — `flex:1` collapsed it to 0 in
     the same way; max-height + overflow keeps a long history scrollable. */
  flex: 0 0 auto; min-height: 0; max-height: 320px; overflow-y: auto; padding-right: 0.15rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.genie-history[hidden] { display: none; }
.gh-intro { font-size: 0.76rem; color: var(--text-dim); margin-bottom: 0.15rem; line-height: 1.4; }
.gh-empty { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; padding: 0.4rem 0; }
.gh-row {
  border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--panel-solid);
  border-left-width: 3px;
  padding: 0.4rem 0.55rem;
  animation: gIn 0.24s cubic-bezier(0.2,0.9,0.3,1) both;
}
.gh-row.win  { border-left-color: var(--good); }
.gh-row.loss { border-left-color: var(--bad); }
.gh-row.push { border-left-color: var(--text-faint); }
.gh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.gh-hand { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); font-family: var(--font-num); }
.gh-net { font-size: 0.82rem; font-weight: 800; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.gh-net.win { color: var(--good); }
.gh-net.loss { color: var(--bad); }
.gh-net.push { color: var(--text-dim); }
.gh-line { font-size: 0.8rem; line-height: 1.45; color: var(--text); margin-top: 0.18rem; }
.gh-line b { color: var(--gold); }
.gh-tag { font-weight: 900; margin-right: 0.15rem; }
.gh-tag.ok { color: var(--good); }
.gh-tag.dev { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  #genie-fab, #genie-fab-wrap.has-news #genie-fab { animation: none; }
}
@media (max-width: 700px) {
  /* transform:none so the fixed card anchors to the viewport, not the wrap
     (a transformed ancestor would become the card's containing block).
     Bottom-right on phones too, clear of the safe-area inset. */
  #genie-fab-wrap { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); top: auto; transform: none; }
  #genie-fab { width: 52px; height: 52px; }
  #genie-fab .genie-fab-ico { font-size: 1.5rem; }
  /* Sheet ANCHORED just above the FAB (bottom-right), growing UPWARD to fit its
     content. A centered `top:50%` sheet let the flex column ignore the log's
     height, so the card stuck at its min-height and clipped the advice — only
     "I'd fold here." showed. Bottom-anchoring (no min-height) makes the card size
     to content up to max-height, and the log fills + scrolls only if it's very
     long, so the full read is always visible. */
  .genie-card {
    position: fixed; right: 12px; left: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom)); top: auto; transform: none;
    width: auto; max-height: 62vh; min-height: 0;
    padding: 0.9rem 0.95rem 1rem;
  }
  .genie-card .genie-log { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  @keyframes genieCardIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  /* dim scrim behind the opened card so it reads as a focused sheet, not a
     bar floating over the felt (visual only — taps still reach the felt/close) */
  #genie-fab-wrap.open::before {
    content: ""; position: fixed; inset: 0; z-index: 1;
    background: rgba(6, 8, 12, 0.62); pointer-events: none;
    animation: genieScrimIn 0.24s ease both;
  }
  @keyframes genieScrimIn { from { opacity: 0; } to { opacity: 1; } }
}

.coach .verdict {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 800; font-size: 0.86rem;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  margin-bottom: 0.55rem;
}
.coach .verdict.rec { background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(240,180,41,0.3); }
.coach .verdict.good { background: var(--good-bg); color: var(--good); border: 1px solid rgba(86,200,119,0.3); }
.coach .verdict.bad { background: var(--bad-bg); color: var(--bad); border: 1px solid rgba(240,96,90,0.3); }
.coach .rec-line { font-size: 0.98rem; margin-bottom: 0.35rem; }
.coach .rec-line strong { color: var(--gold); }
.coach .reason { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
.coach .feedback {
  margin-top: 0.6rem; padding-top: 0.6rem;
  border-top: 1px solid var(--stroke);
  font-size: 0.85rem;
}

/* metric grid (outs / stats) */
.metrics { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.8rem; font-size: 0.88rem; align-items: center; }
.metrics .k { color: var(--text-dim); }
.metrics .v { font-weight: 800; font-family: var(--font-num); color: var(--text); text-align: right; }
.metrics .v.gold { color: var(--gold); }
.metrics .v.good { color: var(--good); }
.metrics .v.bad { color: var(--bad); }
/* contextual band note under a judged stat (VPIP / Aggression) */
.metrics .stat-note {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-dim);
  margin-top: -0.28rem;
}

/* equity meter */
.meter { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 0.15rem 0 0.1rem; grid-column: 1 / -1; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transition: width 0.3s; }
.meter.equity > span { background: linear-gradient(90deg, #2fa863, var(--good)); }

/* combined Analytics panel: sub-section headers */
.analytics-panel .subhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 0.5rem;
}
.analytics-panel .subhead-sep {
  margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--stroke);
}
.analytics-panel .subhead-note {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: none; color: var(--text-dim);
}

/* "what are my outs" breakdown — the actual out cards, grouped by what they make */
.outs-break { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.4rem; margin: 0.15rem 0 0.1rem; }
.outs-break.outs-none { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }
.outs-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.og-label { font-size: 0.72rem; color: var(--text-dim); min-width: 6.6rem; }
.og-label b { color: var(--gold); font-family: var(--font-num); }
.og-cards { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ocard {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; padding: 0.05rem 0.28rem;
  font-family: var(--font-num); font-weight: 800; font-size: 0.74rem; line-height: 1.5;
  color: #e9eef5; background: #1a2130;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 5px;
}
.ocard.red { color: #ff8088; }

.log {
  max-height: 210px; overflow-y: auto;
  font-size: 0.82rem; color: var(--text-dim);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.log div { padding: 0.15rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.log div:last-child { color: var(--text); }

/* ============================================================
   LEARN PAGE + WIDGETS
   ============================================================ */
.page-head { margin-bottom: 1.4rem; }
.page-head h1 { margin: 0 0 0.3rem; font-size: 1.9rem; }
.page-head h1 .grad {
  background: linear-gradient(90deg, var(--gold), #fff, var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-head p { color: var(--text-dim); max-width: 720px; }

.widget {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-md);
}
.widget > h2 { margin: 0 0 0.3rem; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.widget > .sub { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 1.1rem; }

/* range chart */
.range-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 3px;
  max-width: 620px;
  margin: 0 auto;
}
.range-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(0.5rem, 1.4vw, 0.72rem);
  font-weight: 700;
  cursor: pointer;
  color: #0c0c0c;
  border: 1px solid rgba(0,0,0,0.25);
  transition: transform 0.08s, box-shadow 0.1s;
  user-select: none;
}
.range-cell:hover { transform: scale(1.14); z-index: 2; box-shadow: 0 0 0 2px #fff, var(--shadow-md); }
.range-cell.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); z-index: 3; }

.range-legend { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1rem; font-size: 0.8rem; color: var(--text-dim); }
.range-legend .lg { display: flex; align-items: center; gap: 0.35rem; }
.range-legend .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.3); }

.range-detail {
  margin-top: 1.1rem;
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  min-height: 82px;
}
.range-detail .hand-title { font-size: 1.2rem; font-weight: 800; }
.range-detail .hand-title .suited { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.range-detail .rd-metrics { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.5rem; }
.range-detail .rd-metrics .k { color: var(--text-dim); font-size: 0.78rem; }
.range-detail .rd-metrics .v { font-weight: 800; font-family: var(--font-num); }

/* calculator widget */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.calc-field label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 0.3rem; font-weight: 600; }
.calc-out {
  margin-top: 1.2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem;
}
.calc-tile {
  background: var(--bg-1); border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); padding: 0.9rem;
  text-align: center;
}
.calc-tile .ct-val { font-size: 1.55rem; font-weight: 800; font-family: var(--font-num); }
.calc-tile .ct-label { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.15rem; }
.calc-verdict {
  margin-top: 1rem; padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  font-weight: 700; text-align: center;
}
.calc-verdict.call { background: var(--good-bg); color: var(--good); border: 1px solid rgba(86,200,119,0.3); }
.calc-verdict.fold { background: var(--bad-bg); color: var(--bad); border: 1px solid rgba(240,96,90,0.3); }

.outs-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.outs-chip {
  cursor: pointer; user-select: none;
  padding: 0.32rem 0.7rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600;
  background: rgba(255,255,255,0.05); border: 1px solid var(--panel-border);
  color: var(--text-dim);
  transition: all 0.12s;
}
.outs-chip:hover { background: rgba(255,255,255,0.1); }
.outs-chip.on { background: rgba(89,183,255,0.16); border-color: var(--accent-dim); color: var(--accent); }

/* quiz widget */
.quiz-scenario {
  background: var(--bg-1); border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.quiz-cards { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin: 0.4rem 0 0.7rem; }
.quiz-cards .lbl { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.quiz-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.88rem; }
.quiz-meta b { color: var(--gold); font-family: var(--font-num); }
.quiz-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.quiz-actions .btn { flex: 1 1 auto; min-width: 100px; }
.quiz-feedback { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); font-size: 0.9rem; display: none; }
.quiz-feedback.show { display: block; animation: rise 0.3s ease both; }
.quiz-feedback.correct { background: var(--good-bg); border: 1px solid rgba(86,200,119,0.3); }
.quiz-feedback.wrong { background: var(--bad-bg); border: 1px solid rgba(240,96,90,0.3); }
.quiz-feedback .fb-title { font-weight: 800; margin-bottom: 0.3rem; }
.quiz-score { display: flex; gap: 1.4rem; margin-top: 0.4rem; font-size: 0.86rem; color: var(--text-dim); }
.quiz-score b { color: var(--text); font-family: var(--font-num); }

/* ============================================================
   RESOURCES / REFERENCE PAGE
   ============================================================ */
.prose { max-width: 860px; margin: 0 auto; }
.prose h2 { color: var(--gold); border-bottom: 1px solid var(--stroke); padding-bottom: 0.35rem; margin-top: 2.4rem; }
.prose h3 { color: var(--accent); margin-top: 1.6rem; }
.prose p, .prose li { line-height: 1.68; }
.prose code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-family: var(--font-num); font-size: 0.88em; }
.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.9rem; }
.prose th, .prose td { border: 1px solid var(--stroke); padding: 0.5rem 0.7rem; text-align: left; }
.prose th { background: var(--bg-2); color: var(--gold); }
.prose tbody tr:nth-child(even), .prose tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.callout {
  background: var(--panel); border-left: 4px solid var(--gold);
  padding: 0.9rem 1.1rem; margin: 1.2rem 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.callout.accent { border-left-color: var(--accent); }
.sources { font-size: 0.82rem; color: var(--text-faint); }

.toc {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.5rem;
}
.toc strong { display: block; margin-bottom: 0.4rem; color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.toc a { display: inline-block; margin: 0.15rem 0.7rem 0.15rem 0; font-size: 0.9rem; }

.footer-note { text-align: center; color: var(--text-faint); font-size: 0.82rem; margin: 2.5rem 0 1rem; }

/* scroll containers never push page width */
.scroll-x { overflow-x: auto; }

/* ---------- animations ---------- */
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-14px) rotate(-6deg) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 2px rgba(226,183,85,0.4), 0 0 18px rgba(226,183,85,0.35); }
  50%      { box-shadow: 0 0 0 2px rgba(226,183,85,0.6), 0 0 30px rgba(226,183,85,0.6); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; }
  .flipper { transition: none; }
  .fly-chip { display: none; }
}

/* ============================================================
   MOBILE (touch-first) — portrait table, sticky action dock
   ============================================================ */
button, select, input, .range-cell, .outs-chip {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 700px) {
  main { padding: 0.7rem 0.7rem calc(0.7rem + env(safe-area-inset-bottom)); }

  /* Two compact rows on phones: row 1 = brand + a FULLY READABLE wallet, row 2 =
     the nav tabs. Cramming it onto one line shrank the wallet to an unreadable
     nub — wrapping keeps the bankroll legible while staying tight. */
  .app-header { padding: 0.5rem 0.8rem; gap: 0.4rem 0.6rem; min-height: 0; }
  .app-header .brand { font-size: 0.98rem; flex: 1 1 auto; min-width: 0; }
  .app-header .brand .grad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-header .brand .logo-mark { width: 22px; height: 22px; }
  /* wallet never shrinks — the amount always shows in full */
  .hdr-tools { flex: 0 0 auto; }
  .app-header .ga-wallet { flex: 0 0 auto; padding: 5px 11px 5px 9px; gap: 6px; }
  .app-header .ga-wallet-lbl { display: none; } /* drop the word "Bankroll", keep the $amount */
  .app-header .ga-wallet-amt { font-size: 14px; }
  /* nav drops to its own full-width second row, centred */
  .app-header nav { flex: 1 0 100%; justify-content: center; gap: 0.3rem; flex-wrap: nowrap; }
  .app-header nav a { font-size: 0.82rem; padding: 0.3rem 0.7rem; }

  /* showcase cards scale down but stay the centrepiece — and the whole
     post-hand card is tightened so it + the Deal Next Hand button clear the
     fold on a phone screen without scrolling */
  .hand-result.showcase { padding: 0.75rem 0.8rem 0.7rem; }
  .sc-card { --w: 42px; }
  .sc-cards { gap: 0.3rem; margin: 0.5rem 0 0.45rem; }
  .sc-rank { font-size: 1.15rem; margin-top: 0.25rem; }
  .sc-sub { font-size: 0.78rem; }
  .sc-payline { font-size: 0.92rem; margin-top: 0.2rem; }
  .sc-payline.you { font-size: 1.05rem; }
  .sc-losers { margin-top: 0.45rem; padding-top: 0.4rem; gap: 0.22rem; }
  .sc-loser { font-size: 0.74rem; }
  .sc-loser .card.small { --w: 22px; }
  .sc-meta { margin-top: 0.35rem; }
  .sc-meta .detail { font-size: 0.78rem; }
  .next-hand-btn { padding: 0.6rem 1.5rem; }

  .setup-hero h1 { font-size: 1.55rem; }
  .setup-card { padding: 1.1rem; }

  /* Tighter vertical rhythm on phones so the felt + result/dock fit one
     screen: trim the gaps above the layout and the felt. */
  /* extra top room so the top row of seats (which ride above the felt) clears
     the sticky two-row header instead of tucking behind it */
  .game-layout { margin-top: 1.6rem; }

  /* --- portrait felt: flatter + shorter than before, so the post-hand
     showcase and the Deal Next Hand button clear the fold --- */
  .table-wrap {
    aspect-ratio: 3.9 / 3.0;
    min-height: 296px;
    margin-top: 0.4rem;
    border-width: 9px;
    border-radius: 48% / 42%;
  }
  .table-felt-logo { font-size: 1rem; letter-spacing: 0.2em; }
  .table-center { width: 88%; top: 47%; }
  .pot-pill { font-size: 0.88rem; padding: 0.2rem 0.7rem; margin-bottom: 0.4rem; }
  .card { --w: 44px; }
  .card.small { --w: 30px; }
  .card-slot { --w: 42px; }
  .card-slot.small { --w: 27px; }
  .board-cards { gap: 0.3rem; min-height: 58px; }
  .hole { min-height: calc(27px * 1.4); gap: 3px; margin: 0.18rem 0; }
  .street-badge { margin-top: 0.35rem; font-size: 0.62rem; }

  .seat { width: 88px; }
  .seat .seat-inner { padding: 0.26rem 0.26rem 0.34rem; border-radius: 10px; }
  .seat .avatar { width: 20px; height: 20px; font-size: 0.68rem; margin-bottom: 0.1rem; }
  .seat .seat-name { font-size: 0.66rem; }
  .seat .seat-role { font-size: 0.54rem; }
  .seat .seat-cards { min-height: 38px; margin: 0.18rem 0; }
  .seat .seat-stack { font-size: 0.7rem; }
  .seat .bet-area { top: -20px; gap: 3px; }
  .seat-3 .bet-area, .seat-4 .bet-area { bottom: -20px; }
  .seat .bet-area .bet-amt { font-size: 0.62rem; }
  .seat .pchip { width: 12px; height: 12px; }
  .chip-stack .pchip { margin-left: -7px; }
  .seat .action-bubble { font-size: 0.62rem; top: -12px; }
  .seat .dealer-chip { width: 18px; height: 18px; font-size: 0.58rem; }

  /* portrait seat map: human bottom, two left, two top, two right */
  .seat-0 { left: 50%; top: 87%; }
  .seat-1 { left: 12%; top: 76%; }
  .seat-2 { left: 8%;  top: 36%; }
  .seat-3 { left: 30%; top: 6%; }
  .seat-4 { left: 70%; top: 6%; }
  .seat-5 { left: 92%; top: 36%; }
  .seat-6 { left: 88%; top: 76%; }

  /* --- action dock: sits in the redesigned "buttons below the table" zone
     (normal flow, not pinned to the very bottom), so the whole play stack —
     table, buttons, hand strength — fits one screen and the bottom-right Genie
     FAB never covers the buttons. --- */
  .action-dock {
    margin-top: 0;
    padding: 0.7rem 0.75rem;
    background: rgba(16, 21, 29, 0.94);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), var(--shadow-md);
  }
  /* compact hand-strength card on phones so it clears the fold under the dock */
  .strength-panel { padding: 0.7rem 0.85rem; }
  .strength-pct { font-size: 1.4rem; }
  .action-main { gap: 0.45rem; }
  .action-main .btn { min-height: 48px; font-size: 1rem; min-width: 72px; }
  .bet-presets .btn { min-height: 40px; padding: 0.4rem 0.75rem; }
  .bet-amount-box { min-height: 40px; width: 84px; }
  input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
  input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
  .action-hint { font-size: 0.78rem; margin-bottom: 0.45rem; }

  .hand-result .headline { font-size: 0.98rem; }
  .next-hand-btn { min-height: 46px; }

  .panel { padding: 0.8rem 0.9rem; }
  .log { max-height: 150px; }

  /* --- Learn page --- */
  .widget { padding: 1rem; }
  .scroll-x .range-grid { min-width: 460px; }   /* keep cells tappable; container scrolls */
  .quiz-actions .btn { min-height: 48px; }
  .quiz-cards .card { --w: 46px; }
  .calc-tile .ct-val { font-size: 1.25rem; }
}

/* very narrow phones */
@media (max-width: 390px) {
  .card { --w: 38px; }
  .card-slot { --w: 40px; }
  .card-slot.small { --w: 25px; }
  .hole { min-height: calc(25px * 1.4); }
  .seat { width: 82px; }
  /* shorter felt so the completed-hand showcase + Deal Next Hand stay on-screen */
  .table-wrap { min-height: 292px; }
  .action-main .btn { min-width: 64px; font-size: 0.92rem; }
  .sc-card { --w: 38px; }
}

/* ---------- Setup visuals: venue reel + table cards ---------- */
/* the real <select>s stay in the DOM (game logic + bankroll gating read them)
   but the player interacts with the cards */
.sr-select {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  margin: 0; padding: 0; border: 0;
}
.venue-reel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}
.venue-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.9rem 0.8rem 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, #141b26, #0d121a);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
/* cinematic sheen: a slow light sweep across each marquee */
.venue-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 246, 221, 0.07) 45%, transparent 60%);
  background-size: 260% 100%;
  animation: venueSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
.venue-card:nth-child(2)::after { animation-delay: 2.7s; }
@keyframes venueSheen {
  0%, 55% { background-position: 130% 0; }
  85%, 100% { background-position: -130% 0; }
}
.venue-card:hover { transform: translateY(-2px); border-color: rgba(226, 183, 85, 0.45); }
.venue-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 22px rgba(226, 183, 85, 0.22);
  background: linear-gradient(180deg, #1a2130, #10151d);
}
.vc-marquee { width: 56px; height: 56px; }
.vc-marquee svg { width: 100%; height: 100%; animation: venueFloat 4.2s ease-in-out infinite; }
.venue-card:nth-child(2) .vc-marquee svg { animation-delay: 1.4s; }
@keyframes venueFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.vc-name { font-weight: 800; font-size: 0.92rem; margin-top: 0.2rem; }
.vc-tag { font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.04em; }
.venue-card.selected .vc-name { color: var(--gold); }

.stake-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0.55rem;
}
.stake-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.22rem;
  padding: 0.7rem 0.5rem 0.6rem;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.stake-card:hover:not(.locked) { transform: translateY(-2px); border-color: rgba(226, 183, 85, 0.4); }
.stake-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(226, 183, 85, 0.2);
  background: rgba(226, 183, 85, 0.06);
}
.stake-card.locked { opacity: 0.45; cursor: not-allowed; filter: saturate(0.5); }
.sc-chip {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-num); font-weight: 800; font-size: 0.78rem; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.sc-chip i {
  position: absolute; inset: 3px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.4);
}
.sc-red    { background: radial-gradient(circle at 38% 30%, #d95c52, #8e2c24 75%); }
.sc-black  { background: radial-gradient(circle at 38% 30%, #4a5261, #171b22 75%); }
.sc-purple { background: radial-gradient(circle at 38% 30%, #8b6bc4, #4a2f7e 75%); }
.sc-gold   { background: radial-gradient(circle at 38% 30%, #f0cd75, #9a7a3a 75%); color: #2a1e05; text-shadow: none; }
.sc-blinds { font-family: var(--font-num); font-weight: 800; font-size: 0.95rem; }
.stake-card.selected .sc-blinds { color: var(--gold); }
.sc-buyin { font-size: 0.64rem; color: var(--text-dim); text-align: center; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
  .venue-card::after, .vc-marquee svg { animation: none; }
}

/* ============================================================
   Hand replay overlay — street-by-street walkthrough of the
   last completed hand (opened from the Analytics panel).
   ============================================================ */
.replay-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 9, 14, 0.72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.replay-overlay[hidden] { display: none; }
.replay-card {
  width: min(440px, 100%);
  max-height: min(80vh, 640px);
  display: flex; flex-direction: column;
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.replay-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--stroke);
}
.replay-title { font-weight: 800; font-size: 0.95rem; color: var(--gold); }
.replay-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 1rem; line-height: 1;
  padding: 0.2rem 0.35rem; border-radius: 6px;
}
.replay-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.replay-body { flex: 1; overflow-y: auto; padding: 0.85rem 0.95rem; }
.replay-body .rp-label {
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 0.6rem 0 0.3rem;
}
.replay-body .rp-label:first-child { margin-top: 0; }
.replay-body .rp-cards { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.35rem; }
.replay-body .rp-act {
  font-size: 0.84rem; color: var(--text-dim);
  padding: 0.14rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.replay-body .rp-act:last-child { border-bottom: none; }
.replay-body .rp-act b { color: var(--text); font-weight: 700; }
.replay-body .rp-none { font-size: 0.8rem; font-style: italic; color: var(--text-faint); }
.replay-body .rp-sd-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.22rem 0; }
.replay-body .rp-sd-row .rp-cards { margin-bottom: 0; }
.replay-body .rp-sd-row .rp-sd-name {
  font-size: 0.84rem; font-weight: 700;
  min-width: 92px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.replay-body .rp-sd-row.winner .rp-sd-name { color: var(--gold); }
.replay-body .rp-win { font-size: 0.86rem; font-weight: 700; color: var(--good); padding: 0.1rem 0; }
.replay-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.95rem;
  border-top: 1px solid var(--stroke);
}
.replay-foot .btn { font-size: 0.84rem; padding: 0.42rem 0.9rem; }
.replay-foot .replay-step {
  font-size: 0.74rem; font-weight: 700;
  color: var(--text-dim);
  font-family: var(--font-num);
}

/* ============================================================
   PRICE line — pot-odds math spelled out by the action buttons
   ("Need 19% to call $6 · you have ~15% → fold")
   ============================================================ */
#price-tile[hidden] { display: none !important; }
.price-tile {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0 0 0.6rem; padding: 0.45rem 0.65rem;
  border: 1px solid var(--panel-border); border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.83rem; line-height: 1.35;
}
.price-tile.ok { border-color: rgba(86, 200, 119, 0.5); background: var(--good-bg); }
.price-tile.no { border-color: rgba(240, 96, 90, 0.5); background: var(--bad-bg); }
.price-tile .pt-tag {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); padding: 0.12rem 0.45rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); flex: 0 0 auto;
}
.price-tile .pt-math { flex: 1 1 140px; color: var(--text); }
.price-tile .pt-math b { font-family: var(--font-num); color: #fff6dd; }
.price-tile .pt-basis { color: var(--text-dim); font-size: 0.92em; }
.price-tile .pt-verdict {
  flex: 0 0 auto; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.8rem;
}
.price-tile .pt-verdict.ok { color: var(--good); }
.price-tile .pt-verdict.no { color: var(--bad); }

/* ============================================================
   In-character opponent reactions at the result (coloured by archetype)
   ============================================================ */
.seat-react {
  position: absolute; left: 50%; bottom: calc(100% + 2px);
  transform: translateX(-50%);
  max-width: 150px; white-space: nowrap;
  padding: 0.22rem 0.55rem; border-radius: 10px;
  font-size: 0.66rem; font-weight: 700; line-height: 1.2;
  background: linear-gradient(180deg, rgba(20, 22, 30, 0.98), rgba(12, 14, 20, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
  pointer-events: none; z-index: 22;
  animation: seatReactIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* small pointer tail */
.seat-react::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(12, 14, 20, 0.98);
}
.seat-react.win { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(226, 183, 85, 0.35); }
.seat-react.rock    { border-color: #b8b8c0; color: #e6e6ee; }
.seat-react.tag     { border-color: #5fa8ff; color: #bfe0ff; }
.seat-react.lag     { border-color: #b388ff; color: #e2d3ff; }
.seat-react.station { border-color: #2dd4bf; color: #b6f2e8; }
.seat-react.out { animation: seatReactOut 0.5s ease forwards; }
@keyframes seatReactIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes seatReactOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .seat-react { animation-duration: 0.001s; }
}

/* ============================================================
   Per-seat stats popup (tap an opponent — observed VPIP / aggression)
   ============================================================ */
.seat.tappable { cursor: pointer; }
.seat-stat-pop {
  position: fixed; z-index: 120; width: 210px;
  padding: 0.7rem 0.8rem 0.6rem;
  background: linear-gradient(180deg, rgba(22, 26, 34, 0.99), rgba(13, 16, 22, 0.99));
  border: 1px solid var(--panel-border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
  color: var(--text); font-size: 0.8rem;
  animation: rise 0.22s ease both;
}
.seat-stat-pop[hidden] { display: none; }
.seat-stat-pop .ssp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.seat-stat-pop .ssp-name { font-weight: 800; font-size: 0.92rem; }
.seat-stat-pop .ssp-badge {
  font-size: 0.62rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18); white-space: nowrap;
}
.seat-stat-pop .ssp-badge.rock    { border-color: #b8b8c0; }
.seat-stat-pop .ssp-badge.tag     { border-color: #5fa8ff; }
.seat-stat-pop .ssp-badge.lag     { border-color: #b388ff; }
.seat-stat-pop .ssp-badge.station { border-color: #2dd4bf; }
.seat-stat-pop .ssp-style {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  margin: 0.15rem 0 0.5rem;
}
.seat-stat-pop .ssp-style.rock    { color: #c7c7cf; }
.seat-stat-pop .ssp-style.tag     { color: #7fbcff; }
.seat-stat-pop .ssp-style.lag     { color: #c4a6ff; }
.seat-stat-pop .ssp-style.station { color: #63e0d1; }
.seat-stat-pop .ssp-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 0.18rem 0.5rem;
  padding: 0.4rem 0; border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke);
}
.seat-stat-pop .ssp-k { color: var(--text-dim); }
.seat-stat-pop .ssp-v { font-family: var(--font-num); font-weight: 800; text-align: right; color: var(--gold); }
.seat-stat-pop .ssp-note { margin-top: 0.45rem; color: var(--text-dim); font-size: 0.74rem; line-height: 1.4; }
.seat-stat-pop .ssp-foot { margin-top: 0.4rem; color: var(--text-faint); font-size: 0.64rem; }
.seat-stat-pop .ssp-close {
  position: absolute; top: 0.35rem; right: 0.4rem;
  background: none; border: none; color: var(--text-dim); font-size: 0.9rem;
  cursor: pointer; line-height: 1; padding: 0.15rem;
}
.seat-stat-pop .ssp-close:hover { color: var(--text); }

/* ============================================================
   Phone-width: your hole cards + the board must stay READABLE and not fight
   the surrounding seats for space (ask #7). Bump YOUR seat's cards up (bots
   stay compact) and give the board a touch more room.
   ============================================================ */
@media (max-width: 700px) {
  /* your own cards, bottom-centre, are the ones you actually read every hand */
  .seat-0 .hole { min-height: calc(36px * 1.4); gap: 4px; }
  .seat-0 .card-slot.small { --w: 36px; }
  .seat-0 .seat-inner { padding: 0.3rem 0.34rem 0.4rem; }
  /* keep the community board legible and on one row */
  .board-cards { gap: 0.28rem; flex-wrap: nowrap; }
  .price-tile { font-size: 0.78rem; padding: 0.4rem 0.55rem; }
}
@media (max-width: 390px) {
  .seat-0 .hole { min-height: calc(32px * 1.4); }
  .seat-0 .card-slot.small { --w: 32px; }
  .card-slot { --w: 36px; }  /* board cards a hair smaller so 5 fit one row */
}