/* Poker SNG — the mock's felt, value for value.
   Copied from console.html §MATCH SCREENS (`m.isPoker`, desktop and phone)
   rather than eyeballed: the oval is `width:min(600px,80%); aspect-ratio:1.62;
   border-radius:50%/34%; border:2px solid rgba(241,193,82,.24)`, a board card
   is `56×80 @ 9px` on the warm stock `linear-gradient(160deg,#fdfaf2,#e6dfd0)`,
   a seat plate is `padding:7px 11px 7px 7px; border-radius:12px; gap:8px` with
   a `30×30 @ 9px` avatar, and my own cards are `64×92` with the gold rim.

   NARROW-FIRST, and the breakpoint is `@container scene`, never `@media`: at a
   1280px window the scene is 858px. The phone is the mock's other drawing — a
   scrolling strip of stacks, a rounded felt PANEL and my cards below it — and
   the console layer turns the same three nodes into the oval.

   The felt is the one place a raw colour survives: green baize is not a token
   the console has, and the two stops are the mock's own. */

.view-poker {
  /* One screenful, not a page. `--match-h` is written by fitMatchColumn() in
     ui/board.js from the SCENE's measured height; the fallback keeps the old
     scrolling layout in a browser without ResizeObserver. */
  --pk-felt-bg: radial-gradient(ellipse at center, rgba(24, 64, 48, 0.7), rgba(12, 30, 24, 0.85));
  --pk-card-w: 42px;
  --pk-card-h: 60px;
  --pk-card-r: 7px;
  --pk-card-rank: 11px;
  --pk-card-suit: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  /* A floor rather than a fixed height on a phone: six stacks, a felt and my
     cards fit the scene, but clipping the action row would be the exact defect
     the chess board was fixed for. */
  min-height: var(--match-h, auto);
}

/* The shared Arena entrance animation is correct for static views, but a
   realtime Poker snapshot replaces these direct children repeatedly. WebKit
   restarts `.view > * { animation: fadeUp ... both }` on every replacement
   and can consequently keep the whole table on its opacity:0 first frame.
   Poker owns its motion at the event/object level (deal, fold, chips, seat
   actions), so its realtime shell must never inherit the generic page-entry
   animation. */
.view-poker,
.view-poker > * { animation: none; }

/* A live hand owns the screen. The general Arena rail/context/action bars are
   useful in the lobby, but on a table they used to consume 500+ desktop
   pixels and the complete mobile tabbar row. Keep one compact Arena header
   for identity/connection and let the table toolbar own game navigation. */
body.poker-table-route .shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(42px + env(safe-area-inset-top)) minmax(0, 1fr);
  grid-template-areas: "hud" "scene";
}
body.poker-table-route #rail.shell-rail,
body.poker-table-route #ctx.shell-ctx,
body.poker-table-route #marquee.shell-marquee,
body.poker-table-route #act.shell-act,
body.poker-table-route #tabbar.shell-tabbar { display: none; }
body.poker-table-route #hud.shell-hud {
  height: calc(42px + env(safe-area-inset-top));
  min-height: 0;
  padding: env(safe-area-inset-top) 10px 0;
}
body.poker-table-route #hud .hud-left,
body.poker-table-route #hud .hud-tail,
body.poker-table-route #hud #hudMeta,
body.poker-table-route #hud .icon-btn { display: none; }
body.poker-table-route #scene.shell-scene .container {
  max-width: none;
  padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
}
body.poker-table-route .view-poker { max-width: none; }

.pk-table-bar{display:flex;align-items:center;gap:6px;min-height:38px;padding:4px 8px;border:1px solid rgba(220,190,118,.22);border-radius:12px;background:rgba(5,8,11,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none}.pk-table-name{font:700 11px/1.1 var(--font-display);letter-spacing:.06em;color:#e8d8b1;white-space:nowrap;margin-right:auto}.pk-tool{min-height:28px;padding:0 9px;border:1px solid rgba(226,196,125,.24);border-radius:8px;background:rgba(255,255,255,.04);color:#d8c9a7;font:700 10px/1 var(--font-display);white-space:nowrap}.pk-tool.is-on,.pk-tool:active{background:#b98c3b;color:#0b0d0f}.pk-spectator{font:700 9px/1 var(--font-display);letter-spacing:.12em;color:#d4a94e;white-space:nowrap}.pk-chat{position:absolute;z-index:24;right:12px;top:58px;width:min(330px,calc(100% - 24px));max-height:min(64vh,510px);padding:10px;border:1px solid rgba(221,187,113,.28);border-radius:14px;background:rgba(4,7,9,.94);box-shadow:0 22px 60px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.pk-chat-log{display:flex;flex-direction:column;gap:5px;max-height:330px;overflow:auto}.pk-chat-message{display:grid;grid-template-columns:auto 1fr auto auto;gap:7px;align-items:center;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:11px;color:#e5ddca}.pk-chat-message b{color:#d1a74f}.pk-chat-message button{border:0;background:transparent;color:#857b69}.pk-chat-message.is-reaction{font-size:22px}.pk-reactions,.pk-chat-compose{display:flex;gap:5px;margin-top:8px}.pk-reactions .pk-tool{flex:1;font-size:17px}.pk-chat-compose input{min-width:0;flex:1;border:1px solid rgba(221,187,113,.2);border-radius:8px;background:#0d1114;color:#fff;padding:0 10px}.view-poker{position:relative}
.pk-settings{position:absolute;z-index:30;right:8px;top:42px;display:grid;gap:5px;padding:8px;border:1px solid #caa35455;border-radius:10px;background:#070a0deF;box-shadow:0 14px 42px #0009}.pk-settings .pk-tool{text-align:left}.pk-reduced-motion *{animation:none!important;transition:opacity .1s linear!important;scroll-behavior:auto!important}

@media(max-width:700px){.pk-table-bar{border-radius:0;padding-inline:5px}.view-poker:not(.is-short) .pk-table-bar{flex-wrap:wrap;overflow:visible}.pk-table-name{display:none}.pk-chat{right:6px;top:48px;width:calc(100% - 12px);max-height:72vh}.pk-chat-log{max-height:44vh}}
@media(max-height:500px) and (orientation:landscape){.pk-table-name{display:none}.pk-table-bar{gap:4px;padding-inline:5px;overflow:visible}.pk-tool{padding-inline:7px}}
.view-poker > * { flex: 0 0 auto; }
.pk-stage { flex: 1 1 auto; min-height: 0; }

/* === failure ============================================================
   The one block every screen shows when it could not read. It takes the whole
   view: a felt with no pot and no cards on it is not a table. */
.pk-fail { flex: 1 1 auto; min-height: 0; }
.pk-fail-card {
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--panel-strong);
  border: 1px solid var(--glass-brd);
}

/* === the stage ==========================================================
   Phone: a column of strip → felt panel → my cards. */
.pk-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* === the felt =========================================================== */
.pk-felt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 12px;
  border-radius: 18px;
  border: 1px solid rgba(var(--t-gold), 0.2);
  background: var(--pk-felt-bg);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.55);
}
.pk-pot-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pk-pot {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The pot's chip pile: five discs fanned by the pot's own size. */
.pk-pot-chips {
  position: relative;
  width: 34px;
  height: 14px;
  flex: 0 0 auto;
}
.pk-pot-chips b {
  position: absolute;
  width: 14px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #f1d486 0 42%, #b98c3b 43% 66%, #6d4c1b 67%);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pk-pot-chips b:nth-child(1) { left: 0; bottom: 0; }
.pk-pot-chips b:nth-child(2) { left: 5px; bottom: 4px; }
.pk-pot-chips b:nth-child(3) { left: 10px; bottom: 0; }
.pk-pot-chips b:nth-child(4) { left: 15px; bottom: 4px; }
.pk-pot-chips b:nth-child(5) { left: 20px; bottom: 0; }
.pk-pot-chips.is-empty { display: none; }
.pk-pot-chips.is-big b { background: radial-gradient(ellipse at 50% 38%, #fbe9b8 0 42%, #d8a94e 43% 66%, #7d5a1f 67%); }
.pk-street {
  font-size: 9px;
  text-align: center;
  text-transform: lowercase;
  color: var(--text-faint);
}

/* === cards ==============================================================
   One card, two sizes: the board takes the view's vars, my own two override
   them and add the gold rim the mock gives the highlighted card. */
.pk-board { display: flex; gap: 5px; }
.pk-card,
.pk-card-slot {
  width: var(--pk-card-w);
  height: var(--pk-card-h);
  flex: 0 0 auto;
  border-radius: var(--pk-card-r);
}
.pk-card.is-dealt { animation: pk-deal 0.36s var(--spring) both; }
@keyframes pk-deal {
  from { opacity: 0; transform: translateY(-18px) rotate(-4deg) scale(0.92); }
  to { opacity: 1; transform: none; }
}
/* A fresh hand flies from the deck to each seat and to me. --fly-x/--fly-y
   are the real pixel deltas written by the view for exactly one render. */
.view-poker.is-new-hand .pk-seat-cards i,
.view-poker.is-new-hand .pk-hole-cards .pk-card {
  animation: pk-deal-fly 0.55s var(--spring) both;
}
.view-poker.is-new-hand .pk-hole-cards .pk-card:last-child { animation-delay: 0.12s; }
@keyframes pk-deal-fly {
  from { opacity: 0; transform: translate(var(--fly-x, 0), var(--fly-y, -40px)) scale(1.25) rotate(8deg); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.pk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: linear-gradient(160deg, #fdfaf2, #e6dfd0);
  border: 1px solid rgba(0, 0, 0, 0.35);
  color: #141026;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.pk-card.is-red { color: #e0566a; }
.pk-card-rank { font-size: var(--pk-card-rank); font-weight: 800; line-height: 1; }
.pk-card-suit { font-size: var(--pk-card-suit); line-height: 1; }
.pk-card-slot {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.2);
}

/* Physical table objects. They never carry game truth; the server-authored
   dealer_pos, bets and pots only decide where these deterministic objects sit. */
.pk-deck {
  position: absolute;
  z-index: 2;
  left: var(--pk-deck-x, 70%);
  top: var(--pk-deck-y, 30%);
  width: 30px;
  height: 44px;
  transform: translate(-50%, -50%) rotate(4deg);
  pointer-events: none;
}
.pk-deck i,
.pk-seat-cards i {
  position: absolute;
  inset: 0;
  border: 1px solid #d2b668;
  border-radius: 4px;
  background: url(../../assets/poker/arena-noir-card-back.webp) center/cover no-repeat #120e1d;
  box-shadow: 0 3px 8px rgba(0,0,0,.55);
}
.pk-deck i:nth-child(1) { transform: translate(-3px,3px); opacity:.75; }
.pk-deck i:nth-child(2) { transform: translate(-1px,1px); }
.pk-muck {
  position: absolute;
  z-index: 1;
  left: 31%;
  top: 61%;
  padding: 5px 9px;
  border: 1px dashed rgba(213,181,105,.2);
  border-radius: 50%;
  color: rgba(235,221,187,.28);
  font: 700 8px/1 ui-monospace;
  letter-spacing: .16em;
  transform: rotate(-8deg);
}
.pk-side-pots { display:flex; flex-wrap:wrap; gap:5px; min-height:16px; justify-content:center; }
.pk-side-pots span { padding:3px 7px; border-radius:20px; color:#d5bb77; background:rgba(7,20,15,.72); font:700 8px/1 ui-monospace; white-space:nowrap; }
.pk-seat-cards { position:relative; width:34px; height:25px; margin-top:-9px; }
.pk-seat-cards i { width:20px; height:28px; }
.pk-seat-cards i:first-child { left:0; transform:rotate(-8deg); }
.pk-seat-cards i:last-child { left:13px; transform:rotate(8deg); }

/* === my two cards ======================================================= */
.pk-hole {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.pk-hole-cards {
  display: flex;
  gap: 5px;
  --pk-card-w: 54px;
  --pk-card-h: 78px;
  --pk-card-r: 9px;
  --pk-card-rank: 14px;
  --pk-card-suit: 21px;
}
.pk-card.is-mine {
  border-color: rgba(var(--t-gold), 0.9);
  box-shadow: 0 0 20px rgba(var(--t-gold), 0.5), 0 6px 16px rgba(0, 0, 0, 0.5);
}
/* The hand my cards actually make, computed with the engine's own ranking —
   the payload ships neither the name nor the rank. It renders on the felt
   under the pot (.pk-hand-strength), not under the cards. */
.pk-hand-strength {
  margin-top: -4px;
  font: 800 calc(11.5px * var(--pk-zoom, 1))/1.2 var(--font-body);
  color: #eaf6ee;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  letter-spacing: .02em;
  text-align: center;
}
.pk-hand-strength.pop { animation: pk-hs-pop .5s; }
.pk-hand-strength.is-hot { color: #ffd97a; }
@keyframes pk-hs-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.18); } }

/* === the seats ==========================================================
   Phone: a horizontal strip of stacks. My own seat leads it — the mock drops
   it because its match hud carries my stack, and this screen has no hud. */
.pk-seats {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* No bar, ever — and this one is load-bearing, not cosmetic. base.css puts
     `scrollbar-width: thin` on `*`, which on a classic-scrollbar platform is an
     11px gutter the strip only pays for once its content overflows. Plates
     used to grow mid-hand when bet pills landed on them (bets now live on the
     felt as `.pk-bet-felt`), so the row crossed the container's width on the
     flop, took the gutter, and pushed the felt — and the community board
     under it — down 11px, then back up at
     showdown. That is the jumping-board defect one step sideways. Overlay
     scrollbars (every phone, and this Mac's own Chrome outside headless) hide
     it, so the only honest fix is the one that does not depend on which kind
     the platform draws. Same pattern as .game-tabs / .ach-filter-row /
     .g-react-scroll: a chip strip scrolls, it does not advertise. */
  scrollbar-width: none;
  /* The dealer badge hangs 7px off the chip's top corner, and a scroller
     clips its own overflow — without this it is drawn with its head cut off. */
  padding: 8px 0 2px;
}
.pk-seats::-webkit-scrollbar { display: none; }
.pk-seat {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid rgba(var(--t-violet), 0.22);
  background: rgba(16, 11, 30, 0.85);
}
.pk-seat.is-out { opacity: 0.42; }
.pk-seat.is-me { border-color: rgba(var(--t-gold), 0.4); background: rgba(48, 32, 14, 0.9); }
.pk-seat.is-turn { border-color: rgba(var(--t-gold), 0.8); box-shadow: 0 0 24px rgba(var(--t-gold), 0.4); }
.pk-seat.is-acted { animation: pk-seat-act 0.42s var(--spring) both; }
@keyframes pk-seat-act {
  45% { transform: translateY(-3px) scale(1.035); }
}
.pk-seat.is-folding { animation: pk-fold-strip 0.48s ease both; }
@keyframes pk-fold-strip {
  35% { transform: translateY(4px) rotate(-2deg); opacity: 0.9; }
  to { transform: translateY(0); opacity: 0.42; filter: saturate(0.35); }
}
.view-poker.is-new-hand .pk-felt { animation: pk-new-hand 0.5s var(--spring) both; }
@keyframes pk-new-hand {
  from { opacity: 0.55; filter: brightness(0.72) saturate(0.7); }
  55% { filter: brightness(1.12) saturate(1.08); }
}
/* On a phone the plate IS the chip, so it stops being a box of its own. */
.pk-plate { display: contents; }
.pk-plate-body { display: contents; }
.pk-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #241638);
  border: 1px solid rgba(var(--t-violet), 0.3);
}
.pk-seat-name { display: none; }
/* `.clan-tag-chip` is a shared component and its stylesheet loads after this
   one, so hiding the tag on the phone chip needs the extra class to win. */
.pk-seat .pk-clan { display: none; }
.pk-seat-stack {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(var(--t-mute), 0.66);
  font-variant-numeric: tabular-nums;
}
.pk-seat.is-me .pk-seat-stack { color: var(--gold); }
.pk-seat-stack.is-out { color: rgba(var(--t-danger), 0.7); }
/* Narrow strip layout: the felt has no room for a floating badge, so the bet
   rides the plate as a compact pill with the same denominated chips. */
.pk-bet {
  position: absolute;
  top: -9px;
  right: -6px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(6, 10, 8, .88);
  border: 1px solid rgba(var(--t-gold), .25);
  font: 800 9px/1.2 ui-monospace, monospace;
  color: #fff;
  white-space: nowrap;
}
.pk-bet .pk-chipstack { width: 13px; height: 9px; }
.pk-bet .pk-chipstack b { height: 5px; }
.pk-bet .pk-chipstack b:nth-child(2) { bottom: 2px; }
.pk-bet .pk-chipstack b:nth-child(3) { bottom: 4px; }
/* Bets live on the felt: a badge between the seat and the pot with a
   denominated chip stack (tier palettes come from poker_stars.css), a pop-in
   on the first chip, a bump on every re-bet, and a glide into the pot at the
   street boundary (is-sweep). */
.pk-bet-felt {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: calc(4px * var(--pk-zoom, 1));
  padding: calc(2.5px * var(--pk-zoom, 1)) calc(8px * var(--pk-zoom, 1));
  border-radius: 999px;
  background: rgba(6, 10, 8, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  font: 800 calc(11px * var(--pk-zoom, 1))/1 ui-monospace, monospace;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transition: left .5s, top .5s, opacity .4s, transform .3s;
  animation: pk-bet-in .35s;
  pointer-events: none;
}
.pk-bet-felt .pk-chipstack { width: calc(15px * var(--pk-zoom, 1)); height: calc(11px * var(--pk-zoom, 1)); }
.pk-bet-felt .pk-chipstack b { height: calc(6px * var(--pk-zoom, 1)); }
.pk-bet-felt .pk-chipstack b:nth-child(2) { bottom: calc(2.5px * var(--pk-zoom, 1)); }
.pk-bet-felt .pk-chipstack b:nth-child(3) { bottom: calc(5px * var(--pk-zoom, 1)); }
.pk-bet-felt.is-bump { animation: pk-bet-bump .4s; }
.pk-bet-felt.is-sweep { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
.pk-bet-felt .amt { font-variant-numeric: tabular-nums; }
@keyframes pk-bet-in { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
@keyframes pk-bet-bump { 40% { transform: translate(-50%, -50%) scale(1.22); } }
/* Chips arcing from the acting seat to its bet badge. */
.pk-fly-chip {
  position: absolute;
  z-index: 25;
  width: 18px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  background-image: repeating-conic-gradient(from 8deg, rgba(0,0,0,0) 0deg 30deg, rgba(255,255,255,.85) 30deg 60deg),
    radial-gradient(ellipse at 50% 38%, #b8862a 0 42%, #7d5a1f 43% 66%, #4d3a12 67%);
  border: 1px solid rgba(0, 0, 0, .5);
  transition: transform .55s ease-out, opacity .55s;
}
.pk-fly-chip.out { opacity: 0; }
/* The bet rides a real chip stack, not a text dot: three gold-rimmed discs. */
.pk-chipstack {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 12px;
  flex: 0 0 auto;
}
.pk-chipstack b {
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #f1d486 0 42%, #b98c3b 43% 66%, #6d4c1b 67%);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pk-chipstack b:nth-child(1) { bottom: 0; }
.pk-chipstack b:nth-child(2) { bottom: 3px; }
.pk-chipstack b:nth-child(3) { bottom: 6px; }
.pk-dealer {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  background: #fdfaf2;
  color: #1a1030;
}
/* A seated-but-not-dealt player is table furniture, not a ghost, on every
   viewport: the badge hangs under the plate and never inflates it. */
.pk-seat.is-waiting .pk-plate {
  border-style: dashed;
  background: rgba(16, 11, 30, 0.62);
}
.pk-seat.is-waiting .pk-avatar,
.pk-seat.is-waiting .pk-plate-body { opacity: 0.62; }
.pk-seat-wait {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(7, 20, 15, 0.8);
  color: #a9b8ae;
  font: 700 8px/1.6 ui-monospace;
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
}
.pk-seat.is-winner .pk-plate {
  border-color: rgba(var(--t-gold), 0.95);
  box-shadow: 0 0 30px rgba(var(--t-gold), 0.55), 0 0 8px rgba(var(--t-gold), 0.7);
}

/* Tall phones have enough vertical room for the actual table geometry. Keep
   every seat visible around the felt instead of turning the room into a
   clipped horizontal roster. The same manually tuned 2/4/6/8/10 coordinates
   drive desktop and portrait; clamp protects the physical edge plates. */
@container scene (max-width: 619px) {
  .view-poker:not(.is-short) .pk-seat-wait { padding-inline: 5px; font-size: 7px; letter-spacing: 0.06em; }
  .view-poker:not(.is-short) .pk-stage { display: block; min-height: 430px; }
  .view-poker:not(.is-short) .pk-felt {
    position: absolute;
    left: 50%;
    top: 46%;
    width: calc(100% - 42px);
    height: min(205px, 42%);
    transform: translate(-50%, -50%);
    justify-content: center;
    padding: 0;
    border-radius: 50% / 34%;
  }
  .view-poker:not(.is-short) .pk-deck[data-side="left"] { left: 2%; }
  .view-poker:not(.is-short) .pk-deck[data-side="right"] { left: 98%; }
  .view-poker:not(.is-short) .pk-seats {
    position: absolute;
    /* Seats precede the felt in DOM so the compact strip keeps its reading
       order. Once they become a ring, lift them above that later-painted felt
       or the 4-max side plates disappear exactly under the oval's midline. */
    z-index: 3;
    inset: 0;
    display: block;
    overflow: visible;
    padding: 0;
    pointer-events: none;
  }
  .view-poker:not(.is-short) .pk-seat {
    position: absolute;
    left: clamp(46px, var(--pk-x), calc(100% - 46px));
    top: clamp(25px, var(--pk-y), calc(100% - 25px));
    transform: translate(-50%, -50%);
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .view-poker:not(.is-short) .pk-plate {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 5px 4px 4px;
    border: 1px solid rgba(var(--t-violet), 0.24);
    border-radius: 9px;
    background: rgba(16, 11, 30, 0.94);
  }
  .view-poker:not(.is-short) .pk-plate-body { display: flex; flex-direction: column; min-width: 0; }
  .view-poker:not(.is-short) .pk-avatar { width: 19px; height: 19px; border-radius: 6px; font-size: 9px; }
  .view-poker:not(.is-short) .pk-seat-stack { font-size: 8.5px; }
  .view-poker:not(.is-short) .pk-seat-cards { transform: scale(.78); transform-origin: top center; margin-bottom:-7px; }
  .view-poker:not(.is-short) .pk-seat.is-me .pk-plate { border-color: rgba(var(--t-gold), 0.45); background: rgba(48, 32, 14, 0.94); }
  .view-poker:not(.is-short) .pk-seat.is-turn .pk-plate { border-color: rgba(var(--t-gold), 0.8); box-shadow: 0 0 18px rgba(var(--t-gold), 0.35); }
  .view-poker:not(.is-short) .pk-hole { position:absolute; z-index:4; left:50%; bottom:12%; transform:translateX(-50%); }
  .view-poker:not(.is-short) .pk-hole-cards { --pk-card-w:46px; --pk-card-h:66px; --pk-card-rank:12px; --pk-card-suit:18px; }
}

/* === what is happening now ============================================= */
.pk-context {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--t-violet), 0.28);
  border-radius: 11px;
  background: rgba(17, 11, 31, 0.88);
}
.pk-context::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--pk-clock, 1) * 100%);
  height: 2px;
  background: var(--gold-grad);
  transition: width 0.25s linear;
}
.pk-context.is-urgent { border-color: rgba(var(--t-danger), 0.48); }
.pk-context.is-urgent::after { background: var(--danger); }
.pk-context-text { min-width: 0; font-size: 11.5px; font-weight: 750; color: var(--text); }
.pk-context-meta { flex: 0 0 auto; font-size: 10px; color: var(--text-soft); white-space: nowrap; }

/* === the action row ===================================================== */
.pk-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
.pk-raise-control {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 150px;
}
.pk-raise-range {
  width: 82px;
  accent-color: rgb(var(--t-gold));
}
.pk-raise-presets { display:flex; align-items:center; gap:4px; }
.pk-raise-presets button { min-width:34px; height:28px; padding:0 7px; border:1px solid rgba(var(--t-gold),.22); border-radius:7px; color:var(--gold); background:rgba(var(--t-gold),.07); font:800 9px/1 ui-monospace; }
.pk-raise-presets output { min-width:82px; color:var(--text-soft); font:700 9px/1 ui-monospace; text-align:center; }
.pk-act {
  flex: 0 1 auto;
  min-width: 0;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s var(--spring), background 0.18s, border-color 0.18s;
  border: 1px solid transparent;
}
/* Three tones, and each action gets exactly one: check and call are the
   console's neutral chip, fold and all-in are the two that end something, and
   the raise is the single gold action of the row. */
.pk-act-plain {
  border-color: rgba(var(--t-violet), 0.26);
  background: rgba(20, 13, 38, 0.55);
  color: var(--text-dim);
}
/* A poker decision is a tap you cannot take back, so the target keeps the
   console's 44px on a touch screen even though the mock's chip is 33px tall. */
@media (pointer: coarse) {
  .pk-act { min-height: 44px; }
}
.pk-act-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .pk-act:hover:not(:disabled) { transform: translateY(-2px); }
}
.pk-act:active:not(:disabled) { transform: scale(0.97); }
.pk-act:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.pk-act-fold,
.pk-act-allin {
  border-color: rgba(var(--t-danger), 0.34);
  background: rgba(var(--t-danger), 0.07);
  color: #ff8a94;
}
.pk-act-raise {
  padding: 9px 20px;
  border-color: transparent;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(var(--t-gold), 0.28);
}

/* Not my decision point. An empty row under a live table reads as a screen
   that stopped working, so it says which it is. */
.pk-turn-note { font-size: 11px; color: var(--text-soft); }

/* === the closed table ===================================================
   What the table was worth: a rated match (≥2 human seats) prints the Glicko
   delta the finalize stamped — green up, red down, violet when nothing moved
   — or the bare tag while the state view does not ship the outcome; a table
   of one human and bots is one quiet line. */
.pk-over {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--panel-strong);
  border: 1px solid var(--glass-brd);
  text-align: center;
}
.pk-over-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.pk-over-rate { display: inline-flex; align-items: center; gap: 7px; }
.pk-over-rate-delta {
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pk-over-rate-delta.is-up { background: rgba(var(--t-ok), 0.12); border: 1px solid rgba(var(--t-ok), 0.3); color: var(--ok); }
.pk-over-rate-delta.is-down { background: rgba(var(--t-danger), 0.12); border: 1px solid rgba(var(--t-danger), 0.3); color: var(--danger); }
.pk-over-rate-delta.is-flat { background: rgba(var(--t-violet), 0.14); border: 1px solid rgba(var(--t-violet), 0.28); color: var(--violet-300); }
.pk-over-rate-line { font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }
.pk-over-tag {
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: rgba(var(--t-violet), 0.14);
  border: 1px solid rgba(var(--t-violet), 0.28);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-300);
}
.pk-over-tag-sub { flex: 1 1 240px; font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }
.pk-placements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 5px;
  width: 100%;
}
.pk-place {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(var(--t-violet), 0.08);
  font-size: 9.5px;
  text-align: left;
}
.pk-place > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-place > .mono { color: var(--text-soft); }
.pk-place.is-me { background: rgba(var(--t-gold), 0.13); color: var(--gold); }
/* The defeat CTA row: «Отыграться» leads, the way out is beside it. Full width
   so the primary button reads as the action, not a footnote of the closed
   table (same shape as quiz's .qz-over-acts). */
.pk-over-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; }

/* === the console: the oval ==============================================
   `--pk-felt-h` / `--pk-felt-w` are written by the view from the STAGE's own
   measured box (see sizeFeltWithStage() in views/poker.js, which says why the
   sum cannot live here). The fallbacks are the mock's own 600×370.4, so a
   browser without ResizeObserver gets the drawing rather than a collapsed one. */
@container scene (min-width: 620px) {
  .view-poker {
    gap: 12px;
    height: var(--match-h, auto);
    min-height: 0;
    /* Every drawn element scales with the felt via --pk-zoom (1 = the mock's
       370.4px felt). calc() on the vars keeps card stock, rank and suit in
       proportion at any window size. */
    --pk-card-w: calc(56px * var(--pk-zoom, 1));
    --pk-card-h: calc(80px * var(--pk-zoom, 1));
    --pk-card-r: calc(9px * var(--pk-zoom, 1));
    --pk-card-rank: calc(15px * var(--pk-zoom, 1));
    --pk-card-suit: calc(22px * var(--pk-zoom, 1));
  }
  .pk-stage { display: block; }
  .pk-felt {
    position: absolute;
    left: 50%;
    top: 50%;
    height: var(--pk-felt-h, 370.4px);
    width: var(--pk-felt-w, 600px);
    transform: translate(-50%, -50%);
    justify-content: center;
    gap: calc(13px * var(--pk-zoom, 1));
    /* My own cards hang into the lower third of the oval, and the street line
       is the last thing above them. At the mock's own 370.4px felt they clear
       each other by 4.7px; on a shorter scene the felt shrinks and they would
       not, so the content is pushed up by exactly what the felt lost. Zero at
       the mock's size, which is why this is a max() and not a constant. */
    padding: 0 0 max(0px, calc(370.4px - var(--pk-felt-h, 370.4px)));
    border: 2px solid rgba(var(--t-gold), 0.24);
    border-radius: 50% / 34%;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6), 0 26px 70px rgba(0, 0, 0, 0.6);
  }
  .pk-pot-label { font-size: calc(10px * var(--pk-zoom, 1)); letter-spacing: 0.2em; }
  .pk-pot { font-size: calc(26px * var(--pk-zoom, 1)); text-shadow: 0 0 22px rgba(var(--t-gold), 0.4); }
  .pk-board { gap: calc(8px * var(--pk-zoom, 1)); }
  .pk-street { font-size: calc(10px * var(--pk-zoom, 1)); }

  /* Hanging off the felt's lower edge by the mock's 26px, measured from the
     stage's own middle so it tracks the oval at every size. */
  .pk-hole {
    position: absolute;
    z-index: 4;
    left: 50%;
    /* A short hang past the felt's lower edge, scaled with the felt; the hero
       plate below keeps its clearance at every zoom. */
    bottom: calc(50% - var(--pk-felt-h, 370.4px) / 2 - calc(4px * var(--pk-zoom, 1)));
    transform: translateX(-50%);
    flex-direction: column;
    gap: 5px;
  }
  .pk-hole-cards {
    --pk-card-w: calc(64px * var(--pk-zoom, 1));
    --pk-card-h: calc(92px * var(--pk-zoom, 1));
    --pk-card-rank: calc(17px * var(--pk-zoom, 1));
    --pk-card-suit: calc(25px * var(--pk-zoom, 1));
  }

  /* The strip becomes the ring: an overlay the exact size of the stage, with
     each plate pinned to its point on the oval. */
  .pk-seats {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    overflow: visible;
    padding: 0;
    pointer-events: none;
  }
  .pk-seat {
    position: absolute;
    left: var(--pk-x);
    top: var(--pk-y);
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    gap: calc(5px * var(--pk-zoom, 1));
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .pk-seat.is-out { opacity: 0.4; }
  .pk-plate {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(8px * var(--pk-zoom, 1));
    padding: calc(7px * var(--pk-zoom, 1)) calc(11px * var(--pk-zoom, 1)) calc(7px * var(--pk-zoom, 1)) calc(7px * var(--pk-zoom, 1));
    border-radius: calc(12px * var(--pk-zoom, 1));
    border: 1px solid rgba(var(--t-violet), 0.24);
    background: rgba(16, 11, 30, 0.92);
  }
  .pk-seat.is-me .pk-plate { border-color: rgba(var(--t-gold), 0.4); background: rgba(48, 32, 14, 0.9); }
  .pk-seat.is-turn .pk-plate {
    border-color: rgba(var(--t-gold), 0.8);
    box-shadow: 0 0 24px rgba(var(--t-gold), 0.4);
  }
  /* The settled pot's owner takes the mock's gold ring. */
  .pk-seat.is-winner .pk-plate { animation: pk-winner-glow 1.1s var(--spring) both; }
  @keyframes pk-winner-glow {
    from { box-shadow: 0 0 0 rgba(var(--t-gold), 0); }
    45% { box-shadow: 0 0 44px rgba(var(--t-gold), 0.8); }
  }
  .pk-seat.is-acted { animation-name: pk-seat-act-wide; }
  @keyframes pk-seat-act-wide {
    45% { transform: translate(-50%, -54%) scale(1.04); }
  }
  .pk-seat.is-folding { animation: none; }
  .pk-seat.is-folding .pk-plate { animation: pk-fold-plate 0.48s ease both; }
  @keyframes pk-fold-plate {
    35% { transform: translateY(7px) rotate(-3deg); opacity: 0.9; }
    to { transform: none; opacity: 0.4; filter: saturate(0.35); }
  }
  .pk-plate-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .pk-avatar { width: calc(34px * var(--pk-zoom, 1)); height: calc(34px * var(--pk-zoom, 1)); border-radius: calc(10px * var(--pk-zoom, 1)); font-size: calc(15px * var(--pk-zoom, 1)); }
  .pk-seat-name {
    display: block;
    max-width: calc(150px * var(--pk-zoom, 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(10px * var(--pk-zoom, 1));
    font-weight: 800;
  }
  .pk-seat .pk-clan { display: inline-flex; }
  .pk-seat-stack { font-size: calc(11px * var(--pk-zoom, 1)); color: rgba(var(--t-mute), 0.6); }
  .pk-seat-cards {
    width: calc(34px * var(--pk-zoom, 1));
    height: calc(25px * var(--pk-zoom, 1));
    margin-top: calc(-9px * var(--pk-zoom, 1));
  }
  .pk-seat-cards i {
    width: calc(20px * var(--pk-zoom, 1));
    height: calc(28px * var(--pk-zoom, 1));
  }
  .pk-seat-cards i:last-child { left: calc(13px * var(--pk-zoom, 1)); }
  .pk-seats.is-dense .pk-plate { gap: calc(5px * var(--pk-zoom, 1)); padding: calc(5px * var(--pk-zoom, 1)) calc(7px * var(--pk-zoom, 1)) calc(5px * var(--pk-zoom, 1)) calc(5px * var(--pk-zoom, 1)); }
  .pk-seats.is-dense .pk-avatar { width: calc(24px * var(--pk-zoom, 1)); height: calc(24px * var(--pk-zoom, 1)); border-radius: calc(7px * var(--pk-zoom, 1)); font-size: calc(11px * var(--pk-zoom, 1)); }
  .pk-seats.is-dense .pk-seat-name { max-width: calc(108px * var(--pk-zoom, 1)); font-size: calc(9px * var(--pk-zoom, 1)); }
  .pk-seats.is-dense .pk-seat-stack { font-size: calc(9.5px * var(--pk-zoom, 1)); }
  .pk-seats.is-dense .pk-clan { display: none; }

  .pk-over-title { font-size: 15px; }
  .pk-pot-chips { transform: scale(var(--pk-zoom, 1)); transform-origin: bottom center; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-act { transition: none; }
  .pk-card.is-dealt,
  .view-poker.is-new-hand .pk-seat-cards i,
  .view-poker.is-new-hand .pk-hole-cards .pk-card,
  .pk-seat.is-acted,
  .pk-seat.is-folding,
  .pk-seat.is-folding .pk-plate,
  .view-poker.is-new-hand .pk-felt { animation: none; }
  .pk-context::after { transition: none; }
  .pk-act:hover:not(:disabled),
  .pk-act:active:not(:disabled) { transform: none; }
}

/* Wide but low phone: keep the oval, but do not apply the desktop clearance
   compensation that pushes the board out through its top edge. A 390px-high
   landscape viewport cannot also fit the oval's absolute seat ring, 80px
   board cards and 78px hole cards without layers crossing. Return that one
   shape to the compact flow: seat strip, felt, hole cards. */
@container scene (min-width: 620px) {
  .view-poker.is-short {
    --pk-card-w: 30px;
    --pk-card-h: 42px;
    --pk-card-r: 6px;
    --pk-card-rank: 9px;
    --pk-card-suit: 13px;
  }
  .view-poker.is-short .pk-stage {
    display: flex;
    gap: 6px;
  }
  .view-poker.is-short .pk-felt {
    position: static;
    width: auto;
    height: auto;
    min-height: 68px;
    flex: 1 1 auto;
    transform: none;
    gap: 2px;
    padding: 4px 10px;
    border: 1px solid rgba(var(--t-gold), 0.2);
    border-radius: 18px;
  }
  .view-poker.is-short .pk-pot-label,
  .view-poker.is-short .pk-street { display: none; }
  .view-poker.is-short .pk-pot { font-size: 18px; }
  .view-poker.is-short .pk-side-pots:empty { display:none; }
  .view-poker.is-short .pk-board { gap: 4px; }
  .view-poker.is-short .pk-seats {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    padding: 8px 0 2px;
    pointer-events: auto;
  }
  .view-poker.is-short .pk-seats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-poker.is-short .pk-seats[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .view-poker.is-short .pk-seats[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .view-poker.is-short .pk-seats[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .view-poker.is-short .pk-seat {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: 3px;
    padding: 4px 5px;
    border: 1px solid rgba(var(--t-violet), 0.22);
    border-radius: 10px;
    background: rgba(16, 11, 30, 0.85);
  }
  .view-poker.is-short .pk-seat.is-me {
    border-color: rgba(var(--t-gold), 0.4);
    background: rgba(48, 32, 14, 0.9);
  }
  .view-poker.is-short .pk-seat.is-turn {
    border-color: rgba(var(--t-gold), 0.8);
    box-shadow: 0 0 24px rgba(var(--t-gold), 0.4);
  }
  .view-poker.is-short .pk-seat.is-acted { animation-name: pk-seat-act; }
  .view-poker.is-short .pk-plate,
  .view-poker.is-short .pk-plate-body { display: contents; }
  .view-poker.is-short .pk-avatar {
    width: 19px;
    height: 19px;
    border-radius: 7px;
    font-size: 11px;
  }
  .view-poker.is-short .pk-seat-name,
  .view-poker.is-short .pk-seat .pk-clan { display: none; }
  .view-poker.is-short .pk-seat-stack { min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:9px; }
  .view-poker.is-short .pk-seat-cards { transform:scale(.72);transform-origin:center;margin-inline:-6px; }
  .view-poker.is-short .pk-seat-cards.is-show { transform:none;margin-inline:-12px; }
  .view-poker.is-short .pk-hole {
    position: static;
    transform: none;
    flex-direction: row;
    gap: 8px;
  }
  .view-poker.is-short .pk-hole-cards {
    --pk-card-w: 28px;
    --pk-card-h: 40px;
    --pk-card-rank: 10px;
    --pk-card-suit: 14px;
  }
  /* At 200% zoom a 1280px desktop has a 640px CSS viewport. Preserve every
     decision word instead of technically fitting five ellipsized buttons. */
  .view-poker.is-short .pk-actions { gap: 4px; }
  .view-poker.is-short .pk-act {
    flex: 0 0 auto;
    padding: 7px 8px;
    font-size: 9px;
  }
  .view-poker.is-short .pk-act-raise { padding-inline: 5px; font-size: 9px; }
  .view-poker.is-short .pk-raise-control { min-width: 0; gap: 4px; }
  .view-poker.is-short .pk-raise-range { width: 64px; }
  .view-poker.is-short .pk-raise-presets { gap: 2px; }
  .view-poker.is-short .pk-raise-presets button { min-width: 27px; padding-inline: 4px; }
  .view-poker.is-short .pk-raise-presets output { min-width: 61px; font-size: 8px; }
}

@container scene (max-width: 480px) {
  .pk-context { align-items: flex-start; flex-direction: column; gap: 3px; }
  .pk-context-meta { white-space: normal; }
  .pk-actions { flex-wrap: wrap; gap: 5px; padding-block: 6px; }
  .pk-act { padding-block: 8px; }
  .pk-act-raise { padding-inline: 8px; }
  /* Free room for the action row's third line on short viewports: without this
     the wrapped raise row (presets + slider + raise button) slides under the
     scene's bottom edge and the slider becomes unreachable. */
  .view-poker:not(.is-short) .pk-stage { min-height: 388px; }
  .pk-raise-control { order: 5; width: 100%; justify-content: center; }
  /* The amount already sits on the raise button itself; dropping the output
     keeps presets, slider and raise on one line so nothing runs off-screen. */
  .pk-raise-presets output { display: none; }
  .pk-raise-range { flex: 1 1 auto; min-width: 60px; max-width: none; }
}

/* === action telemetry =====================================================
   Every confirmed action, fresh board card, new hand and pot sweep narrates
   itself on the left edge and fades (the design demo's pv-log). View-local
   absolute — never fixed — so the feed cannot float over the lobby, and the
   router unmounts it with the view. pointer-events:none keeps seats tappable. */
.pk-feed { position: absolute; left: 12px; bottom: 112px; z-index: 26; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.pk-feed > div { padding: 5px 10px; border-radius: 8px; background: rgba(9,7,16,.9); border: 1px solid rgba(var(--t-violet), .25); font: 700 10px/1.3 ui-monospace, monospace; color: var(--text-dim); animation: pkfeed 3s forwards; }
@keyframes pkfeed { 0% { opacity: 0; transform: translateY(6px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 700px) { .pk-feed { bottom: 196px; } }

/* The rail lane's honest first frame while the delayed projection is built:
   a quiet note over the felt instead of an empty stage or an error card. */
.pk-rail-pending { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; color: var(--text-dim); font: 700 12px/1.5 var(--font-display); text-align: center; pointer-events: none; }

/* === sit-out dimming (golden master) ======================================
   A paused seat is visible state: my plate, my cards and the action row fade
   to grey while I sit out. */
.view-poker.is-sitout .pk-seat.is-me .pk-avatar,
.view-poker.is-sitout .pk-seat.is-me .pk-plate { filter: grayscale(.8); opacity: .55; }
.view-poker.is-sitout .pk-hole { filter: grayscale(.7); opacity: .45; }
.view-poker.is-sitout .pk-actions { opacity: .38; pointer-events: none; filter: saturate(.5); }

/* === 4-color deck (settings) ============================================= */
.view-poker.is-4color .pk-card.s-c { color: #177a3c; }
.view-poker.is-4color .pk-card.s-d { color: #1c4f9c; }
.view-poker.is-4color .pk-card.s-h { color: #c02134; }
.view-poker.is-4color .pk-card.s-s { color: #17130c; }

/* === tournament level flash + urgent clock =============================== */
.pk-tn-lvlup {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%); z-index: 21;
  padding: calc(9px * var(--pk-zoom, 1)) calc(22px * var(--pk-zoom, 1));
  border-radius: 14px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(24,19,34,.97), rgba(10,8,17,.97));
  border: 1px solid rgba(143,216,176,.6);
  box-shadow: 0 0 40px rgba(80,220,150,.28), 0 18px 50px rgba(0,0,0,.6);
  animation: pk-bet-in .5s both;
}
.pk-tn-lvlup .l1 { font: 800 calc(10px * var(--pk-zoom, 1))/1 ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #8fd8b0; }
.pk-tn-lvlup .l2 { font: 800 calc(15px * var(--pk-zoom, 1))/1.2 var(--font-display); color: #fff; margin-top: 3px; }
.pk-tn-stat .is-urgent { color: #ff9c8a !important; animation: pk-tn-blink 1s infinite; }
@keyframes pk-tn-blink { 50% { opacity: .45; } }

/* === felt swatches in table settings ===================================== */
.pk-felts { display: flex; gap: 5px; }
.pk-felt-sw { padding: 3px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; }
.pk-felt-sw.sel { border-color: rgba(var(--t-gold), .75); }
.pk-felt-sw i { display: block; width: 22px; height: 22px; border-radius: 6px; }

/* === all-in runout equity (golden master) =================================
   The face-up moment: a % pill over each live seat and the gold/violet bar
   under the board. */
.pk-eq { display: inline-grid; place-items: center; min-width: calc(38px * var(--pk-zoom, 1));
  padding: calc(2px * var(--pk-zoom, 1)) calc(7px * var(--pk-zoom, 1)); border-radius: 999px;
  font: 800 calc(11px * var(--pk-zoom, 1))/1 ui-monospace, monospace;
  background: rgba(6,8,14,.88); border: 1px solid rgba(var(--t-gold), .55); color: #ffd97a;
  box-shadow: 0 0 16px rgba(var(--t-gold), .3); animation: pk-bet-in .35s; pointer-events: none; }
.pk-eq.them { border-color: rgba(var(--t-violet), .6); color: #cabfff; box-shadow: 0 0 16px rgba(var(--t-violet), .35); }
.pk-seat .pk-eq { position: absolute; top: calc(-12px * var(--pk-zoom, 1)); left: 50%; transform: translateX(-50%); z-index: 7; }
/* The pill anchors to the cards row — .pk-hole itself is absolutely
   positioned by the oval layout, and overriding it breaks the hero cards. */
.pk-hole-cards { position: relative; }
.pk-hole-cards .pk-eq { position: absolute; top: calc(-16px * var(--pk-zoom, 1)); left: 50%; transform: translateX(-50%); z-index: 7; }
.pk-eq-bar { display: flex; width: 68%; height: calc(15px * var(--pk-zoom, 1)); border-radius: 999px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 3px 12px rgba(0,0,0,.45);
  animation: pk-bet-in .4s; }
.pk-eq-bar i { display: grid; place-items: center; font: 800 calc(9.5px * var(--pk-zoom, 1))/1 ui-monospace, monospace;
  color: #0c0a06; font-style: normal; transition: width .6s; }
.pk-eq-bar .me { background: linear-gradient(180deg, #ffd97a, #c99b3f); }
.pk-eq-bar .them { background: linear-gradient(180deg, #9d8bd8, #6b5a9e); color: #efeaff; }

/* === player card (seat tap) ============================================== */
.pk-seat.is-clickable { cursor: pointer; }
.pk-seat.is-clickable:hover .pk-plate { border-color: rgba(var(--t-gold), .6); }
.pk-note-dot { position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; border-radius: 50%;
  background: #ffd97a; box-shadow: 0 0 8px rgba(var(--t-gold), .8); z-index: 7; }
.pk-ps-stats { display: grid; gap: 5px; margin-bottom: 4px; }
.pk-ps-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-dim); }
.pk-ps-row b { color: #efe8d2; }
.pk-ps-verdict { font: 800 12px/1.2 var(--font-display); color: #ffd97a; letter-spacing: .04em; margin-bottom: 2px; }
.pk-ps-note { min-height: 74px; resize: vertical; padding: 8px 10px; }

/* === professional table shell ===========================================
   The physical viewport remains owned by the shared Arena shell. Poker only
   divides the space it receives into the table and its durable hand record. */
.pk-table-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: 10px;
}
.view-poker.is-history-collapsed .pk-table-layout { grid-template-columns: minmax(0, 1fr) 42px; }
.pk-table-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pk-table-main > .pk-stage { flex: 1 1 auto; }
.pk-table-main > .soc-react { flex: 0 0 auto; }

.pk-history-rail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(220, 190, 118, .20);
  border-radius: 14px;
  background: rgba(7, 10, 12, .94);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}
.pk-history-rail > header { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 7px 9px; border-bottom: 1px solid rgba(220, 190, 118, .14); }
.pk-history-rail h2 { min-width: 0; margin: 0 auto 0 0; overflow: hidden; color: #efe2c3; font: 800 12px/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.pk-history-collapse,
.pk-history-close,
.pk-history-more,
.pk-history-replay,
.pk-result button { min-width: 32px; min-height: 32px; border: 1px solid rgba(220, 190, 118, .24); border-radius: 8px; background: rgba(255, 255, 255, .045); color: #e7d7b1; font: 750 10px/1 var(--font-display); cursor: pointer; }
.pk-history-close { display: none; font-size: 20px; }
.pk-history-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 7px; scrollbar-gutter: stable; }
.pk-history-status { padding: 18px 12px; color: #a9a08f; font-size: 11px; text-align: center; }
.pk-history-hand { margin-bottom: 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.025); }
.pk-history-hand.is-open { border-color: rgba(220, 190, 118, .35); }
.pk-history-hand-head { width: 100%; min-height: 52px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 8px; border: 0; background: transparent; color: #e9dfca; text-align: left; cursor: pointer; }
.pk-history-hand-head > span:first-child { display: grid; gap: 2px; }
.pk-history-hand-head small { color: #817b70; font-size: 8px; }
.pk-history-winner { overflow: hidden; color: #cdbb91; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.pk-history-hand-head > strong { color: #f0d486; font-size: 9px; white-space: nowrap; }
.pk-history-detail { display: grid; gap: 8px; padding: 9px; border-top: 1px solid rgba(255,255,255,.08); color: #c6bdac; font-size: 10px; }
.pk-history-detail-row,
.pk-history-reveals { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pk-history-detail-row > b,
.pk-history-reveals > b { color: #e5d7b7; }
.pk-history-reveals > span { display: inline-grid; gap: 3px; }
.pk-history-reveals em { max-width: 110px; overflow: hidden; color: #aa9f88; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.pk-history-pots { display: flex; flex-wrap: wrap; gap: 4px; }
.pk-history-pots span { padding: 3px 6px; border-radius: 999px; background: rgba(202,163,84,.10); color: #dfc477; font: 700 8px/1 ui-monospace; }
.pk-history-actions { display: grid; gap: 3px; max-height: 155px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.pk-history-actions li { display: flex; justify-content: space-between; gap: 7px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.03); }
.pk-history-actions span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-history-actions b { color: #e7d29c; white-space: nowrap; }
.pk-history-more { margin: 0 7px 7px; }
.pk-history-rail > .soc-chat { flex: 0 0 auto; max-height: min(44%, 260px); margin: 0 7px 7px; overflow: hidden; }
.pk-history-rail > .soc-chat .chat-feed { max-height: 126px; }
.pk-history-cards { --pk-card-w: 23px; --pk-card-h: 32px; --pk-card-r: 4px; --pk-card-rank: 8px; --pk-card-suit: 11px; display: inline-flex; gap: 2px; vertical-align: middle; }
.pk-history-cards .pk-card { box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.pk-history-rail.is-collapsed { width: 42px; min-width: 42px; }
.pk-history-rail.is-collapsed h2,
.pk-history-rail.is-collapsed .pk-history-status,
.pk-history-rail.is-collapsed .pk-history-list,
.pk-history-rail.is-collapsed .pk-history-more,
.pk-history-rail.is-collapsed > .soc-chat { display: none; }
.pk-history-rail.is-collapsed > header { justify-content: center; padding-inline: 4px; }
.pk-history-backdrop { display: none; }

/* Completed-hand meaning persists while the next hand can continue. The
   compact result owns only its own rectangle, including touch scrolling. */
.pk-result { position: absolute; z-index: 27; top: 48px; right: 10px; width: min(350px, calc(100% - 20px)); max-height: min(52dvh, 430px); overflow: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid rgba(228, 194, 111, .62); border-radius: 15px; background: linear-gradient(155deg, rgba(25,19,13,.97), rgba(6,9,11,.97)); box-shadow: 0 18px 55px rgba(0,0,0,.62), 0 0 32px rgba(205,164,75,.18); color: #e9dfc9; pointer-events: auto; touch-action: pan-y; animation: pk-result-in .32s ease-out both; }
.pk-result > header { display: flex; align-items: center; gap: 8px; }
.pk-result > header strong { margin-right: auto; color: #ffe39b; font: 850 14px/1.2 var(--font-display); }
.pk-result > header span { color: #9d9586; font: 700 9px ui-monospace; }
.pk-result > header button,
.pk-result-actions button { pointer-events: auto; }
.pk-result p { margin: 6px 0 0; font-size: 10px; }
.pk-result-winner { color: #fff0bf; font: 800 13px/1.3 var(--font-display) !important; }
.pk-result-pot { color: #d8bd79; font-weight: 800; }
.pk-result-board,
.pk-result-reveals,
.pk-result-pots { display: grid; gap: 6px; margin-top: 9px; }
.pk-result-reveal { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk-result-reveal > span:first-child { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.pk-result-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
@keyframes pk-result-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }

.pk-show-choice { width: 100%; display: grid; grid-template-columns: minmax(120px,1fr) auto auto; align-items: center; gap: 7px; }
.pk-show-copy { display: grid; gap: 5px; min-width: 0; color: #f0dfb5; font-size: 10px; }
.pk-show-progress { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.10); }
.pk-show-progress i { display: block; width: calc(var(--pk-show-left, 1) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#c49135,#ffe09a); transition: width .2s linear; }
.pk-act-show { border-color: rgba(240,193,86,.7); background: linear-gradient(180deg,rgba(240,193,86,.26),rgba(240,193,86,.12)); color: #ffe5a4; }
.pk-act-muck { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #aaa293; }

.pk-seat-primary { border-color: rgba(244, 207, 112, .92) !important; background: linear-gradient(180deg, #f2d57c, #b88732) !important; color: #15100a !important; box-shadow: 0 0 0 1px rgba(255,230,157,.28), 0 0 24px rgba(225,180,75,.38); }
.pk-seat.is-empty-seat { z-index: 9; min-width: 66px; min-height: 50px; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.pk-seat.is-empty-seat .pk-plate { border-color: rgba(241, 202, 105, .66); background: rgba(45, 33, 14, .86); box-shadow: 0 0 0 1px rgba(244,214,137,.15), 0 0 22px rgba(218,172,67,.34); animation: pk-seat-breathe 2.8s ease-in-out infinite; }
.pk-seat.is-empty-seat .pk-avatar { color: #17110a; background: linear-gradient(145deg,#ffe19b,#bb8730); }
.pk-seat.is-empty-seat .pk-seat-stack { color: #f0d383; }
.pk-seat.is-empty-seat:focus-visible .pk-plate,
.pk-seat-primary:focus-visible { outline: 3px solid #fff1bd; outline-offset: 3px; }
@keyframes pk-seat-breathe { 50% { box-shadow: 0 0 0 4px rgba(244,214,137,.12), 0 0 34px rgba(218,172,67,.58); filter: brightness(1.12); } }

.pk-refill-status { color: #9fd8bd; }
.pk-refill-note { margin: 0; color: #c6bda9; font-size: 11px; }
.pk-purchase-packs { display: grid; gap: 8px; }
.pk-purchase-pack { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(220,190,118,.18); border-radius: 11px; background: rgba(255,255,255,.03); }
.pk-purchase-pack > strong { color: #efd48d; }
.pk-purchase-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-purchase-actions .pnl-btn { flex: 1 1 110px; }

@media (max-width: 900px) {
  .pk-table-layout { display: flex; }
  .pk-table-main { width: 100%; }
  .pk-history-rail { position: fixed; z-index: 5101; top: calc(42px + env(safe-area-inset-top)); right: 0; bottom: 0; width: min(390px, 92vw); min-width: 0; border-radius: 18px 0 0 0; transform: translateX(105%); visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
  .pk-history-rail.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .pk-history-rail.is-collapsed { width: min(390px, 92vw); }
  .pk-history-rail.is-collapsed h2,
  .pk-history-rail.is-collapsed .pk-history-status,
  .pk-history-rail.is-collapsed .pk-history-list,
  .pk-history-rail.is-collapsed .pk-history-more { display: initial; }
  .pk-history-collapse { display: none; }
  .pk-history-close { display: inline-grid; place-items: center; }
  .pk-history-backdrop { position: fixed; z-index: 5100; inset: 0; display: block; border: 0; background: rgba(0,0,0,.58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
  .view-poker.is-history-open .pk-history-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .pk-result { top: 44px; right: 5px; width: min(340px, calc(100% - 10px)); max-height: 45dvh; }
  .pk-show-choice { grid-template-columns: 1fr 1fr; }
  .pk-show-copy { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .pk-result { left: 5px; right: 5px; width: auto; padding: 10px; }
  .pk-result-cards .pk-history-cards { --pk-card-w: 20px; --pk-card-h: 28px; --pk-card-rank: 7px; --pk-card-suit: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-result,
  .pk-seat.is-empty-seat .pk-plate { animation: none; }
  .pk-history-rail,
  .pk-history-backdrop,
  .pk-show-progress i { transition: none; }
  .pk-seat.is-empty-seat .pk-plate { box-shadow: 0 0 0 2px rgba(244,214,137,.32), 0 0 18px rgba(218,172,67,.36); }
}