/* Spectator arena (watch.html). A heads-up table built from CSS, inline SVG and DOM only, with three
   original skins: neon (default PokerBot), felt (classic baize) and arcade (a window-lit card room:
   red padded surround, wood rim, bright felt, dark plates that turn silver for the seat to act).
   Skins change paint, never data or geometry. Everything inside the stage scales with the table's
   width (container units); positions are percentages of the stage. Motion lives in watch.js (Web
   Animations) and is skipped entirely for prefers-reduced-motion. */

.watch { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); }
.watch-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; margin-bottom: 28px; }
.watch-head .lede { margin: 14px 0 0; }
.skin-switch { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--ink-1); }
.skin-switch button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: var(--text-2); font-weight: 650; font-size: 14.5px; }
.skin-switch button[aria-pressed="true"] { background: var(--volt); color: var(--volt-ink); }
.skin-switch button:not([aria-pressed="true"]):hover { color: var(--white); background: var(--ink-3); }

.watch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.arena { min-width: 0; padding: 18px; background: var(--ink-1); border: 1px solid var(--line); border-radius: 10px; }
.arena:focus-within { border-color: var(--line-2); }
.arena-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 2px 4px 16px; }
.arena-title { font-size: 1.15rem; letter-spacing: -.02em; }
.arena-bar .hand { color: var(--text-2); font: 600 13px/1.3 var(--mono); }
.arena-bar .updated { margin-left: auto; color: var(--text-3); font: 500 12.5px/1.3 var(--mono); }

/* ---------- skin tokens ---------- */
.table {
  /* neon: PokerBot's own look */
  --room: radial-gradient(70% 55% at 50% 0%, rgba(186, 255, 67, .11), transparent 70%), linear-gradient(#06100b, #020604);
  --floor: linear-gradient(rgba(186, 255, 67, .05) 1px, transparent 1px) 0 0 / 3cqw 3cqw, linear-gradient(90deg, rgba(186, 255, 67, .05) 1px, transparent 1px) 0 0 / 3cqw 3cqw, radial-gradient(80% 90% at 50% 40%, #0a1711, #030806);
  --floor-edge: rgba(186, 255, 67, .22);
  --rail-bg: linear-gradient(#0d1813, #050b08);
  --rail-shadow: 0 0 0 .18cqw rgba(186, 255, 67, .6), 0 0 3.2cqw rgba(186, 255, 67, .2), inset 0 0 0 .14cqw rgba(186, 255, 67, .3);
  --felt: radial-gradient(70% 70% at 50% 42%, #0f2c1b 0%, #08180f 60%, #040c07 100%);
  --mark: rgba(186, 255, 67, .075);
  --mark-shadow: none;
  --plate: linear-gradient(#0d1a14, #060d09);
  --plate-line: #2d4a3b;
  --plate-text: #f3f8ef;
  --plate-sub: #dfe9e0;
  --plate-active: linear-gradient(#e4ffb4, #baff43 60%, #93d61f);
  --plate-active-line: #d9ff94;
  --plate-active-text: #061006;
  --word: #baff43;
  --word-active: #061006;
  --meta: #b2c3b7;
  --amount: #f3f8ef;
  --accent: #baff43;
  --accent-ink: #061006;
  --back: repeating-linear-gradient(45deg, rgba(186, 255, 67, .22) 0 .18cqw, transparent .18cqw .7cqw), repeating-linear-gradient(-45deg, rgba(186, 255, 67, .22) 0 .18cqw, transparent .18cqw .7cqw), #0a1a11;
  --back-ring: #baff43;
  --hud-bg: rgba(3, 8, 6, .82);
  --hud-line: #2d4a3b;
  --hud-text: #dfe9e0;
  --hud-warn-bg: rgba(3, 8, 6, .82);
  --hud-warn-text: #ffab6b;
  --log-panel: rgba(3, 8, 6, .86);
  --log-paper: transparent;
  --log-text: #dfe9e0;
  --log-head: #baff43;
  --pill: rgba(3, 8, 6, .86);
  --pill-text: #baff43;
  --pill-line: rgba(186, 255, 67, .45);
  --bot-skin: 75% 55%;
  container: table / inline-size;
  position: relative;
}
.table.skin-felt {
  --room: radial-gradient(80% 70% at 50% 25%, #3d2a1b, #1b120b 75%);
  --floor: repeating-linear-gradient(45deg, rgba(255, 220, 160, .035) 0 .4cqw, transparent .4cqw 2.2cqw), repeating-linear-gradient(-45deg, rgba(255, 220, 160, .035) 0 .4cqw, transparent .4cqw 2.2cqw), radial-gradient(80% 90% at 50% 40%, #4a1d1a, #24100d);
  --floor-edge: #6b4426;
  --rail-bg: linear-gradient(#7a4d2b, #4a2c17 55%, #2f1b0d);
  --rail-shadow: 0 1.2cqw 2.6cqw rgba(0, 0, 0, .55), inset 0 0 0 .22cqw #8e5d35, inset 0 -.4cqw .8cqw rgba(0, 0, 0, .35);
  --felt: radial-gradient(70% 70% at 50% 42%, #1f8a4c 0%, #146436 60%, #0b4325 100%);
  --mark: rgba(0, 0, 0, .13);
  --mark-shadow: 0 1px 0 rgba(255, 255, 255, .06);
  --plate: linear-gradient(#1a2a20, #0c140f);
  --plate-line: #6b4426;
  --plate-text: #f6ecd2;
  --plate-sub: #f4d27a;
  --plate-active: linear-gradient(#fff1c4, #f4d27a 60%, #d6ac45);
  --plate-active-line: #fff1c4;
  --plate-active-text: #2a1c05;
  --word: #f4d27a;
  --meta: #e4d6b5;
  --accent: #f4d27a;
  --accent-ink: #2a1c05;
  --back: repeating-linear-gradient(45deg, rgba(255, 255, 255, .2) 0 .18cqw, transparent .18cqw .6cqw), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2) 0 .18cqw, transparent .18cqw .6cqw), #9b1d24;
  --back-ring: #f6ecd2;
  --hud-bg: rgba(27, 18, 11, .85);
  --hud-line: #6b4426;
  --hud-text: #f6ecd2;
  --hud-warn-bg: rgba(27, 18, 11, .85);
  --hud-warn-text: #f4d27a;
  --log-panel: rgba(27, 18, 11, .88);
  --log-text: #f6ecd2;
  --log-head: #f4d27a;
  --pill: rgba(27, 18, 11, .88);
  --pill-text: #f4d27a;
  --pill-line: #6b4426;
  --bot-skin: 55% 60%;
}
.table.skin-arcade {
  --room: linear-gradient(#0a0f2e 0%, #1c2357 12%, #4b3a6a 20%, #b0605a 25.5%, #3b0d10 26%, #3b0d10 100%);
  --floor: repeating-linear-gradient(60deg, rgba(0, 0, 0, .07) 0 .16cqw, transparent .16cqw 2.6cqw), repeating-linear-gradient(-60deg, rgba(0, 0, 0, .07) 0 .16cqw, transparent .16cqw 2.6cqw), radial-gradient(75% 85% at 50% 40%, #e2343a 0%, #b81b22 50%, #7a0d13 100%);
  --floor-edge: #f0dcb4;
  --rail-bg: radial-gradient(70% 70% at 50% 35%, #7b4422, #4b240f 70%, #2c1407);
  --rail-shadow: 0 0 0 .45cqw #8c1016, 0 1.4cqw 2.8cqw rgba(40, 0, 0, .6), inset 0 0 0 .18cqw #a86a3c, inset 0 -.5cqw 1cqw rgba(0, 0, 0, .4);
  --felt: radial-gradient(68% 62% at 50% 44%, #2bc357 0%, #17a540 42%, #0e852f 80%, #086624 100%);
  --mark: rgba(0, 70, 22, .3);
  --mark-shadow: 0 .12cqw 0 rgba(255, 255, 255, .08), 0 -.12cqw 0 rgba(0, 0, 0, .18);
  --plate: linear-gradient(#383d46 0%, #1d2026 45%, #0b0c0f 100%);
  --plate-line: #5c636e;
  --plate-text: #ffffff;
  --plate-sub: #ffffff;
  --plate-active: linear-gradient(#ffffff 0%, #e5e8ec 40%, #b9bfc8 100%);
  --plate-active-line: #ffffff;
  --plate-active-text: #101215;
  --word: #4fd8ff;
  --word-active: #0a5a8a;
  --meta: #f4f4f4;
  --amount: #ffffff;
  --accent: #4fd8ff;
  --accent-ink: #04202b;
  --back: radial-gradient(ellipse 30% 22% at 50% 50%, rgba(255, 255, 255, .9) 0 40%, transparent 44%), repeating-linear-gradient(45deg, #2a5fc8 0 .25cqw, #1c449a .25cqw .5cqw);
  --back-ring: #ffffff;
  --hud-bg: linear-gradient(#7aa6cc 0%, #3d6c98 48%, #23496f 52%, #2f5d8a 100%);
  --hud-line: #9cc0df;
  --hud-text: #ffffff;
  --hud-warn-bg: linear-gradient(#e2574a 0%, #b52d22 48%, #8c1a12 52%, #a3271c 100%);
  --hud-warn-text: #ffffff;
  --log-panel: linear-gradient(#2b2e33, #141619);
  --log-paper: #f7f7f7;
  --log-text: #111316;
  --log-head: #c9ccd1;
  --pill: linear-gradient(#5aa6ef 0%, #2a73c4 46%, #1a5aa6 54%, #2b6fbf 100%);
  --pill-text: #ffffff;
  --pill-line: #94c6f5;
  --bot-skin: 70% 58%;
}

/* ---------- stage geometry (desktop: 16:10) ---------- */
.stage {
  --cw: 6.3cqw;
  --hole-w: 4cqw;
  --chip: 2.5cqw;
  --seat-w: 18cqw;
  --avatar: 8.4cqw;
  --t-name: clamp(12px, 1.45cqw, 16px);
  --t-stack: clamp(12px, 1.6cqw, 18px);
  --t-small: clamp(12px, 1.05cqw, 13px);
  --rail-x: 12%; --rail-top: 26%; --rail-bottom: 17%; --rail-w: 1.3cqw;
  --bet-n-x: 45.5%; --bet-n-y: 33%;
  --bet-s-x: 56.5%; --bet-s-y: 68.5%;
  --btn-n-x: 59%; --btn-n-y: 31.5%;
  --btn-s-x: 39%; --btn-s-y: 75%;
  --board-y: 46%; --pot-y: 56.5%; --potstack-y: 64%;
  --deck-y: 30%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
  background: var(--room);
  font-family: var(--font);
}

/* the room */
.room { position: absolute; inset: 0; z-index: 0; }
.room > span { position: absolute; display: block; }
.room-floor { inset: 25% 0 0 0; background: var(--floor); clip-path: polygon(7% 0, 93% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.room-floor::before, .room-floor::after { content: ""; position: absolute; bottom: 0; width: 30%; height: 46%; background: repeating-linear-gradient(118deg, var(--floor-edge) 0 .9cqw, transparent .9cqw 1.9cqw); opacity: .55; }
.room-floor::before { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.room-floor::after { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(62deg, var(--floor-edge) 0 .9cqw, transparent .9cqw 1.9cqw); }
.room-city, .room-frame, .room-drape { display: none !important; }

/* arcade: a window-lit room over an original night skyline (CSS shapes only) */
.skin-arcade .room-city, .skin-arcade .room-frame, .skin-arcade .room-drape { display: block !important; }
.skin-arcade .room-city-far {
  left: 0; right: 0; top: 5%; height: 21%;
  background: radial-gradient(circle, rgba(255, 226, 160, .85) 0 .1cqw, transparent .16cqw) 0 0 / .8cqw .9cqw, linear-gradient(#262c58, #151936);
  clip-path: polygon(0 40%, 4% 40%, 4% 22%, 8% 22%, 8% 48%, 13% 48%, 13% 12%, 15% 6%, 17% 12%, 17% 40%, 22% 40%, 22% 28%, 27% 28%, 27% 50%, 31% 50%, 31% 18%, 36% 18%, 36% 44%, 41% 44%, 41% 30%, 44% 24%, 47% 30%, 47% 52%, 52% 52%, 52% 14%, 56% 14%, 56% 42%, 61% 42%, 61% 26%, 66% 26%, 66% 46%, 70% 46%, 70% 10%, 72% 4%, 74% 10%, 74% 38%, 79% 38%, 79% 24%, 84% 24%, 84% 48%, 89% 48%, 89% 20%, 94% 20%, 94% 42%, 100% 42%, 100% 100%, 0 100%);
}
.skin-arcade .room-city-near {
  left: 0; right: 0; top: 10%; height: 16%;
  background: repeating-linear-gradient(0deg, rgba(255, 205, 120, .9) 0 .22cqw, transparent .22cqw .62cqw), repeating-linear-gradient(90deg, rgba(60, 30, 20, .9) 0 .22cqw, transparent .22cqw .66cqw), linear-gradient(#b98a4a, #6b4524);
  clip-path: polygon(0 34%, 9% 34%, 9% 54%, 16% 54%, 16% 20%, 25% 20%, 25% 62%, 30% 62%, 30% 44%, 38% 44%, 38% 70%, 62% 70%, 62% 40%, 70% 40%, 70% 16%, 79% 16%, 79% 50%, 85% 50%, 85% 28%, 93% 28%, 93% 58%, 100% 58%, 100% 100%, 0 100%);
}
.skin-arcade .room-frame {
  inset: 0 0 73% 0;
  background:
    linear-gradient(#2a2f38, #14171c) top / 100% 8% no-repeat,
    linear-gradient(#5b6370, #262a31 40%, #101215) bottom / 100% 11% no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, .42) 0 19%, transparent 19% 81%, rgba(0, 0, 0, .42) 81%),
    linear-gradient(90deg, #1b1f26 0 1.6%, #59616d 1.6% 2%, transparent 2% 18.6%, #1b1f26 18.6% 19.6%, transparent 19.6% 33.8%, #1b1f26 33.8% 35%, #6a7380 35% 35.4%, transparent 35.4% 64.6%, #6a7380 64.6% 65%, #1b1f26 65% 66.2%, transparent 66.2% 80.4%, #1b1f26 80.4% 81.4%, transparent 81.4% 98%, #59616d 98% 98.4%, #1b1f26 98.4%);
}
.skin-arcade .room-drape { top: 0; width: 6.5%; height: 36%; background: repeating-linear-gradient(90deg, #163c86 0 .5cqw, #3274d6 .5cqw 1cqw, #1d4ea6 1cqw 1.5cqw); box-shadow: inset 0 -1cqw 1.5cqw rgba(0, 0, 0, .35); }
.skin-arcade .room-drape-left { left: 0; border-bottom-right-radius: 70% 25%; }
.skin-arcade .room-drape-right { right: 0; border-bottom-left-radius: 70% 25%; }
.skin-arcade .room-floor { inset: 25.5% 0 0 0; }

/* rail and felt */
.rail { position: absolute; z-index: 1; left: var(--rail-x); right: var(--rail-x); top: var(--rail-top); bottom: var(--rail-bottom); padding: var(--rail-w); border-radius: 50%; background: var(--rail-bg); box-shadow: var(--rail-shadow); }
.felt { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: var(--felt); box-shadow: inset 0 0 3cqw rgba(0, 0, 0, .45), inset 0 .6cqw 1.2cqw rgba(0, 0, 0, .35); }
.felt-mark { display: inline-flex; align-items: center; gap: .6cqw; color: var(--mark); font: 900 clamp(18px, 4.4cqw, 60px)/1 var(--font); letter-spacing: -.045em; text-shadow: var(--mark-shadow); user-select: none; }
.felt-suit { font-size: .9em; }

/* ---------- seats ---------- */
.stage .seat { position: absolute; left: 50%; z-index: 6; display: flex; flex-direction: column; align-items: center; width: var(--seat-w); transform: translateX(-50%); }
.stage .seat-north { top: 2%; }
.stage .seat-south { bottom: 1.2%; }
.stage .seat-figure { position: relative; display: block; width: 100%; height: var(--avatar); }
.stage .seat-avatar { position: absolute; left: 50%; bottom: 0; width: var(--avatar); height: var(--avatar); transform: translateX(-50%); }
.stage .seat-avatar svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .4cqw .5cqw rgba(0, 0, 0, .45)); }
.bot-head { fill: hsl(var(--bot-hue, 200) var(--bot-skin)); stroke: rgba(0, 0, 0, .35); stroke-width: 2; }
.bot-body { fill: hsl(var(--bot-hue, 200) 35% 26%); }
.bot-ear { fill: hsl(var(--bot-hue, 200) 30% 34%); }
.bot-visor { fill: #10151b; }
.bot-eye { fill: #bff6ff; }
.bot-antenna { stroke: hsl(var(--bot-hue, 200) 30% 34%); stroke-width: 4; stroke-linecap: round; }
.bot-tip { fill: var(--accent); }
.stage .seat-cards { position: absolute; left: 50%; bottom: calc(var(--hole-w) * -.62); z-index: 1; display: flex; transform: translateX(-50%); transition: opacity .2s var(--ease); }
.stage .seat-cards .pcard { width: var(--hole-w); }
.stage .seat-cards .pcard:first-child { transform: rotate(-6deg); }
.stage .seat-cards .pcard + .pcard { margin-left: calc(var(--hole-w) * -.3); transform: rotate(6deg); }
.stage .seat-plate { position: relative; z-index: 2; display: grid; justify-items: center; width: 100%; padding: .5cqw 1cqw .55cqw; background: var(--plate); border: 1px solid var(--plate-line); border-radius: .8cqw; box-shadow: 0 .5cqw 1.2cqw rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12); color: var(--plate-text); text-align: center; transition: background .18s var(--ease), color .18s var(--ease); }
.stage .seat-name, .stage .seat-word { max-width: 100%; overflow: hidden; font: 600 var(--t-name)/1.25 var(--font); text-overflow: ellipsis; white-space: nowrap; }
.stage .seat-word { display: none; color: var(--word); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.stage .seat.has-word .seat-word { display: block; }
.stage .seat.has-word .seat-name { display: none; }
.stage .seat-stack { color: var(--plate-sub); font: 750 var(--t-stack)/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.stage .seat-timer { display: flex; gap: .18cqw; width: 78%; height: .55cqw; margin-top: .3cqw; visibility: hidden; }
.stage .seat-timer i { flex: 1; border-radius: 1px; background: #2fd35a; box-shadow: 0 0 .4cqw currentColor; color: rgba(47, 211, 90, .5); }
.stage .seat-timer i:nth-child(1) { background: #e8423a; color: rgba(232, 66, 58, .5); }
.stage .seat-timer i:nth-child(2) { background: #ef6a33; color: rgba(239, 106, 51, .5); }
.stage .seat-timer i:nth-child(3) { background: #f5932e; color: rgba(245, 147, 46, .5); }
.stage .seat-timer i:nth-child(4) { background: #f8bb2c; color: rgba(248, 187, 44, .5); }
.stage .seat-timer i:nth-child(5) { background: #f2dc2a; color: rgba(242, 220, 42, .5); }
.stage .seat-timer i:nth-child(6) { background: #cfe22e; color: rgba(207, 226, 46, .5); }
.stage .seat-timer i:nth-child(7) { background: #9fdc35; color: rgba(159, 220, 53, .5); }
.stage .seat-timer i:nth-child(8) { background: #6fd640; }
.stage .seat-meta { display: flex; justify-content: center; gap: .7em; max-width: 112%; margin-top: .25cqw; overflow: hidden; color: var(--meta); font: 500 var(--t-small)/1.35 var(--mono); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); white-space: nowrap; }
.stage .seat-role { flex: none; }
.stage .seat-model { overflow: hidden; text-overflow: ellipsis; }

.stage .seat.is-to-act .seat-plate { background: var(--plate-active); border-color: var(--plate-active-line); color: var(--plate-active-text); box-shadow: 0 0 0 .2cqw color-mix(in srgb, var(--accent) 45%, transparent), 0 .5cqw 1.4cqw rgba(0, 0, 0, .5); }
.stage .seat.is-to-act .seat-stack { color: var(--plate-active-text); }
.stage .seat.is-to-act .seat-word { color: var(--word-active, var(--plate-active-text)); }
.stage .seat.is-to-act .seat-timer { visibility: visible; }
.stage .seat.is-folded .seat-cards { opacity: 0; }
.stage .seat.is-folded .seat-plate { opacity: .72; }
.stage .seat.is-winner .seat-plate { border-color: var(--accent); box-shadow: 0 0 0 .22cqw var(--accent), 0 0 2.4cqw color-mix(in srgb, var(--accent) 55%, transparent); }
.stage .seat.is-winner .seat-word { color: var(--accent); }
.stage .seat.is-fallback .seat-word { color: var(--warn); }

/* ---------- cards ---------- */
.stage .pcard { position: relative; display: block; flex: none; width: var(--cw); aspect-ratio: 5 / 7; perspective: 60cqw; }
.stage .pcard-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.stage .pcard-face, .stage .pcard-back { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--cw) * .09); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stage .pcard-face { background: linear-gradient(160deg, #ffffff, #f1f2f4); border: 1px solid #b9bec7; box-shadow: 0 .35cqw .8cqw rgba(0, 0, 0, .35); color: #16181c; }
.stage .pcard.is-red .pcard-face { color: var(--red-suit); }
.stage .pcard-back { transform: rotateY(180deg); background: var(--back); border: 1px solid rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 calc(var(--hole-w) * .07) var(--back-ring), 0 .3cqw .7cqw rgba(0, 0, 0, .4); }
.stage .pcard-down .pcard-back { transform: none; border-radius: calc(var(--hole-w) * .1); }
.stage .pcard-corner { position: absolute; top: 5%; left: 7%; display: grid; justify-items: center; line-height: .95; }
.stage .pcard-corner b { font: 800 clamp(12px, calc(var(--cw) * .32), 30px)/1 var(--font); letter-spacing: -.06em; }
.stage .pcard-corner i { font: 400 clamp(12px, calc(var(--cw) * .24), 22px)/1 var(--font); font-style: normal; }
.stage .pcard-pip { position: absolute; right: 9%; bottom: 6%; font: 400 calc(var(--cw) * .56)/1 var(--font); }
.stage .pcard-pip.is-court { right: 8%; bottom: 7%; display: grid; place-items: center; width: 52%; height: 52%; border: .14cqw solid currentColor; border-radius: calc(var(--cw) * .05); font: 800 calc(var(--cw) * .36)/1 var(--font); background: color-mix(in srgb, currentColor 9%, transparent); }
.stage .pcard-slot { display: block; flex: none; width: var(--cw); aspect-ratio: 5 / 7; border: .14cqw dashed rgba(255, 255, 255, .16); border-radius: calc(var(--cw) * .09); }
.skin-arcade .stage .pcard-slot { border-color: transparent; }
.stage .board { position: absolute; left: 50%; top: var(--board-y); z-index: 4; display: flex; gap: .9cqw; transform: translate(-50%, -50%); }

/* ---------- chips, bets, pot, dealer button ---------- */
.stage .chipstack { display: flex; align-items: flex-end; gap: calc(var(--chip) * .1); }
.stage .chipcol { display: flex; flex-direction: column-reverse; }
.stage .chip { --c: #f4f1ea; --e: #2f6fd6; display: block; width: var(--chip); height: calc(var(--chip) * .52); border-radius: 50%; background: radial-gradient(ellipse 52% 50% at 50% 50%, var(--c) 0 58%, transparent 61%), repeating-conic-gradient(var(--e) 0 15deg, var(--c) 15deg 45deg); box-shadow: 0 calc(var(--chip) * .1) 0 color-mix(in srgb, var(--c) 55%, #000), 0 calc(var(--chip) * .16) calc(var(--chip) * .12) rgba(0, 0, 0, .45); }
.stage .chip + .chip { margin-bottom: calc(var(--chip) * -.38); }
.stage .chip-5 { --c: #d3373b; --e: #fbeeee; }
.stage .chip-25 { --c: #1e9b52; --e: #f1fff6; }
.stage .chip-100 { --c: #22232a; --e: #e7e7ea; }
.skin-neon .stage .chip-1 { --c: #e9f7d4; --e: #6aa313; }
.skin-neon .stage .chip-100 { --c: #10221a; --e: #baff43; }
.stage .bet { position: absolute; z-index: 5; display: flex; align-items: center; gap: .7cqw; transform: translate(-50%, -50%); }
.stage .bet-north { left: var(--bet-n-x); top: var(--bet-n-y); }
.stage .bet-south { left: var(--bet-s-x); top: var(--bet-s-y); }
.stage .bet-amount, .stage .pot-amount { color: var(--amount); font: 700 clamp(12px, 1.35cqw, 15px)/1 var(--mono); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); white-space: nowrap; }
.stage .is-empty { visibility: hidden; }
.stage .pot { position: absolute; left: 50%; top: var(--pot-y); z-index: 4; margin: 0; padding: .25cqw 1cqw; border-radius: 999px; color: var(--amount); font: 700 clamp(12px, 1.35cqw, 15px)/1.2 var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); transform: translate(-50%, -50%); white-space: nowrap; }
.skin-neon .stage .pot { background: rgba(0, 0, 0, .45); }
.table.is-settled .stage .pot { background: var(--accent); color: var(--accent-ink); text-shadow: none; }
.stage .pot-stack { position: absolute; left: 50%; top: var(--potstack-y); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .35cqw; transform: translate(-50%, -50%); }
.stage .dealer-button { position: absolute; z-index: 5; left: var(--btn-s-x); top: var(--btn-s-y); display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #ffffff, #e2e5ea 62%, #b4bbc6); box-shadow: 0 .28cqw 0 #858d99, 0 .5cqw .9cqw rgba(0, 0, 0, .5); color: #1d2128; font: 800 clamp(12px, 1.4cqw, 17px)/1 var(--font); transform: translate(-50%, -50%); }
.stage .dealer-button.at-north { left: var(--btn-n-x); top: var(--btn-n-y); }
.skin-neon .stage .dealer-button { background: radial-gradient(circle at 40% 32%, #f3ffe0, #baff43 70%, #86c21a); box-shadow: 0 .28cqw 0 #5c8a10, 0 0 1.4cqw rgba(186, 255, 67, .45); color: #061006; }
.stage .deck { position: absolute; left: 50%; top: var(--deck-y); width: 1px; height: 1px; }

/* ---------- HUD, dealer log, status ---------- */
.stage .hud { position: absolute; z-index: 7; top: 1.6%; display: flex; flex-direction: column; gap: .3cqw; pointer-events: none; }
.stage .hud-left { left: 1.2%; align-items: flex-start; }
.stage .hud-right { right: 1.2%; align-items: flex-end; }
.stage .hud-tab { padding: .35cqw 1.1cqw; background: var(--hud-bg); border: 1px solid var(--hud-line); border-radius: 4px; color: var(--hud-text); font: 700 var(--t-small)/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.stage .hud-warn { background: var(--hud-warn-bg); color: var(--hud-warn-text); }
.skin-arcade .stage .hud-tab { border: 0; border-top: 1px solid var(--hud-line); border-radius: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.skin-arcade .stage .hud-left .hud-tab { padding-right: 2.2cqw; clip-path: polygon(0 0, 100% 0, calc(100% - 1.1cqw) 100%, 0 100%); }
.skin-arcade .stage .hud-right .hud-tab { padding-left: 2.2cqw; clip-path: polygon(0 0, 100% 0, 100% 100%, 1.1cqw 100%); }
.stage .table-log { position: absolute; z-index: 7; left: 1.2%; bottom: 2.4%; width: 27%; padding: .5cqw; background: var(--log-panel); border: 1px solid var(--hud-line); border-radius: 6px; }
.stage .table-log-head { margin: 0 0 .3cqw; color: var(--log-head); font: 700 var(--t-small)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stage .table-log ol { list-style: none; margin: 0; padding: .2cqw .5cqw; background: var(--log-paper); border-radius: 3px; }
.stage .table-log li { overflow: hidden; color: var(--log-text); font: 500 var(--t-small)/1.45 var(--font); text-overflow: ellipsis; white-space: nowrap; }
.stage .table-log li:last-child { font-weight: 700; }
.stage .hud-pill { position: absolute; z-index: 7; right: 1.2%; bottom: 2.4%; margin: 0; padding: .6cqw 1.8cqw; background: var(--pill); border: 1px solid var(--pill-line); border-radius: 999px; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3); color: var(--pill-text); font: 750 var(--t-small)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stage .table-status { position: absolute; left: 50%; top: 46%; z-index: 8; max-width: 62%; margin: 0; padding: 1cqw 2cqw; background: rgba(0, 0, 0, .72); border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; color: #f3f8ef; font: 600 clamp(14px, 1.6cqw, 17px)/1.4 var(--font); text-align: center; transform: translate(-50%, -50%); }
.stage .table-status.is-error { border-color: var(--danger); color: #ffd6d6; }
.stage .table-status.is-warn { border-color: var(--warn); }
.stage .fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.stage .fx .ghost { position: absolute; transform: translate(-50%, -50%); }
.stage .fx .pcard-down { width: var(--hole-w); }

/* live "thinking" sweep on the lit bar: an indicator, not a countdown */
.stage.is-live .seat.is-to-act .seat-timer i { animation: led 1.4s ease-in-out infinite; }
.stage.is-live .seat.is-to-act .seat-timer i:nth-child(2n) { animation-delay: .14s; }
.stage.is-live .seat.is-to-act .seat-timer i:nth-child(3n) { animation-delay: .28s; }
@keyframes led { 50% { opacity: .35; } }

.action-line { min-height: 3.2em; margin: 18px 4px 0; color: var(--white); font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); font-weight: 600; text-align: center; }

/* ---------- replay controls ---------- */
.controls { display: grid; grid-template-columns: repeat(5, minmax(44px, auto)) 1fr auto auto; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ctl { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; background: var(--ink-0); border: 1px solid var(--line-2); border-radius: 4px; color: var(--white); font-weight: 700; font-size: 15px; }
.ctl:hover:not([disabled]) { border-color: var(--volt); color: var(--volt); }
.ctl[disabled] { opacity: .4; cursor: not-allowed; }
.ctl-play { min-width: 96px; background: var(--volt); border-color: var(--volt); color: var(--volt-ink); }
.ctl-play:hover:not([disabled]) { background: var(--volt-2); color: var(--volt-ink); }
.step-count { color: var(--text-2); font: 600 13px/1.3 var(--mono); justify-self: center; }
.ctl-live { gap: 8px; grid-auto-flow: column; }
.ctl-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); }
.ctl-live[disabled] { opacity: .55; }
.ctl-sound { gap: 8px; grid-auto-flow: column; min-width: 112px; }
.ctl-sound::before { content: ""; width: 14px; height: 12px; background: currentColor; clip-path: polygon(0 30%, 30% 30%, 65% 0, 65% 100%, 30% 70%, 0 70%); }
.ctl-sound[aria-pressed="true"] { border-color: var(--volt); color: var(--volt); }
.keys-hint { margin: 10px 4px 0; color: var(--text-3); font: 500 12.5px/1.4 var(--mono); }
.arena .feed-note { margin: 8px 4px 0; }
/* arcade controls: glossy blue pills like a classic client's bottom bar */
.arena.skin-arcade .controls .ctl { background: linear-gradient(#3b4250 0%, #222731 48%, #15181e 52%, #1d2129 100%); border-color: #59616e; border-radius: 999px; color: #ffffff; }
.arena.skin-arcade .controls .ctl-play, .arena.skin-arcade .controls .ctl-live:not([disabled]) { background: linear-gradient(#5aa6ef 0%, #2a73c4 46%, #1a5aa6 54%, #2b6fbf 100%); border-color: #94c6f5; color: #ffffff; }
.arena.skin-arcade .controls .ctl:hover:not([disabled]) { border-color: #ffffff; color: #ffffff; filter: brightness(1.12); }
.arena.skin-arcade .controls .ctl-sound[aria-pressed="true"] { border-color: #4fd8ff; color: #4fd8ff; }

/* ---------- side panel ---------- */
.watch-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.side-panel { padding: 18px; background: var(--ink-1); border: 1px solid var(--line); border-radius: 10px; }
.side-panel h2 { margin-bottom: 14px; color: var(--text-3); font: 600 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.side-panel .field + .field { margin-top: 14px; }
.side-panel .field > span { font-size: 14px; }
.hand-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
.side-panel .toolbar { margin-top: 14px; }
.side-panel .feed-note { margin-top: 10px; }
.action-log { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; font-size: 14.5px; }
.action-log li { border-left: 2px solid transparent; color: var(--text-2); }
.action-log .log-step { display: block; width: 100%; padding: 8px 10px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; }
.action-log .log-step:hover { background: rgba(255, 255, 255, .04); color: var(--white); }
.action-log li[aria-current="step"] { border-left-color: var(--volt); background: rgba(186, 255, 67, .06); color: var(--white); }
.action-log .log-street { margin-top: 8px; padding: 6px 0 4px; color: var(--volt); font: 700 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 0; }
.action-log .log-street:first-child { margin-top: 0; }
.action-log .log-result { color: var(--white); font-weight: 650; }
.action-log .is-fallback { color: var(--warn); }
.action-log .log-empty { padding: 8px 10px; color: var(--text-3); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--text-2); font-size: 14.5px; }
.facts li { padding-left: 16px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--volt); transform: rotate(45deg); }

/* ---------- narrow tables (phones, or the stacked layout): portrait stage ---------- */
@container table (max-width: 620px) {
  .stage {
    aspect-ratio: 3 / 4;
    --cw: 14.6cqw; --hole-w: 8.6cqw; --chip: 5cqw; --seat-w: 44cqw; --avatar: 16cqw;
    --t-name: clamp(12px, 3.7cqw, 16px); --t-stack: clamp(13px, 4cqw, 18px); --t-small: 12px;
    --rail-x: 3.5%; --rail-top: 21%; --rail-bottom: 19%; --rail-w: 2.4cqw;
    --bet-n-x: 36%; --bet-n-y: 30%; --bet-s-x: 64%; --bet-s-y: 69%;
    --btn-n-x: 68%; --btn-n-y: 30.5%; --btn-s-x: 30%; --btn-s-y: 70.5%;
    --board-y: 45%; --pot-y: 54.5%; --potstack-y: 61.5%; --deck-y: 28%;
  }
  .stage .board { gap: 1.6cqw; }
  .stage .seat-plate { padding: 1cqw 2cqw 1.1cqw; border-radius: 1.8cqw; }
  .stage .seat-timer { height: 1.1cqw; }
  .stage .seat-model { display: none; }
  .stage .dealer-button { width: 6.4cqw; height: 6.4cqw; }
  .stage .table-log, .stage .hud-right, .stage .hud-pill { display: none; }
  .stage .hud-tab { padding: .8cqw 2cqw; }
  .stage .hud-left .hud-tab:nth-child(2) { display: none; }
  .skin-arcade .stage .hud-left .hud-tab { padding-right: 4cqw; clip-path: polygon(0 0, 100% 0, calc(100% - 2cqw) 100%, 0 100%); }
  .room-floor { clip-path: polygon(10% 0, 90% 0, 100% 8%, 100% 100%, 0 100%, 0 8%); }
  .felt-mark { font-size: clamp(16px, 6.4cqw, 40px); }
}

@media (max-width: 1020px) {
  .watch-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .watch-head { grid-template-columns: minmax(0, 1fr); }
  .skin-switch { justify-self: start; }
  .watch-side { grid-template-columns: minmax(0, 1fr); }
  .arena { padding: 12px 10px; }
  .arena-bar .updated { margin-left: 0; flex-basis: 100%; }
  .controls { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .step-count { grid-column: 1 / -1; order: -1; justify-self: start; }
  .ctl-sound { grid-column: 1 / 4; min-width: 0; }
  .ctl-live { grid-column: 4 / 6; }
  .ctl-play { min-width: 0; }
  .keys-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-live .seat.is-to-act .seat-timer i { animation: none; }
  .stage .seat-plate, .stage .seat-cards { transition: none; }
}