/* ═══════════════════════════════════════════════════════════════════
   MP Poker — «Le Cercle Privé» — portrait table skin
   Spec: docs/poker-plan/IMPLEMENTATION.md §6.1 · design/poker-plan.md §5.3/§6/§7.3
   Realism reference: docs/poker-plan/index.html (the approved mockup —
   every recipe below is extracted from it: procedural felt, walnut
   rail, 63:88 paper cards, conic-gradient chips, seat plates).

   HARD HOUSE RULE: every class is prefixed mpk- (a global .card class
   exists in style.css and collides). Everything is scoped to
   #mp-poker-table-screen; the .active scope on the display rule is
   not optional (`display:flex` on an #id selector beats
   `.screen { display:none }`).

   Vertical budget at 375×812 (§5.3):
     safe-top 47 · header 36 · table box 355×504 · hero strip 95
     · action bar 62 · safe-bottom 34 · ~34 slack absorbed as margins.
   ═══════════════════════════════════════════════════════════════════ */

#mp-poker-table-screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* --mpk-vh: measured available height, set by mp-poker-table.js
     from Telegram viewportStableHeight/innerHeight minus whatever
     app chrome overlaps the screen (real Telegram webviews are often
     only ~620–740 px tall — the static 812 budget never fits there) */
  height: var(--mpk-vh, var(--gc-viewport-h, 100dvh));
  /* theme.css ships `.screen { min-height: calc(100vh - …) }` — it must
     not stretch this screen past the measured height on short webviews */
  min-height: 0;
  padding: var(--fym-safe-top, env(safe-area-inset-top, 0px)) 0
           var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background:
    radial-gradient(150% 100% at 50% 0%, #18130e 0%, #0b0806 55%, #070503 100%);
  color: #d8d2c6;
}

/* absolute floor: below ~560 px even the scaled layout can't keep
   every control on screen — vertical scroll as a last resort (the JS
   toggles .mpk-scroll; 620+ always fits scroll-free) */
#mp-poker-table-screen.mpk-scroll.active { overflow-y: auto; }
#mp-poker-table-screen.mpk-scroll .mpk-root {
  flex: 1 0 auto;
  min-height: 560px;
}

#mp-poker-table-screen .mpk-root {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: 402px;
  min-height: 0;
  overflow: hidden;
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;

  --mpk-gold: #c9a13b;
  --mpk-gold-hi: #e8c86a;
  --mpk-ink: #d8d2c6;
  --mpk-muted: #8b8271;
  --mpk-plate-ink: #cfc8ba;
  --mpk-oxb: #7a2f35;
  --mpk-red: #c04038;
  --mpk-blk: #232a33;
  --mpk-green: #5f9f7a;
  --mpk-amber: #e8c86a;
  --mpk-danger: #cf5f52;
}

/* ── 1 · header (36 px) ─────────────────────────────────────── */

#mp-poker-table-screen .mpk-head {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  width: 100%;
}
#mp-poker-table-screen .mpk-back {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #b8ae9c;
  cursor: pointer;
}
#mp-poker-table-screen .mpk-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #cfc5b2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#mp-poker-table-screen .mpk-title i {
  font-style: normal;
  color: var(--mpk-muted);
  font-weight: 700;
}
#mp-poker-table-screen .mpk-fair-slot {
  flex: 0 0 auto;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--mpk-gold);
}
#mp-poker-table-screen .mpk-fair-ph { opacity: 0.75; display: flex; }

/* ── 2 · table zone (355 × 504) ───────────────────────────────
   The 355×504 box is load-bearing (every seat-anchor / bet-vector /
   marker computation assumes it), so it is NEVER re-laid-out. On
   short viewports the whole zone scales inside .mpk-tzscale:
   .mpk-stage is the flex slot that absorbs the leftover height, JS
   measures its box and sets --mpk-tz-scale = min(1, w/355, h/504).
   translate(-50%,-50%) + scale about the box center keeps the scaled
   stage centered in the slot. Header, hero strip, action bar and the
   bottom sheets stay unscaled and pinned inside the viewport. */

#mp-poker-table-screen .mpk-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
#mp-poker-table-screen .mpk-tzscale {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 355px;
  height: 504px;
  transform: translate(-50%, -50%) scale(var(--mpk-tz-scale, 1));
}
#mp-poker-table-screen .mpk-tz {
  position: relative;
  width: 355px;
  height: 504px;
}

/* walnut rail — capsule ring, gold pinline where it meets felt */
#mp-poker-table-screen .mpk-rail {
  position: absolute;
  inset: 0;
  border-radius: 178px;
  background:
    radial-gradient(120% 60% at 35% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(160deg, #5a3d28 0%, #46301f 45%, #3a2417 100%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5);
}

/* procedural felt — radial gradient + static feTurbulence noise tile
   (240 px, 6 % opacity, overlay blend, pre-rendered data-URI — never a
   live filter) + inner vignette. One light source, top-left. */
#mp-poker-table-screen .mpk-felt {
  position: absolute;
  inset: 15px;
  border-radius: 164px;
  background:
    radial-gradient(ellipse 90% 60% at 38% 20%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(120% 90% at 50% 38%, #2e6b4f 0%, #1d4a36 55%, #10271d 100%);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.45), 0 0 0 3px rgba(0, 0, 0, 0.4);
}
#mp-poker-table-screen .mpk-felt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.06;
}
#mp-poker-table-screen .mpk-felt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 90px 30px rgba(0, 0, 0, 0.55), inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
#mp-poker-table-screen .mpk-beltline {
  position: absolute;
  inset: 34px;
  border-radius: 140px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
#mp-poker-table-screen .mpk-wm {
  position: absolute;
  left: 50%;
  top: 328px;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0.08;
  pointer-events: none;
  color: #e8d9b0;
}
#mp-poker-table-screen .mpk-wm b {
  display: block;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
}
#mp-poker-table-screen .mpk-wm span {
  font-size: 7px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

/* ── 3 · cards — 63:88, paper gradient, white inset, micro-bevel ── */

#mp-poker-table-screen .mpk-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff, #f4f1ea);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 1px rgba(0, 0, 0, 0.10),
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.28),
    1px 4px 10px rgba(0, 0, 0, 0.35);
}
#mp-poker-table-screen .mpk-card .mpk-idx {
  position: absolute;
  top: 3px;
  left: 4px;
  line-height: 0.95;
  text-align: center;
  font-family: Georgia, serif;
  font-weight: 700;
}
#mp-poker-table-screen .mpk-card .mpk-idx svg { display: block; margin: 1px auto 0; }
#mp-poker-table-screen .mpk-card .mpk-idx.mpk-br {
  top: auto;
  left: auto;
  bottom: 3px;
  right: 4px;
  transform: rotate(180deg);
}
#mp-poker-table-screen .mpk-card .mpk-pip {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}
#mp-poker-table-screen .mpk-card .mpk-pip svg { display: block; }
#mp-poker-table-screen .mpk-card.mpk-red { color: var(--mpk-red); }
#mp-poker-table-screen .mpk-card.mpk-blk { color: var(--mpk-blk); }

#mp-poker-table-screen .mpk-c-board { width: 48px; height: 67px; }
#mp-poker-table-screen .mpk-c-board .mpk-idx { font-size: 13px; }
#mp-poker-table-screen .mpk-c-hero { width: 66px; height: 92px; border-radius: 4px; }
#mp-poker-table-screen .mpk-c-hero .mpk-idx { font-size: 20px; top: 4px; left: 6px; }
#mp-poker-table-screen .mpk-c-hero .mpk-idx.mpk-br {
  top: auto; left: auto; bottom: 4px; right: 6px;
}
#mp-poker-table-screen .mpk-c-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
}
#mp-poker-table-screen .mpk-c-mini { width: 22px; height: 31px; border-radius: 2.5px; }
/* face-up minis: one oversized centered index (rank over suit) */
#mp-poker-table-screen .mpk-c-mini .mpk-idx {
  position: absolute;
  inset: 0;
  top: 2px;
  left: 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* face-down — the oxblood + gold lattice back */
#mp-poker-table-screen .mpk-card.mpk-back::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.30) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.30) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #56242a, #3d161b);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}
#mp-poker-table-screen .mpk-c-mini.mpk-back::before { inset: 2px; border-radius: 1.5px; }

/* ghost slot — board position with nothing in it (between hands) */
#mp-poker-table-screen .mpk-card.mpk-ghost {
  background: rgba(0, 0, 0, 0.16);
  border: 1px dashed rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

/* showdown emphasis: winning five highlighted, dead cards dim */
#mp-poker-table-screen .mpk-card.mpk-c-hi {
  box-shadow:
    0 0 0 1.5px rgba(232, 200, 106, 0.85),
    0 0 10px rgba(232, 200, 106, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 2px rgba(0, 0, 0, 0.28),
    1px 4px 10px rgba(0, 0, 0, 0.35);
}
#mp-poker-table-screen .mpk-card.mpk-c-dim { opacity: 0.55; }

/* ── 4 · board + pot ────────────────────────────────────────── */

#mp-poker-table-screen .mpk-board {
  position: absolute;
  left: 50%;
  top: 188px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
#mp-poker-table-screen .mpk-pot {
  position: absolute;
  left: 45%; /* mockup: shifted off-center so right-side bets breathe */
  top: 106px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#mp-poker-table-screen .mpk-potchips {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 30px;
}
#mp-poker-table-screen .mpk-potplaque {
  background: rgba(8, 6, 4, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 99px;
  padding: 2px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--mpk-gold-hi);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
#mp-poker-table-screen .mpk-potplaque i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #9a8c6a;
  margin-right: 6px;
  vertical-align: 1px;
}
#mp-poker-table-screen .mpk-potplaque.mpk-pot-side {
  font-size: 11px;
  padding: 1px 10px;
}
#mp-poker-table-screen .mpk-nexthand {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  background: rgba(8, 6, 4, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 99px;
  padding: 3px 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--mpk-muted);
  white-space: nowrap;
}

/* ── 5 · chips — repeating-conic edge spots + box-shadow stacks ── */

#mp-poker-table-screen .mpk-chip {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.55) 0 5%, transparent 42%),
    radial-gradient(circle, var(--mpk-inlay) 0 57%, transparent 58%),
    repeating-conic-gradient(#f4f0e6 0 22deg, var(--mpk-c) 22deg 60deg);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 2px 3px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    var(--mpk-stack, 0 0 0 transparent),
    1px 3px 4px rgba(0, 0, 0, 0.45);
}
#mp-poker-table-screen .mpk-ch-gold   { --mpk-c: #c9a13b; --mpk-inlay: #a8842c; --mpk-sd: #8a6c22; --mpk-sl: #b8933a; }
#mp-poker-table-screen .mpk-ch-black  { --mpk-c: #23262b; --mpk-inlay: #3a3f47; --mpk-sd: #14161a; --mpk-sl: #2e333b; }
#mp-poker-table-screen .mpk-ch-forest { --mpk-c: #2f5d46; --mpk-inlay: #25493a; --mpk-sd: #1d3c2c; --mpk-sl: #2a5540; }
#mp-poker-table-screen .mpk-ch-oxb    { --mpk-c: #7a2f35; --mpk-inlay: #5e2227; --mpk-sd: #511e22; --mpk-sl: #6e2b30; }
#mp-poker-table-screen .mpk-ch-cream  { --mpk-c: #d9d2bd; --mpk-inlay: #c2b898; --mpk-sd: #a99f82; --mpk-sl: #cdc4a8; }
#mp-poker-table-screen .mpk-s2 { --mpk-stack: 0 3px 0 var(--mpk-sd), 0 6px 0 var(--mpk-sl); }
#mp-poker-table-screen .mpk-s3 { --mpk-stack: 0 3px 0 var(--mpk-sd), 0 6px 0 var(--mpk-sl), 0 9px 0 var(--mpk-sd); }

/* ── 6 · bets on the felt — one capsule token per seat ─────────
   Chip glyph fused with the amount in a single rounded capsule at a
   fixed BET_OFF dock per display seat (no per-amount chip piles).
   The whole zone scales uniformly, so tz-space clearance from
   cards/pods/pot holds at every --mpk-tz-scale. */

#mp-poker-table-screen .mpk-bet {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: rgba(8, 6, 4, 0.78);
  border: 1px solid rgba(232, 200, 106, 0.35);
  border-radius: 99px;
  padding: 2px 9px 2px 3px;
  font-size: 12px;
  font-weight: 800;
  color: var(--mpk-gold-hi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
#mp-poker-table-screen .mpk-tok-chip {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
#mp-poker-table-screen .mpk-tok-amt { line-height: 1.3; }
/* the pill class stays for the ghost flights (sweep / ship) */
#mp-poker-table-screen .mpk-betpill {
  background: rgba(8, 6, 4, 0.78);
  border: 1px solid rgba(232, 200, 106, 0.35);
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--mpk-gold-hi);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* ── 7 · seat pods ──────────────────────────────────────────── */

#mp-poker-table-screen .mpk-pod {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  z-index: 5;
}
#mp-poker-table-screen .mpk-avwrap { position: relative; z-index: 2; }
#mp-poker-table-screen .mpk-avat {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  color: rgba(255, 250, 235, 0.92);
  position: relative;
  z-index: 2;
  border: 2px solid rgba(0, 0, 0, 0.55);
  background-size: cover;
  background-position: center;
  box-shadow:
    1px 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -6px 10px rgba(0, 0, 0, 0.28);
}
#mp-poker-table-screen .mpk-a-slate { background-image: radial-gradient(circle at 35% 28%, #5d7290 0%, #242c38 78%); }
#mp-poker-table-screen .mpk-a-plum  { background-image: radial-gradient(circle at 35% 28%, #855a70 0%, #33202b 78%); }
#mp-poker-table-screen .mpk-a-moss  { background-image: radial-gradient(circle at 35% 28%, #6f7c4e 0%, #272e1a 78%); }
#mp-poker-table-screen .mpk-a-oxb   { background-image: radial-gradient(circle at 35% 28%, #96494f 0%, #3a181c 78%); }
#mp-poker-table-screen .mpk-a-teal  { background-image: radial-gradient(circle at 35% 28%, #527672 0%, #1d2e2d 78%); }
#mp-poker-table-screen .mpk-a-gold  { background-image: radial-gradient(circle at 35% 28%, #a8823e 0%, #4d3617 78%); }

#mp-poker-table-screen .mpk-plate {
  margin-top: -7px;
  background: rgba(10, 8, 6, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 3px 8px 4px;
  text-align: center;
  min-width: 88px;
  max-width: 96px;
  position: relative;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
#mp-poker-table-screen .mpk-nm {
  font-size: 10.5px;
  color: var(--mpk-plate-ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-table-screen .mpk-nm i { font-style: normal; color: var(--mpk-gold); }
#mp-poker-table-screen .mpk-st {
  font-size: 12px;
  font-weight: 800;
  color: var(--mpk-gold-hi);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
#mp-poker-table-screen .mpk-so {
  font-size: 10.5px;
  font-style: italic;
  color: var(--mpk-muted);
  line-height: 1.4;
}
#mp-poker-table-screen .mpk-allin-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #d98a80;
  margin-left: 4px;
  vertical-align: 1px;
}

/* opponent hole minis — overlap the avatar bottom, fanned */
#mp-poker-table-screen .mpk-minis {
  position: absolute;
  top: 13px;
  display: flex;
  z-index: 1;
}
#mp-poker-table-screen .mpk-minis .mpk-c-mini:first-child { transform: rotate(4deg); }
#mp-poker-table-screen .mpk-minis .mpk-c-mini:last-child { margin-left: -9px; transform: rotate(14deg); }
#mp-poker-table-screen .mpk-mR .mpk-minis { left: 28px; }
#mp-poker-table-screen .mpk-mL .mpk-minis { right: 28px; }
#mp-poker-table-screen .mpk-mL .mpk-minis .mpk-c-mini:first-child { transform: rotate(-14deg); }
#mp-poker-table-screen .mpk-mL .mpk-minis .mpk-c-mini:last-child { transform: rotate(-4deg); }
/* showdown: revealed minis lift above the avatar and un-overlap */
#mp-poker-table-screen .mpk-pod.mpk-revealed .mpk-minis { z-index: 3; top: -14px; }

/* seat states */
#mp-poker-table-screen .mpk-pod.mpk-sitout .mpk-avat,
#mp-poker-table-screen .mpk-pod.mpk-sitout .mpk-minis { opacity: 0.42; filter: saturate(0.5); }
#mp-poker-table-screen .mpk-pod.mpk-sitout .mpk-plate { opacity: 0.72; }
#mp-poker-table-screen .mpk-pod.mpk-folded .mpk-avat { opacity: 0.62; filter: saturate(0.55); }
#mp-poker-table-screen .mpk-pod.mpk-folded .mpk-plate { opacity: 0.8; }
#mp-poker-table-screen .mpk-pod.mpk-empty .mpk-plate { visibility: hidden; }
#mp-poker-table-screen .mpk-pod.mpk-empty .mpk-avat {
  background: rgba(0, 0, 0, 0.22);
  border: 1.5px dashed rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.22);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
#mp-poker-table-screen .mpk-pod.mpk-acting .mpk-avat {
  box-shadow:
    1px 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -6px 10px rgba(0, 0, 0, 0.28),
    0 0 0 1.5px rgba(232, 200, 106, 0.55);
}
/* acting-seat ambient lift — a faint pool of light on the felt under
   the pod whose clock is running (rides behind avatar/minis, z 0) */
#mp-poker-table-screen .mpk-pod.mpk-acting .mpk-avwrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232, 200, 106, 0.13) 0%,
    rgba(232, 200, 106, 0.05) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* winner glow — strengthened for the showdown showcase */
#mp-poker-table-screen .mpk-pod.mpk-winner .mpk-avat {
  box-shadow:
    1px 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 2.5px rgba(232, 200, 106, 1),
    0 0 30px 10px rgba(232, 200, 106, 0.5);
}
#mp-poker-table-screen .mpk-pod.mpk-winner .mpk-plate {
  border-color: rgba(232, 200, 106, 0.65);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 14px rgba(232, 200, 106, 0.22);
}

/* hero pod */
#mp-poker-table-screen .mpk-pod.mpk-hero-pod { width: 110px; z-index: 8; }
#mp-poker-table-screen .mpk-pod.mpk-hero-pod .mpk-avat {
  width: 56px;
  height: 56px;
  font-size: 19px;
  box-shadow:
    1px 3px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -7px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1.5px rgba(212, 175, 55, 0.55);
}

/* wifi-slash presence badge */
#mp-poker-table-screen .mpk-conn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(58, 22, 27, 0.92);
  border: 1px solid rgba(217, 138, 128, 0.6);
  color: #d98a80;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
#mp-poker-table-screen .mpk-conn svg { display: block; }
#mp-poker-table-screen .mpk-pod.mpk-away .mpk-conn { display: flex; }

/* timer ring — SVG stroke around the acting avatar (JS drives the arc) */
#mp-poker-table-screen .mpk-ring {
  position: absolute;
  top: -7px;
  left: -7px;
  pointer-events: none;
  display: none;
  z-index: 3;
  filter: drop-shadow(0 0 3px rgba(232, 200, 106, 0.55));
}
#mp-poker-table-screen .mpk-pod.mpk-acting .mpk-ring { display: block; }

/* ── 8 · dealer button + blind markers ──────────────────────── */

#mp-poker-table-screen .mpk-dbtn {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  /* button-slide polish: the puck glides to its next dock instead of
     teleporting (left/top are JS-set each render) */
  transition: left 300ms cubic-bezier(0.3, 0.6, 0.3, 1),
              top 300ms cubic-bezier(0.3, 0.6, 0.3, 1);
  background: linear-gradient(180deg, #ffffff, #d9d4c8);
  color: #26221a;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.16);
}
#mp-poker-table-screen .mpk-bmark {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 30%, #3d4652, #1b2028);
  color: #b8c2cf;
  font-size: 7px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ── 9 · hero strip (95 px) ─────────────────────────────────── */

#mp-poker-table-screen .mpk-hstrip {
  position: relative;
  flex: 0 0 95px;
  width: 100%;
  z-index: 9;
}
#mp-poker-table-screen .mpk-hcards {
  position: absolute;
  left: 24px;
  top: -14px;
  width: 116px;
  height: 100px;
}
/* nth-child (not first/last): the dealing ceremony appends card-back
   overlays after the two real cards — positions must not shift */
#mp-poker-table-screen .mpk-hcards > .mpk-c-hero:nth-child(1) {
  position: absolute;
  left: 0;
  top: 4px;
  transform: rotate(-4deg);
  z-index: 1;
}
#mp-poker-table-screen .mpk-hcards > .mpk-c-hero:nth-child(2) {
  position: absolute;
  left: 44px;
  top: 0;
  transform: rotate(4deg);
  z-index: 2;
}
#mp-poker-table-screen .mpk-hstrip.mpk-hero-folded .mpk-hcards {
  opacity: 0.45;
  filter: saturate(0.35);
}
#mp-poker-table-screen .mpk-youhave {
  position: absolute;
  right: 16px;
  top: 10px;   /* lifted from 24 — the reaction roundel docks below */
  text-align: right;
}
#mp-poker-table-screen .mpk-yl {
  font-size: 8px;
  letter-spacing: 0.26em;
  color: #9a8c6a;
  font-weight: 800;
}
#mp-poker-table-screen .mpk-yv {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #e6ddc8;
  background: rgba(8, 6, 4, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 3px 10px;
  margin-top: 3px;
}

/* ── 10 · action bar (62 px) — three modes, toggled by class ──── */

#mp-poker-table-screen .mpk-abar {
  flex: 0 0 62px;
  width: 100%;
  padding: 3px 14px;
}
#mp-poker-table-screen .mpk-ab-row {
  display: none;
  gap: 8px;
  height: 56px;
}
#mp-poker-table-screen .mpk-abar.mpk-mode-turn .mpk-ab-row-turn { display: flex; }
#mp-poker-table-screen .mpk-abar.mpk-mode-preact .mpk-ab-row-preact { display: flex; }
#mp-poker-table-screen .mpk-abar.mpk-mode-back .mpk-ab-row-back { display: flex; }

#mp-poker-table-screen .mpk-ab {
  flex: 1;
  border-radius: 12px;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  padding: 0;
}
#mp-poker-table-screen .mpk-ab:disabled,
#mp-poker-table-screen .mpk-ab.mpk-dim { opacity: 0.4; pointer-events: none; }
#mp-poker-table-screen .mpk-ab-fold {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #b8ae9c;
}
#mp-poker-table-screen .mpk-ab-call {
  background: linear-gradient(180deg, #2e2820, #211c15);
  border: 1px solid rgba(232, 200, 106, 0.35);
  color: var(--mpk-gold-hi);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
#mp-poker-table-screen .mpk-ab-call i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #b8a370;
  font-variant-numeric: tabular-nums;
}
#mp-poker-table-screen .mpk-ab-raise {
  background: linear-gradient(180deg, #e9c76a, #b98e33);
  color: #241b08;
  box-shadow: 0 2px 10px rgba(201, 161, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* not-my-turn pre-action toggles */
#mp-poker-table-screen .mpk-tg {
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
  color: #b8ae9c;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 12px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
#mp-poker-table-screen .mpk-tg i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mpk-muted);
}
#mp-poker-table-screen .mpk-tg.mpk-on {
  background: linear-gradient(180deg, #2e2820, #211c15);
  border-color: rgba(232, 200, 106, 0.45);
  color: var(--mpk-gold-hi);
}

/* sitting-out mode: note + I'M BACK */
#mp-poker-table-screen .mpk-sitout-note {
  flex: 1.2;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-style: italic;
  color: var(--mpk-muted);
  line-height: 1.4;
  padding-right: 4px;
}
#mp-poker-table-screen .mpk-ab-back {
  flex: 1;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, #e9c76a, #b98e33);
  color: #241b08;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(201, 161, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ── 11 · raise slide-up panel (220 px, hidden by default) ────── */

#mp-poker-table-screen .mpk-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 2, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 20;
}
#mp-poker-table-screen .mpk-scrim.mpk-open { opacity: 1; pointer-events: auto; }

#mp-poker-table-screen .mpk-raise {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  z-index: 21;
  background: #16110c;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 10px 14px calc(12px + var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px)));
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.55);
  transform: translateY(108%);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#mp-poker-table-screen .mpk-raise.mpk-open { transform: translateY(0); }
#mp-poker-table-screen .mpk-grab {
  flex: 0 0 4px;
  width: 44px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto 2px;
}
#mp-poker-table-screen .mpk-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
#mp-poker-table-screen .mpk-preset {
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
  color: #b8ae9c;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
#mp-poker-table-screen .mpk-preset.mpk-on {
  background: linear-gradient(180deg, #e5c369, #b98e33);
  border-color: transparent;
  color: #241b08;
}
#mp-poker-table-screen .mpk-preset.mpk-allin {
  color: #d98a80;
  border-color: rgba(200, 90, 80, 0.45);
}
#mp-poker-table-screen .mpk-preset:disabled { opacity: 0.35; pointer-events: none; }

#mp-poker-table-screen .mpk-slider {
  position: relative;
  height: 44px;
  flex: 0 0 44px;
}
#mp-poker-table-screen .mpk-sl-tr {
  position: absolute;
  top: 20px;
  left: 2px;
  right: 2px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}
#mp-poker-table-screen .mpk-sl-fi {
  position: absolute;
  top: 20px;
  left: 2px;
  width: 20%;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #b98e33, #e5c369);
}
#mp-poker-table-screen .mpk-sl-th {
  position: absolute;
  top: 11px;
  left: calc(20% - 11px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0d68a, #c49a3c);
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#mp-poker-table-screen .mpk-raise-go {
  height: 56px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, #e9c76a, #b98e33);
  color: #241b08;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(201, 161, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ── 12 · bottom sheets: table info + buy-in (hidden) ─────────── */

#mp-poker-table-screen .mpk-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 22;
  background: #16110c;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 12px 18px calc(18px + var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px)));
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(108%);
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
#mp-poker-table-screen .mpk-sheet.mpk-open { transform: translateY(0); }
#mp-poker-table-screen .mpk-sh-title {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--mpk-gold-hi);
  text-align: center;
  margin: 8px 0 14px;
  font-weight: 800;
}
#mp-poker-table-screen .mpk-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
#mp-poker-table-screen .mpk-kv-row span {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--mpk-muted);
  font-weight: 800;
}
#mp-poker-table-screen .mpk-kv-row b {
  color: var(--mpk-gold-hi);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#mp-poker-table-screen .mpk-mode-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  border: 1px solid rgba(232, 200, 106, 0.4);
  border-radius: 99px;
  padding: 1px 8px;
  color: var(--mpk-gold-hi);
}
#mp-poker-table-screen .mpk-rake-note {
  font-size: 11.5px;
  font-style: italic;
  color: #b8ae9c;
  line-height: 1.55;
  margin: 12px 0 8px;
}
#mp-poker-table-screen .mpk-seedhash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--mpk-muted);
  word-break: break-all;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 7px 9px;
  margin-top: 4px;
}

/* buy-in sheet skeleton */
#mp-poker-table-screen .mpk-buyin-val {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--mpk-gold-hi);
  font-variant-numeric: tabular-nums;
  margin: 6px 0 2px;
}
#mp-poker-table-screen .mpk-buyin-bb {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mpk-muted);
  font-weight: 800;
  margin-bottom: 10px;
}
#mp-poker-table-screen .mpk-buyin-go {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: none;
  margin-top: 12px;
  background: linear-gradient(180deg, #e9c76a, #b98e33);
  color: #241b08;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ── 13 · flex slack absorber ───────────────────────────────── */

#mp-poker-table-screen .mpk-slack { flex: 1 1 0; min-height: 0; }

/* ── 14 · animation contract (§7.3) — classes ready to trigger ──
   All transform/opacity only. Flight vectors ride CSS custom props
   (--mpk-fx/--mpk-fy = from-offset, --mpk-tx/--mpk-ty = to-offset)
   set by JS at trigger time. Wave 4 attaches them to the event queue. */

@keyframes mpk-deal-fly {
  from {
    transform: translate(var(--mpk-fx, 0px), var(--mpk-fy, -220px))
               rotate(var(--mpk-fr, -8deg)) scale(0.7);
    opacity: 0.35;
  }
  to { transform: none; opacity: 1; }
}
#mp-poker-table-screen .mpk-anim-deal {
  animation: mpk-deal-fly 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes mpk-card-flip {
  0% { transform: rotateY(88deg) scale(1); }
  55% { transform: rotateY(0deg) scale(1.06); }
  100% { transform: none; }
}
#mp-poker-table-screen .mpk-anim-flip {
  animation: mpk-card-flip 300ms ease-out both;
}

@keyframes mpk-bet-toss {
  from { transform: translate(var(--mpk-fx, 0px), var(--mpk-fy, 0px)); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}
#mp-poker-table-screen .mpk-anim-toss {
  animation: mpk-bet-toss 200ms ease-out both;
}

@keyframes mpk-sweep {
  from { transform: none; opacity: 1; }
  to { transform: translate(var(--mpk-tx, 0px), var(--mpk-ty, 0px)) scale(0.7); opacity: 0; }
}
#mp-poker-table-screen .mpk-anim-sweep {
  animation: mpk-sweep 280ms ease-in both;
}

@keyframes mpk-pot-ship {
  from { transform: none; opacity: 1; }
  to { transform: translate(var(--mpk-tx, 0px), var(--mpk-ty, 0px)) scale(0.55); opacity: 0; }
}
#mp-poker-table-screen .mpk-anim-ship {
  animation: mpk-pot-ship 500ms ease-in-out both;
}

@keyframes mpk-fold-muck {
  from { transform: none; opacity: 1; }
  to {
    transform: translate(var(--mpk-tx, 0px), var(--mpk-ty, -60px))
               rotate(10deg) scale(0.55);
    opacity: 0;
  }
}
#mp-poker-table-screen .mpk-anim-fold {
  animation: mpk-fold-muck 250ms ease-in both;
}

@keyframes mpk-btn-arc {
  0% { transform: translate(var(--mpk-fx, 0px), var(--mpk-fy, 0px)); }
  50% {
    transform: translate(calc(var(--mpk-fx, 0px) * 0.5),
                         calc(var(--mpk-fy, 0px) * 0.5 - 18px)) scale(1.15);
  }
  100% { transform: none; }
}
#mp-poker-table-screen .mpk-anim-btnarc {
  animation: mpk-btn-arc 350ms cubic-bezier(0.3, 0.6, 0.3, 1) both;
}

@keyframes mpk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#mp-poker-table-screen .mpk-anim-fade {
  animation: mpk-fade-in 120ms ease-out both;
}

/* reduced motion: every flight becomes a 120 ms fade in place;
   nothing blocks on animation (server state is always ahead). */
@media (prefers-reduced-motion: reduce) {
  #mp-poker-table-screen .mpk-anim-deal,
  #mp-poker-table-screen .mpk-anim-flip,
  #mp-poker-table-screen .mpk-anim-toss,
  #mp-poker-table-screen .mpk-anim-btnarc {
    animation: mpk-fade-in 120ms ease-out both;
  }
  #mp-poker-table-screen .mpk-anim-sweep,
  #mp-poker-table-screen .mpk-anim-ship,
  #mp-poker-table-screen .mpk-anim-fold {
    animation: mpk-fade-in 120ms ease-out reverse both;
  }
  #mp-poker-table-screen .mpk-raise,
  #mp-poker-table-screen .mpk-sheet,
  #mp-poker-table-screen .mpk-scrim { transition: none; }
}

/* ── 15 · small screens (iPhone SE class, ≤ 340 px) ───────────
   §5.3: hero cards drop to 58×81. The table box no longer needs a
   static scale here — the .mpk-tzscale measurement (§2) already
   shrinks it to whatever the slot gives (a second transform on
   .mpk-tz would double-scale). */
@media (max-width: 340px) {
  #mp-poker-table-screen .mpk-c-hero { width: 58px; height: 81px; }
  #mp-poker-table-screen .mpk-hcards > .mpk-c-hero:nth-child(2),
  #mp-poker-table-screen .mpk-hovl1 { left: 38px; }
}

/* ── 16 · Wave-4 table-logic additions ────────────────────────
   Ghost chip flights (sweep / ship / uncalled return), the
   centered bet-toss variant (the bet cluster carries its own
   translate(-50%,-50%), which the §14 keyframes would clobber),
   TIME BANK label, leaving marker, catch-up fade, table-menu rows
   and the ledger host inside the info sheet. */

/* chip-cluster ghost: rides the felt coordinate space; the real
   elements re-render instantly, the ghost carries the motion */
#mp-poker-table-screen .mpk-ghostfly {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
@keyframes mpk-ghost-sweep {
  from { transform: translate(-50%, -50%); opacity: 1; }
  to {
    transform: translate(-50%, -50%)
               translate(var(--mpk-tx, 0px), var(--mpk-ty, 0px)) scale(0.6);
    opacity: 0;
  }
}
#mp-poker-table-screen .mpk-ghostfly.mpk-gf-sweep {
  animation: mpk-ghost-sweep 280ms ease-in both;
}
@keyframes mpk-ghost-ship {
  from { transform: translate(-50%, -50%); opacity: 1; }
  to {
    transform: translate(-50%, -50%)
               translate(var(--mpk-tx, 0px), var(--mpk-ty, 0px)) scale(0.55);
    opacity: 0;
  }
}
#mp-poker-table-screen .mpk-ghostfly.mpk-gf-ship {
  animation: mpk-ghost-ship 500ms ease-in-out both;
}

/* bet toss, centering preserved */
@keyframes mpk-bet-toss-c {
  from {
    transform: translate(-50%, -50%)
               translate(var(--mpk-fx, 0px), var(--mpk-fy, 0px));
    opacity: 0.5;
  }
  to { transform: translate(-50%, -50%); opacity: 1; }
}
#mp-poker-table-screen .mpk-anim-toss-c {
  animation: mpk-bet-toss-c 200ms ease-out both;
}

/* catch-up coalescing: one 600 ms settle instead of a replay */
@keyframes mpk-catchup-fade {
  from { opacity: 0.45; }
  to { opacity: 1; }
}
#mp-poker-table-screen .mpk-tz.mpk-catchup {
  animation: mpk-catchup-fade 600ms ease-out both;
}

/* TIME BANK label — gold chip above the acting avatar while the
   engaged bank runs (renderTimer toggles .mpk-tb-on) */
#mp-poker-table-screen .mpk-tbank {
  position: absolute;
  left: 50%;
  top: -19px;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--mpk-gold-hi);
  background: rgba(8, 6, 4, 0.82);
  border: 1px solid rgba(232, 200, 106, 0.45);
  border-radius: 99px;
  padding: 1px 6px;
  white-space: nowrap;
  display: none;
  z-index: 5;
}
#mp-poker-table-screen .mpk-pod.mpk-tb-on .mpk-tbank { display: block; }

/* mid-hand leaver: the seat plays on, the name goes quiet-italic */
#mp-poker-table-screen .mpk-pod.mpk-leaving .mpk-nm {
  font-style: italic;
  color: var(--mpk-muted);
}

/* table menu (inside the info sheet) */
#mp-poker-table-screen .mpk-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 4px;
}
#mp-poker-table-screen .mpk-menu-btn {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
  color: #d8d2c6;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-table-screen .mpk-menu-btn:disabled { opacity: 0.35; pointer-events: none; }
#mp-poker-table-screen .mpk-menu-btn.mpk-danger {
  color: #d98a80;
  border-color: rgba(200, 90, 80, 0.45);
}
#mp-poker-table-screen .mpk-ledger-host {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* reduced motion: ghosts and tosses become fades like everything
   else in §14 — the queue itself never blocks either way */
@media (prefers-reduced-motion: reduce) {
  #mp-poker-table-screen .mpk-anim-toss-c {
    animation: mpk-fade-in 120ms ease-out both;
  }
  #mp-poker-table-screen .mpk-ghostfly { display: none; }
}

/* ── 17 · presentation upgrades: court cards, the knock, the
   two-pass dealing ceremony, the flop lift ─────────────────────── */

/* court-figure center panel (K/Q/J at hero + board sizes) */
#mp-poker-table-screen .mpk-court {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#mp-poker-table-screen .mpk-court svg { display: block; }

/* CHECK's knock identity on the middle action button */
#mp-poker-table-screen .mpk-ab-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#mp-poker-table-screen .mpk-ab-knock { display: flex; opacity: 0.9; }
#mp-poker-table-screen .mpk-ab-knock svg { display: block; }

/* double-pulse knock ripple on the felt (tz coordinate space —
   rides the .mpk-tzscale transform like every other felt fx) */
#mp-poker-table-screen .mpk-knockfx {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 11;
}
#mp-poker-table-screen .mpk-knockfx::before,
#mp-poker-table-screen .mpk-knockfx::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(232, 200, 106, 0.65);
  animation: mpk-knock-ring 460ms ease-out both;
}
#mp-poker-table-screen .mpk-knockfx::after { animation-delay: 150ms; }
@keyframes mpk-knock-ring {
  from { transform: scale(0.4); opacity: 0.9; }
  to { transform: scale(3.2); opacity: 0; }
}

/* dealing ceremony: card-back ghost flying shoe → seat */
#mp-poker-table-screen .mpk-dealfly {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  animation: mpk-deal-flight 230ms cubic-bezier(0.25, 0.6, 0.3, 1) both;
}
@keyframes mpk-deal-flight {
  from {
    transform: translate(-50%, -50%) rotate(-14deg) scale(0.72);
    opacity: 0.85;
  }
  to {
    transform: translate(-50%, -50%)
               translate(var(--mpk-tx, 0px), var(--mpk-ty, 0px))
               rotate(8deg) scale(1);
    opacity: 1;
  }
}

/* ceremony holds — cards nobody has visibly received yet.
   dh2: both opponent minis still in the shoe · dh1: second only */
#mp-poker-table-screen .mpk-pod.mpk-dh2 .mpk-minis .mpk-c-mini { visibility: hidden; }
#mp-poker-table-screen .mpk-pod.mpk-dh1 .mpk-minis .mpk-c-mini:last-child { visibility: hidden; }
#mp-poker-table-screen .mpk-hcards.mpk-hold0 > .mpk-c-hero:nth-child(1) { visibility: hidden; }
#mp-poker-table-screen .mpk-hcards.mpk-hold1 > .mpk-c-hero:nth-child(2) { visibility: hidden; }

/* hero face-down overlays (land in the strip, flip away on the peek) */
#mp-poker-table-screen .mpk-hovl {
  position: absolute;
  z-index: 4;
  visibility: visible;
}
#mp-poker-table-screen .mpk-hovl0 { left: 0; top: 4px; transform: rotate(-4deg); }
#mp-poker-table-screen .mpk-hovl1 { left: 44px; top: 0; transform: rotate(4deg); }
@keyframes mpk-hovl-in {
  from {
    transform: translate(46px, -330px) rotate(20deg) scale(0.5);
    opacity: 0.4;
  }
  to { transform: translate(0, 0) rotate(var(--mpk-rot, 0deg)); opacity: 1; }
}
#mp-poker-table-screen .mpk-anim-hovlin {
  animation: mpk-hovl-in 250ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* the sequential peek: back half-flips out, face half-flips in.
   --mpk-rot carries each card's resting fan angle so the animation
   ends exactly on the base transform (no snap on class removal). */
@keyframes mpk-hflip-out {
  from { transform: rotate(var(--mpk-rot, 0deg)) rotateY(0deg); }
  to { transform: rotate(var(--mpk-rot, 0deg)) rotateY(88deg); }
}
#mp-poker-table-screen .mpk-anim-hflipout {
  animation: mpk-hflip-out 130ms ease-in both;
}
@keyframes mpk-hflip-in {
  from { transform: rotate(var(--mpk-rot, 0deg)) rotateY(-88deg) scale(1.04); }
  to { transform: rotate(var(--mpk-rot, 0deg)) rotateY(0deg); }
}
#mp-poker-table-screen .mpk-anim-hflipin {
  animation: mpk-hflip-in 160ms ease-out both;
}

/* flop flip with lift: rise, grow, shadow swells mid-flip */
@keyframes mpk-flip-lift {
  0% {
    transform: rotateY(88deg);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
  }
  55% {
    transform: rotateY(0deg) translateY(-6px) scale(1.06);
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55));
  }
  100% { transform: none; filter: none; }
}
#mp-poker-table-screen .mpk-anim-fliplift {
  animation: mpk-flip-lift 380ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
}

/* street ceremony — flop/turn/river land FACE-DOWN in the real board
   slots, hold a beat, then flip. bwait: still flying (slot hidden);
   bhold: landed, lattice back showing over the painted face. The
   landed back sits ELEVATED (a fresh card ON the felt — deeper drop
   shadow) so it never reads as one of the flat in-the-deck
   placeholder backs of the undealt streets. */
#mp-poker-table-screen .mpk-card.mpk-bwait { visibility: hidden; }
#mp-poker-table-screen .mpk-card.mpk-bhold > * { visibility: hidden; }
#mp-poker-table-screen .mpk-card.mpk-bhold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 1px rgba(0, 0, 0, 0.10),
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    0 3px 5px rgba(0, 0, 0, 0.40),
    2px 8px 16px rgba(0, 0, 0, 0.50);
}
#mp-poker-table-screen .mpk-card.mpk-bhold::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.30) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.30) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #56242a, #3d161b);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}

/* street card-back ghost flying shoe → board slot */
#mp-poker-table-screen .mpk-bfly {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  animation: mpk-board-flight 200ms cubic-bezier(0.25, 0.6, 0.3, 1) both;
}
@keyframes mpk-board-flight {
  from {
    transform: translate(-50%, -50%) rotate(-12deg) scale(0.7);
    opacity: 0.85;
  }
  to {
    transform: translate(-50%, -50%)
               translate(var(--mpk-tx, 0px), var(--mpk-ty, 0px))
               rotate(0deg) scale(1);
    opacity: 1;
  }
}

/* reduced motion: the JS already skips flights/holds/ripples —
   these are the belt-and-braces fades for anything that slips */
@media (prefers-reduced-motion: reduce) {
  #mp-poker-table-screen .mpk-dealfly,
  #mp-poker-table-screen .mpk-bfly,
  #mp-poker-table-screen .mpk-knockfx { display: none; }
  #mp-poker-table-screen .mpk-anim-fliplift,
  #mp-poker-table-screen .mpk-anim-hovlin,
  #mp-poker-table-screen .mpk-anim-hflipin {
    animation: mpk-fade-in 120ms ease-out both;
  }
  #mp-poker-table-screen .mpk-anim-hflipout {
    animation: mpk-fade-in 120ms ease-out reverse both;
  }
}

/* ── 18 · fun layer: immersive shell, reactions, all-in drama,
   winner showcase, pot escalation, back-to-lobby sheet ──────────── */

/* A · immersive fullscreen — on the table screen the app's top
   header and bottom nav leave entirely; the measured viewport
   (--mpk-vh) grows and the table scale rises with it. Every other
   screen keeps its chrome (the rules key on body[data-screen],
   which navigate() stamps before the screen mounts). */
body[data-screen="mp-poker-table"] #header,
body.ov[data-screen="mp-poker-table"] #header, /* outranks the later
                     obsidian-vault.css `body.ov #header{display:flex}` */
body[data-screen="mp-poker-table"] #bottom-nav { display: none; }
body[data-screen="mp-poker-table"] { padding-bottom: 0; }

/* C · reactions — the 12-icon palette (2×6, slides up over the
   hero strip; z 15 stays under the scrim/sheets at 20+). Anchored
   above the reaction roundel (bottom of the hero strip) so the
   roundel stays visible + tappable as the close toggle. */
#mp-poker-table-screen .mpk-reactbar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 110px;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 4px;
  background: rgba(16, 12, 8, 0.96);
  border: 1px solid rgba(232, 200, 106, 0.25);
  border-radius: 14px;
  padding: 6px 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms ease,
              transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
#mp-poker-table-screen .mpk-reactbar.mpk-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#mp-poker-table-screen .mpk-react-opt {
  flex: 0 0 calc(100% / 6 - 4px);
  height: 40px;
  border: none;
  background: none;
  font-size: 22px;   /* fallback glyph cells only — art cells hold an SVG */
  line-height: 1;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mp-poker-table-screen .mpk-react-opt svg { display: block; }
#mp-poker-table-screen .mpk-react-opt:active { background: rgba(255, 255, 255, 0.07); }

/* 429 pacing — a subtle shake on the palette, no toast */
@keyframes mpk-shake {
  0%, 100% { transform: translateY(0) translateX(0); }
  20% { transform: translateY(0) translateX(-5px); }
  40% { transform: translateY(0) translateX(4px); }
  60% { transform: translateY(0) translateX(-3px); }
  80% { transform: translateY(0) translateX(2px); }
}
#mp-poker-table-screen .mpk-reactbar.mpk-anim-shake {
  animation: mpk-shake 300ms ease both;
}

/* the speech-bubble chip on a seat pod — pop 240 ms, hold 2.5 s,
   fade 300 ms (JS drives the lifecycle; newest replaces) */
#mp-poker-table-screen .mpk-react {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  z-index: 7;
  background: rgba(16, 12, 8, 0.94);
  border: 1px solid rgba(232, 200, 106, 0.35);
  border-radius: 11px;
  padding: 3px 8px 4px;
  font-size: 22px;
  line-height: 1.15;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  animation: mpk-react-pop 240ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  transition: opacity 300ms ease;
}
#mp-poker-table-screen .mpk-react::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4.5px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(16, 12, 8, 0.94);
  border-right: 1px solid rgba(232, 200, 106, 0.35);
  border-bottom: 1px solid rgba(232, 200, 106, 0.35);
}
@keyframes mpk-react-pop {
  from { transform: translateX(-50%) scale(0.35); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}
#mp-poker-table-screen .mpk-react svg { display: block; }
#mp-poker-table-screen .mpk-react.mpk-react-out { opacity: 0; }

/* C2 · the reaction affordance — mask roundel at the hero strip's
   right edge: below the YOU HAVE chip, above the action-bar rows,
   clear of the hero card fan (strip left). Idle 60 %, full while
   pressed / palette open. Sheets/raise cover it via the z-20 scrim
   like the rest of the table chrome. */
#mp-poker-table-screen .mpk-reactbtn {
  position: absolute;
  right: 12px;
  bottom: 5px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(232, 200, 106, 0.4);
  background: rgba(16, 12, 8, 0.85);
  color: var(--mpk-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 140ms ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  /* the global 44px touch-target floor would spill the roundel into
     the YOU HAVE chip above / the action row below — the strip only
     yields 34px between them */
  min-width: 34px;
  min-height: 34px;
}
#mp-poker-table-screen .mpk-reactbtn svg { display: block; }
#mp-poker-table-screen .mpk-reactbtn:active,
#mp-poker-table-screen .mpk-reactbtn.mpk-rb-on { opacity: 1; }
#mp-poker-table-screen .mpk-reactbtn.mpk-rb-on {
  border-color: rgba(232, 200, 106, 0.75);
}
/* hide-reactions state: dimmer + oxblood slash badge */
#mp-poker-table-screen .mpk-reactbtn.mpk-rb-hidden { opacity: 0.45; }
#mp-poker-table-screen .mpk-rb-badge {
  display: none;
  position: absolute;
  right: -3px;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9b1c2e;
  border: 1px solid rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#mp-poker-table-screen .mpk-rb-badge svg { display: block; }
#mp-poker-table-screen .mpk-reactbtn.mpk-rb-hidden .mpk-rb-badge { display: flex; }

/* the two-tap re-enable offer chip, anchored above the roundel */
#mp-poker-table-screen .mpk-reacthint {
  position: absolute;
  right: 10px;
  bottom: 46px;
  border: 1px solid rgba(232, 200, 106, 0.3);
  background: rgba(16, 12, 8, 0.96);
  border-radius: 10px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #cfc5b2;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 160ms ease;
  z-index: 16;
}
#mp-poker-table-screen .mpk-reacthint.mpk-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* D · all-in drama — gold rim flare + ALL-IN plate pulse */
#mp-poker-table-screen .mpk-allin-flare .mpk-avwrap::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(232, 200, 106, 0.9);
  box-shadow: 0 0 18px 4px rgba(232, 200, 106, 0.5);
  pointer-events: none;
  z-index: 4;
  animation: mpk-allin-ring 900ms ease-out both;
}
@keyframes mpk-allin-ring {
  0% { opacity: 0; transform: scale(0.85); }
  25% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes mpk-allin-tagpulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.3); }
}
#mp-poker-table-screen .mpk-allin-flare .mpk-allin-tag {
  animation: mpk-allin-tagpulse 400ms ease-out both;
}

/* the SPOTLIGHT — vignette deepens ~45 % while a soft light cone
   holds on the caller of an all-in for 1.2 s (tz coordinate space,
   clipped to the rail capsule) */
#mp-poker-table-screen .mpk-spot {
  position: absolute;
  inset: 0;
  border-radius: 178px;
  z-index: 10;
  pointer-events: none;
  background:
    radial-gradient(95px 95px at var(--mpk-sx, 50%) var(--mpk-sy, 50%),
      rgba(255, 238, 190, 0.16) 0%,
      rgba(255, 238, 190, 0.05) 55%,
      transparent 75%),
    radial-gradient(120% 100% at 50% 45%,
      transparent 30%, rgba(0, 0, 0, 0.5) 100%);
  animation: mpk-spot 1200ms ease-in-out both;
}
@keyframes mpk-spot {
  0% { opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

/* D2 · the RED ALARM — an all-in call turns the room crimson for
   ~2.6 s: three slow pulses (~0.8 s apart — an alarm breath, not a
   strobe) on the dark room outside the felt (screen-space wash, kept
   transparent over the board/pods core) and on the felt's vignette
   edge (tz-space veil). Effective peaks stay ≤ ~35 % opacity so
   cards and pods never lose legibility. The caller's cone (below)
   stays warm-white and steady — the focal point inside the red
   room. z 14: over the table, under the react palette (15) and the
   scrim/sheets (20+). */
#mp-poker-table-screen .mpk-alarmwash {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 85% at 50% 42%,
      transparent 30%,
      rgba(155, 28, 46, 0.75) 68%,
      rgba(92, 20, 29, 0.92) 100%);
  opacity: 0;
  animation: mpk-alarm-breath 2600ms ease-in-out both;
}
#mp-poker-table-screen .mpk-alarmveil {
  position: absolute;
  inset: 0;
  border-radius: 178px;
  z-index: 10;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 45%,
      transparent 32%,
      rgba(155, 28, 46, 0.55) 78%,
      rgba(92, 20, 29, 0.80) 100%);
  opacity: 0;
  animation: mpk-alarm-breath 2600ms ease-in-out both;
}
/* pulse peaks at 21 / 52 / 82 % of 2600 ms → 546 / 1352 / 2132 ms */
@keyframes mpk-alarm-breath {
  0% { opacity: 0; }
  21% { opacity: 0.38; }
  36% { opacity: 0.14; }
  52% { opacity: 0.38; }
  67% { opacity: 0.14; }
  82% { opacity: 0.38; }
  100% { opacity: 0; }
}

/* the caller's cone during the alarm: warm-white only (the crimson
   vignette lives on the veil), steady across the whole window */
#mp-poker-table-screen .mpk-spot.mpk-spot-alarm {
  background:
    radial-gradient(95px 95px at var(--mpk-sx, 50%) var(--mpk-sy, 50%),
      rgba(255, 238, 190, 0.20) 0%,
      rgba(255, 238, 190, 0.06) 55%,
      transparent 75%);
  animation: mpk-spot-hold 2600ms ease-in-out both;
}
@keyframes mpk-spot-hold {
  0% { opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

/* the felt's gold pinline glows red for the alarm window */
#mp-poker-table-screen .mpk-tz.mpk-alarm-rim .mpk-felt {
  box-shadow:
    0 0 0 2px rgba(207, 66, 66, 0.70),
    0 0 0 3px rgba(0, 0, 0, 0.4),
    0 0 24px 5px rgba(155, 28, 46, 0.45);
  transition: box-shadow 250ms ease;
}

/* E · winner banner — «MAGNUS WINS · TWO PAIR, ACES AND KINGS»,
   docked between the pot cluster and the board */
#mp-poker-table-screen .mpk-banner {
  position: absolute;
  left: 50%;
  top: 164px;
  transform: translateX(-50%);
  z-index: 13;
  max-width: 335px;
  background: rgba(8, 6, 4, 0.88);
  border: 1px solid rgba(232, 200, 106, 0.55);
  border-radius: 99px;
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--mpk-gold-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55), 0 0 18px rgba(232, 200, 106, 0.18);
  transition: opacity 300ms ease;
}
/* uncontested pots stay quiet: a small muted line, no gold */
#mp-poker-table-screen .mpk-banner.mpk-banner-quiet {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--mpk-muted);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
#mp-poker-table-screen .mpk-banner.mpk-banner-hide { opacity: 0; }
@keyframes mpk-banner-in {
  from { transform: translateX(-50%) translateY(8px) scale(0.92); opacity: 0; }
  to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
#mp-poker-table-screen .mpk-anim-bannerin {
  animation: mpk-banner-in 280ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* F · pot grow-pulse (a > 20 BB sweep breathes into the plaque) */
@keyframes mpk-pot-grow {
  0% { transform: translateX(-50%) scale(1); }
  38% { transform: translateX(-50%) scale(1.07); }
  100% { transform: translateX(-50%) scale(1); }
}
#mp-poker-table-screen .mpk-pot.mpk-anim-potpulse {
  animation: mpk-pot-grow 500ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
}

/* G · pot-glow escalation — the plaque warms as pot/BB crosses
   50 / 100 / 250 («the loudest thing on screen is the pot») */
#mp-poker-table-screen .mpk-pot.mpk-warm1 .mpk-potplaque {
  border-color: rgba(232, 200, 106, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(232, 200, 106, 0.18);
}
#mp-poker-table-screen .mpk-pot.mpk-warm2 .mpk-potplaque {
  border-color: rgba(232, 200, 106, 0.75);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 16px rgba(232, 200, 106, 0.32);
  color: #f0d68a;
}
#mp-poker-table-screen .mpk-pot.mpk-warm3 .mpk-potplaque {
  border-color: rgba(240, 214, 138, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 22px rgba(232, 200, 106, 0.5);
  color: #f6e2a0;
}

/* B · back-to-lobby sheet */
#mp-poker-table-screen .mpk-leave-note {
  font-size: 12px;
  line-height: 1.6;
  color: #b8ae9c;
  margin: 2px 2px 14px;
}
#mp-poker-table-screen .mpk-leave-note b {
  color: var(--mpk-gold-hi);
  font-variant-numeric: tabular-nums;
}
#mp-poker-table-screen .mpk-leave-btn {
  display: block;
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
  color: #d8d2c6;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-table-screen .mpk-leave-btn.mpk-leave-gold {
  background: linear-gradient(180deg, #e9c76a, #b98e33);
  border: none;
  color: #241b08;
  box-shadow: 0 2px 10px rgba(201, 161, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
#mp-poker-table-screen .mpk-leave-btn.mpk-leave-danger {
  color: #d98a80;
  border-color: rgba(200, 90, 80, 0.45);
}
#mp-poker-table-screen .mpk-leave-btn:disabled { opacity: 0.4; pointer-events: none; }

/* reduced motion: the spotlight/cone is skipped (JS also guards),
   the alarm collapses to a static crimson tint (JS holds it 1 s),
   pops become fades, nothing slides */
@media (prefers-reduced-motion: reduce) {
  #mp-poker-table-screen .mpk-spot { display: none; }
  #mp-poker-table-screen .mpk-alarmwash,
  #mp-poker-table-screen .mpk-alarmveil {
    animation: none;
    opacity: 0.3;
  }
  #mp-poker-table-screen .mpk-react {
    animation: mpk-fade-in 120ms ease-out both;
  }
  #mp-poker-table-screen .mpk-anim-bannerin,
  #mp-poker-table-screen .mpk-allin-flare .mpk-avwrap::after {
    animation: mpk-fade-in 120ms ease-out both;
  }
  #mp-poker-table-screen .mpk-pot.mpk-anim-potpulse { animation: none; }
  #mp-poker-table-screen .mpk-reactbar,
  #mp-poker-table-screen .mpk-reactbtn,
  #mp-poker-table-screen .mpk-reacthint { transition: none; }
}

/* ── 19 · Sit & Go — «Les Sprints» (contracts §12.5) ─────────────
   Level strip between stage and hero zone, the BLINDS UP plaque
   variant, elimination plaques, the hero placements interim, and
   the finish (placements) sheet. Chip amounts on SNG tables carry
   no $FYM suffix — only prize amounts in sheets/ceremonies do. */

/* level strip — compact capsule; lives OUTSIDE .mpk-tzscale so the
   620 px scaled layout just costs the stage ~22 px of flex height */
#mp-poker-table-screen .mpk-lvl {
  flex: 0 0 22px;
  width: 100%;
  display: flex;
  align-items: center;
  /* right-aligned: the hero card fan rises ~14px into this row on
     the left — the right side is always clear */
  justify-content: flex-end;
  padding-right: 14px;
}
#mp-poker-table-screen .mpk-lvl-cap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(8, 6, 4, 0.6);
  border: 1px solid rgba(232, 200, 106, 0.28);
  border-radius: 99px;
  padding: 2px 12px;
  white-space: nowrap;
}
#mp-poker-table-screen .mpk-lvl-cap i {
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: #9a8c6a;
  font-weight: 800;
}
#mp-poker-table-screen .mpk-lvl-cap b {
  font-size: 11px;
  font-weight: 800;
  color: var(--mpk-gold-hi);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
#mp-poker-table-screen .mpk-lvl-sep {
  font-size: 10px;
  color: #5a5347;
  font-weight: 800;
}
#mp-poker-table-screen .mpk-lvl-t { min-width: 32px; text-align: right; }

/* «BLINDS UP · 20/40» — the house plaque, a shade more formal */
#mp-poker-table-screen .mpk-banner.mpk-banner-level {
  border-color: rgba(240, 214, 138, 0.85);
  letter-spacing: 0.16em;
  padding: 5px 18px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55), 0 0 22px rgba(232, 200, 106, 0.3);
}

/* «ELIMINATED · 4TH» — dignified plaque above the busted pod;
   gold variant when the rank is a paid place */
#mp-poker-table-screen .mpk-elim {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  z-index: 7;
  background: rgba(8, 6, 4, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  padding: 3px 10px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #cfc5b2;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
  animation: mpk-elim-in 300ms ease-out both;
  transition: opacity 320ms ease;
}
#mp-poker-table-screen .mpk-elim.mpk-elim-gold {
  border-color: rgba(232, 200, 106, 0.65);
  color: var(--mpk-gold-hi);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 0 14px rgba(232, 200, 106, 0.25);
}
#mp-poker-table-screen .mpk-elim.mpk-elim-out { opacity: 0; }
@keyframes mpk-elim-in {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* hero-zone placements interim — «You finished 4th · spectating» */
#mp-poker-table-screen .mpk-sng-interim {
  position: absolute;
  /* clear of the hero card fan (ends ~140px) — right-aligned like
     the YOU HAVE chip it replaces */
  left: 150px;
  right: 16px;
  top: 34px;
  text-align: right;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: #b8ae9c;
}
#mp-poker-table-screen .mpk-sng-interim.mpk-sng-paid {
  color: var(--mpk-gold-hi);
}

/* info-sheet PRIZES block */
#mp-poker-table-screen .mpk-prz-title {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #7a715f;
  font-weight: 800;
  margin: 10px 0 2px;
}

/* the finish sheet — rank list, gold rows for the paid places */
#mp-poker-table-screen .mpk-sngend-name {
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 17px;
  color: #e8d9ae;
  margin: 0 0 10px;
}
#mp-poker-table-screen .mpk-sngend-list { margin-bottom: 6px; }
#mp-poker-table-screen .mpk-sngend-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: #b8ae9c;
}
#mp-poker-table-screen .mpk-sngend-row b {
  flex: 0 0 32px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mpk-muted);
}
#mp-poker-table-screen .mpk-sngend-row span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-table-screen .mpk-sngend-row i {
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--mpk-muted);
}
#mp-poker-table-screen .mpk-sngend-row.mpk-sngend-paid {
  background: rgba(201, 161, 59, 0.06);
  border-bottom-color: rgba(232, 200, 106, 0.22);
}
#mp-poker-table-screen .mpk-sngend-row.mpk-sngend-paid b,
#mp-poker-table-screen .mpk-sngend-row.mpk-sngend-paid i {
  color: var(--mpk-gold-hi);
}
#mp-poker-table-screen .mpk-sngend-row.mpk-sngend-me span {
  color: #e6ddc8;
  font-weight: 700;
}

/* reduced motion: plaques become fades; the countdown stays live */
@media (prefers-reduced-motion: reduce) {
  #mp-poker-table-screen .mpk-elim {
    animation: mpk-fade-in 120ms ease-out both;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LOBBY — «Le Vestibule» (#mp-poker-lobby-screen)
   Spec: IMPLEMENTATION.md §6.2 · design/poker-plan.md §3 · Mockup 2A/2B
   (docs/poker-plan/index.html). All classes prefixed mpk-lob-.
   DOM is built by frontend/js/mp-poker-lobby.js at mount.
   ═══════════════════════════════════════════════════════════════════ */

#mp-poker-lobby-screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--gc-viewport-h, 100dvh);
  /* NO top padding. mp-poker-lobby is in game-chrome.css's screen
     lists, so body already reserves --fym-gc-top (bar + safe area)
     for this screen. Reserving the inset again here cost 105 px of
     dead band above the table list in Telegram fullscreen and clipped
     the same amount off the bottom, because the height above is the
     full available box. One owner per inset: the body. */
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(150% 100% at 50% 0%, #18130e 0%, #0b0806 55%, #070503 100%);
  color: #d8d2c6;
}

#mp-poker-lobby-screen .mpk-lob-root {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: 402px;
  min-height: 0;
  overflow: hidden;
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;

  --mpk-gold: #c9a13b;
  --mpk-gold-hi: #e8c86a;
  --mpk-ink: #d8d2c6;
  --mpk-muted: #8b8271;
  --mpk-danger: #cf5f52;
}

/* ── header: back · eyebrow + title · mode badge ─────────────── */

#mp-poker-lobby-screen .mpk-lob-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
  width: 100%;
}
#mp-poker-lobby-screen .mpk-lob-back {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: #b8ae9c;
  cursor: pointer;
}
#mp-poker-lobby-screen .mpk-lob-titles {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
#mp-poker-lobby-screen .mpk-lob-eyebrow {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--mpk-muted);
}
#mp-poker-lobby-screen .mpk-lob-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.25;
  color: #e8d9ae;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-lobby-screen .mpk-lob-mode {
  flex: 0 0 auto;
  min-width: 44px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  border: 1px solid rgba(232, 200, 106, 0.4);
  border-radius: 99px;
  padding: 2px 7px;
  color: var(--mpk-gold-hi);
  text-align: center;
  white-space: nowrap;
}
#mp-poker-lobby-screen .mpk-lob-mode-real {
  border-color: rgba(207, 95, 82, 0.55);
  color: #d98a80;
}

/* ── scroll body ─────────────────────────────────────────────── */

#mp-poker-lobby-screen .mpk-lob-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0 14px 12px;
}
#mp-poker-lobby-screen .mpk-lob-loading {
  padding: 40px 0;
  text-align: center;
  font-style: italic;
  font-size: 12px;
  color: var(--mpk-muted);
}

/* section divider — ── CERCLES ── */
#mp-poker-lobby-screen .mpk-lob-div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #7a715f;
  font-weight: 800;
  margin: 12px 0 7px;
}
#mp-poker-lobby-screen .mpk-lob-div::before,
#mp-poker-lobby-screen .mpk-lob-div::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

/* ── rows: stake tiles + Cercle rows (Mockup 2A .tile) ───────── */

#mp-poker-lobby-screen .mpk-lob-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 9px 12px;
  margin-bottom: 7px;
}
#mp-poker-lobby-screen .mpk-lob-tn {
  flex: 1 1 auto;
  min-width: 0;
}
#mp-poker-lobby-screen .mpk-lob-tn b {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 14.5px;
  color: #e2cf9b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-lobby-screen .mpk-lob-tn span {
  display: block;
  font-size: 10.5px;
  color: var(--mpk-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-lobby-screen .mpk-lob-fond {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: #b3a06a;
}
#mp-poker-lobby-screen .mpk-lob-tp {
  flex: 0 0 auto;
  text-align: right;
  font-size: 10.5px;
  color: #9a917f;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#mp-poker-lobby-screen .mpk-lob-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5cae83;
  margin-right: 4px;
  vertical-align: 1px;
}
#mp-poker-lobby-screen .mpk-lob-dot.mpk-lob-off { background: #5a5347; }

/* gold mini button — PLAY ▸ / JOIN / RESUME ▸ */
#mp-poker-lobby-screen .mpk-lob-btn {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #e5c369, #b98e33);
  color: #241b08;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 8px;
  padding: 8px 11px;
  min-height: 30px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
#mp-poker-lobby-screen .mpk-lob-btn.mpk-lob-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 200, 106, 0.4);
  color: var(--mpk-gold-hi);
  box-shadow: none;
}
#mp-poker-lobby-screen .mpk-lob-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* empty Cercles note */
#mp-poker-lobby-screen .mpk-lob-empty {
  padding: 14px 4px 10px;
  text-align: center;
  font-style: italic;
  font-size: 11.5px;
  color: var(--mpk-muted);
}

/* ── resume strip — «BACK TO YOUR TABLE» ─────────────────────── */

#mp-poker-lobby-screen .mpk-lob-resume {
  margin: 10px 0 4px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 13px;
  padding: 9px 10px 3px;
  background: rgba(201, 161, 59, 0.06);
  box-shadow: 0 0 18px rgba(201, 161, 59, 0.08) inset;
}
#mp-poker-lobby-screen .mpk-lob-resume-l {
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: #9a8c6a;
  font-weight: 800;
  margin: 0 2px 7px;
}
#mp-poker-lobby-screen .mpk-lob-row-resume {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
/* my_seats sitting-out state — «Sitting out · Xm left» (amber) */
#mp-poker-lobby-screen .mpk-lob-tn span.mpk-lob-sit {
  color: var(--mpk-gold-hi);
}

/* ── pinned CTA — + CREATE A CERCLE ──────────────────────────── */

#mp-poker-lobby-screen .mpk-lob-cta {
  flex: 0 0 48px;
  width: calc(100% - 28px);
  margin: 6px 14px calc(14px + var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px)));
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #e9c76a, #b98e33);
  color: #241b08;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ── scrim + bottom sheets ───────────────────────────────────── */

#mp-poker-lobby-screen .mpk-lob-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 2, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 20;
}
#mp-poker-lobby-screen .mpk-lob-scrim.mpk-lob-open {
  opacity: 1;
  pointer-events: auto;
}

#mp-poker-lobby-screen .mpk-lob-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  background: #16110c;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 12px 18px calc(18px + var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px)));
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(108%);
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
#mp-poker-lobby-screen .mpk-lob-sheet.mpk-lob-open { transform: translateY(0); }
#mp-poker-lobby-screen .mpk-lob-grab {
  width: 44px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto 12px;
}
#mp-poker-lobby-screen .mpk-lob-sh-title {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--mpk-gold-hi);
  text-align: center;
  margin-bottom: 14px;
  font-weight: 800;
}

/* sheet fields (Mockup 2B) */
#mp-poker-lobby-screen .mpk-lob-fld { margin-bottom: 14px; }
#mp-poker-lobby-screen .mpk-lob-fl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--mpk-muted);
  font-weight: 800;
  margin-bottom: 6px;
}
#mp-poker-lobby-screen .mpk-lob-fl b {
  color: var(--mpk-gold-hi);
  letter-spacing: 0.04em;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* blinds picker chips */
#mp-poker-lobby-screen .mpk-lob-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
#mp-poker-lobby-screen .mpk-lob-pick {
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  color: #b8ae9c;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 30px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
#mp-poker-lobby-screen .mpk-lob-pick.mpk-lob-on {
  color: #241b08;
  background: linear-gradient(180deg, #e5c369, #b98e33);
  border-color: transparent;
}

/* slider (shared by create + buy-in sheets) */
#mp-poker-lobby-screen .mpk-lob-slider {
  position: relative;
  height: 44px;
  touch-action: none;
  cursor: pointer;
}
#mp-poker-lobby-screen .mpk-lob-sl-tr {
  position: absolute;
  top: 20px;
  left: 2px;
  right: 2px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
#mp-poker-lobby-screen .mpk-lob-sl-fi {
  position: absolute;
  top: 20px;
  left: 2px;
  max-width: calc(100% - 4px);
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #b98e33, #e5c369);
  pointer-events: none;
}
#mp-poker-lobby-screen .mpk-lob-sl-th {
  position: absolute;
  top: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0d68a, #c49a3c);
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
#mp-poker-lobby-screen .mpk-lob-sl-scale {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #7a715f;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* segmented toggle — 6-MAX/HEADS-UP · OPEN/INVITE-ONLY */
#mp-poker-lobby-screen .mpk-lob-seg {
  display: flex;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
}
#mp-poker-lobby-screen .mpk-lob-seg span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 9px 0;
  color: var(--mpk-muted);
  cursor: pointer;
}
#mp-poker-lobby-screen .mpk-lob-seg span.mpk-lob-on {
  background: linear-gradient(180deg, #e5c369, #b98e33);
  color: #241b08;
}

/* sheet CTAs */
#mp-poker-lobby-screen .mpk-lob-go {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: none;
  margin-top: 4px;
  background: linear-gradient(180deg, #e9c76a, #b98e33);
  color: #241b08;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(201, 161, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
#mp-poker-lobby-screen .mpk-lob-go:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}
#mp-poker-lobby-screen .mpk-lob-ghost-go {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 200, 106, 0.4);
  color: var(--mpk-gold-hi);
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
#mp-poker-lobby-screen .mpk-lob-ghost-go:disabled {
  opacity: 0.4;
  cursor: default;
}

/* buy-in sheet specifics */
#mp-poker-lobby-screen .mpk-lob-bi-name {
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 15px;
  color: #e2cf9b;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-lobby-screen .mpk-lob-bi-blinds {
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--mpk-muted);
  font-weight: 800;
  margin-bottom: 10px;
}
#mp-poker-lobby-screen .mpk-lob-bi-val {
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  color: var(--mpk-gold-hi);
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}
#mp-poker-lobby-screen .mpk-lob-bi-bb {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mpk-muted);
  font-weight: 800;
  margin-bottom: 6px;
}
#mp-poker-lobby-screen .mpk-lob-bi-bal {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #9a917f;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
#mp-poker-lobby-screen .mpk-lob-bi-bal.mpk-lob-short { color: var(--mpk-danger); }
#mp-poker-lobby-screen .mpk-lob-bi-hint {
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: var(--mpk-danger);
  margin: 4px 0 2px;
}

/* ── SIT & GO tier cards — «Les Sprints» (§12.5, evcard recipe from
   the Vestibule mockup: quiet card, serif name, 6 seat dots) ────── */

#mp-poker-lobby-screen .mpk-lob-sng {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 13px;
  padding: 11px 13px;
  margin-bottom: 8px;
}
#mp-poker-lobby-screen .mpk-lob-sng.mpk-lob-sng-run {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 18px rgba(201, 161, 59, 0.10) inset;
}
#mp-poker-lobby-screen .mpk-lob-sng-et {
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: #9a8c6a;
  font-weight: 800;
}
#mp-poker-lobby-screen .mpk-lob-sng-en {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 16px;
  color: #e8d9ae;
  margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mp-poker-lobby-screen .mpk-lob-sng-es {
  font-size: 10.5px;
  color: #8b8271;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#mp-poker-lobby-screen .mpk-lob-sng-st {
  font-size: 10.5px;
  font-style: italic;
  color: var(--mpk-muted);
  margin-top: 2px;
}
#mp-poker-lobby-screen .mpk-lob-sng-st.mpk-lob-live {
  font-style: normal;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--mpk-gold-hi);
}
#mp-poker-lobby-screen .mpk-lob-sng-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  min-height: 30px;
}
#mp-poker-lobby-screen .mpk-lob-dots {
  display: flex;
  gap: 4px;
}
#mp-poker-lobby-screen .mpk-lob-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9a13b;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.35);
}
#mp-poker-lobby-screen .mpk-lob-dots i.mpk-lob-e {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
/* the sixth seat filled: the whole row goes lit gold */
#mp-poker-lobby-screen .mpk-lob-dots.mpk-lob-full i {
  background: var(--mpk-gold-hi);
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.35),
              0 0 6px rgba(232, 200, 106, 0.55);
}
#mp-poker-lobby-screen .mpk-lob-sng-hint {
  font-size: 10.5px;
  font-style: italic;
  color: var(--mpk-danger);
  margin-top: 6px;
}

/* ── LES GRANDS CERCLES — admin tournament event cards (§13.4;
   Mockup 2A .evcard.gc: gold border + inset glow, .cdown countdown
   boxes). Text recipes are shared with the SNG cards above. ────── */

#mp-poker-lobby-screen .mpk-lob-ev {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 13px;
  padding: 11px 13px;
  margin-bottom: 8px;
  box-shadow: 0 0 18px rgba(201, 161, 59, 0.10) inset;
}
/* «You are registered» — the state line goes gold */
#mp-poker-lobby-screen .mpk-lob-sng-st.mpk-lob-ev-reg {
  color: var(--mpk-gold-hi);
}
/* STARTS-IN countdown — HH:MM:SS in gold-bordered boxes */
#mp-poker-lobby-screen .mpk-lob-cd {
  display: flex;
  align-items: center;
  gap: 5px;
}
#mp-poker-lobby-screen .mpk-lob-cd b {
  background: rgba(8, 6, 4, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mpk-gold-hi);
  font-variant-numeric: tabular-nums;
}
#mp-poker-lobby-screen .mpk-lob-cd span {
  color: #7a715f;
  font-weight: 800;
}
/* dim RUNNING label — the spectator view of a live Grand Cercle */
#mp-poker-lobby-screen .mpk-lob-ev-dim {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--mpk-muted);
  padding: 8px 2px;
  white-space: nowrap;
}

/* invite sheet specifics */
#mp-poker-lobby-screen .mpk-lob-inv-note {
  font-size: 11.5px;
  font-style: italic;
  color: #b8ae9c;
  line-height: 1.55;
  text-align: center;
  margin: 0 4px 12px;
}
#mp-poker-lobby-screen .mpk-lob-inv-seat { margin-top: 14px; }

/* reduced motion: sheets and scrim snap instead of sliding */
@media (prefers-reduced-motion: reduce) {
  #mp-poker-lobby-screen .mpk-lob-sheet,
  #mp-poker-lobby-screen .mpk-lob-scrim { transition: none; }
}