/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/poker-table.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   hum-poker — skin token system
   Source of truth: apps/miniapp/design/round-5/skins.html
   All CSS custom properties copied verbatim from :root + skin
   override blocks. The wrapper <div data-skin="..."> drives all
   token overrides via attribute selectors below.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Default tokens (navy skin — skin1.png reference) ──── */
:root {
  /* background */
  --bg: #0a0e1c;
  --bg-header: #0d1530;
  --header-text: #e4ecf8;
  --header-muted: #8a98b0;
  /* felt */
  --felt-1: #1f3a80;
  --felt-2: #15265a;
  --felt-edge: rgba(0,0,0,0.55);
  --felt-lamp: rgba(180,210,255,0.07);
  /* rim */
  --rim-outer: #2a4068;
  --rim-inner: #3a5a90;
  --rim-glow: rgba(80,140,210,0.18);
  /* avatar */
  --avatar-bg: #3a5a98;
  --avatar-stroke: #5a7ab8;
  --avatar-text: #ffffff;
  /* plaque */
  --plaque-bg: #0e1830;
  --plaque-stroke: #2a3a58;
  --plaque-name: #c0d4e8;
  --plaque-stack: #f0d680;
  /* accent */
  --accent: #d4b248;
  --accent-glow: rgba(212,178,72,0.5);
  /* text */
  --text-primary: #e4ecf8;
  --text-muted: #8a98b0;
  --star: #d4b248;
  /* cards */
  --card-bg: #ffffff;
  --card-stroke: rgba(0,0,0,0.25);
  --card-shadow: rgba(0,0,0,0.6);
  --suit-red: #c41e1e;
  --suit-black: #0a0a0a;
  /* buttons */
  --btn-bg: linear-gradient(160deg, #2e72d8 0%, #1850a8 100%);
  --btn-stroke: #5090e8;
  --btn-text: #ffffff;
  --btn-shadow: rgba(50,100,220,0.4);
  /* slider */
  --slider-track: #1a2542;
  --slider-fill: #d4a838;
  --slider-thumb: #f0d680;
  /* dealer */
  --dealer-bg: #f4c850;
  --dealer-text: #2a1808;
  /* bet */
  --bet-pill: #0e1830;
  --bet-text: #f0d680;
}

.hpt-root {
  /* background */
  --bg: #0a0e1c;
  --bg-header: #0d1530;
  --header-text: #e4ecf8;
  --header-muted: #8a98b0;
  /* felt */
  --felt-1: #1f3a80;
  --felt-2: #15265a;
  --felt-edge: rgba(0,0,0,0.55);
  --felt-lamp: rgba(180,210,255,0.07);
  /* rim */
  --rim-outer: #2a4068;
  --rim-inner: #3a5a90;
  --rim-glow: rgba(80,140,210,0.18);
  /* avatar */
  --avatar-bg: #3a5a98;
  --avatar-stroke: #5a7ab8;
  --avatar-text: #ffffff;
  /* plaque */
  --plaque-bg: #0e1830;
  --plaque-stroke: #2a3a58;
  --plaque-name: #c0d4e8;
  --plaque-stack: #f0d680;
  /* accent */
  --accent: #d4b248;
  --accent-glow: rgba(212,178,72,0.5);
  /* text */
  --text-primary: #e4ecf8;
  --text-muted: #8a98b0;
  --star: #d4b248;
  /* cards */
  --card-bg: #ffffff;
  --card-stroke: rgba(0,0,0,0.25);
  --card-shadow: rgba(0,0,0,0.6);
  --suit-red: #c41e1e;
  --suit-black: #0a0a0a;
  /* buttons */
  --btn-bg: linear-gradient(160deg, #2e72d8 0%, #1850a8 100%);
  --btn-stroke: #5090e8;
  --btn-text: #ffffff;
  --btn-shadow: rgba(50,100,220,0.4);
  /* slider */
  --slider-track: #1a2542;
  --slider-fill: #d4a838;
  --slider-thumb: #f0d680;
  /* dealer */
  --dealer-bg: #f4c850;
  --dealer-text: #2a1808;
  /* bet */
  --bet-pill: #0e1830;
  --bet-text: #f0d680;
}

/* ── Skin overrides via data-skin attribute ─────────────── */

[data-skin="emerald"] {
  --bg: #08140e;
  --bg-header: #0c2018;
  --header-text: #e8f4ec;
  --header-muted: #88a898;
  --felt-1: #1e6038;
  --felt-2: #103820;
  --felt-edge: rgba(0,0,0,0.55);
  --felt-lamp: rgba(220,255,200,0.08);
  --rim-outer: #2a1808;
  --rim-inner: #5a3818;
  --rim-glow: rgba(180,130,50,0.18);
  --avatar-bg: #2a6845;
  --avatar-stroke: #4a8865;
  --avatar-text: #ffffff;
  --plaque-bg: #0c2018;
  --plaque-stroke: #2a4838;
  --plaque-name: #b8d8c0;
  --plaque-stack: #f4d878;
  --accent: #e8c060;
  --accent-glow: rgba(232,192,96,0.55);
  --text-primary: #e8f4ec;
  --text-muted: #88a898;
  --star: #e8c060;
  --btn-bg: linear-gradient(160deg, #2e72d8 0%, #1850a8 100%);
  --btn-stroke: #5090e8;
  --btn-shadow: rgba(50,100,220,0.4);
  --slider-track: #15301f;
  --slider-fill: #e8c060;
  --slider-thumb: #f4d878;
  --bet-pill: #0c2018;
  --bet-text: #f4d878;
}

[data-skin="sunset"] {
  --bg: #1a0a05;
  --bg-header: #2a1408;
  --header-text: #fce8d8;
  --header-muted: #b89878;
  --felt-1: #b85838;
  --felt-2: #6a2808;
  --felt-edge: rgba(0,0,0,0.5);
  --felt-lamp: rgba(255,230,180,0.12);
  --rim-outer: #4a1808;
  --rim-inner: #c87038;
  --rim-glow: rgba(248,160,80,0.25);
  --avatar-bg: #9a4818;
  --avatar-stroke: #d47840;
  --avatar-text: #ffffff;
  --plaque-bg: #2a1408;
  --plaque-stroke: #6a3018;
  --plaque-name: #fcc890;
  --plaque-stack: #ffd870;
  --accent: #ffd060;
  --accent-glow: rgba(255,208,96,0.55);
  --text-primary: #fce8d8;
  --text-muted: #b89878;
  --star: #ffd060;
  --btn-bg: linear-gradient(160deg, #2e72d8 0%, #1850a8 100%);
  --btn-stroke: #5090e8;
  --btn-shadow: rgba(50,100,220,0.4);
  --slider-track: #3a1a08;
  --slider-fill: #ffd060;
  --slider-thumb: #ffe890;
  --bet-pill: #2a1408;
  --bet-text: #ffd870;
}

[data-skin="carbon"] {
  --bg: #08080a;
  --bg-header: #14141a;
  --header-text: #f0f0f4;
  --header-muted: #888890;
  --felt-1: #2a2a32;
  --felt-2: #14141a;
  --felt-edge: rgba(0,0,0,0.65);
  --felt-lamp: rgba(220,230,255,0.06);
  --rim-outer: #1a1a20;
  --rim-inner: #4a4a55;
  --rim-glow: rgba(200,210,230,0.12);
  --avatar-bg: #3a3a44;
  --avatar-stroke: #6a6a78;
  --avatar-text: #ffffff;
  --plaque-bg: #14141a;
  --plaque-stroke: #2a2a32;
  --plaque-name: #c0c0c8;
  --plaque-stack: #e8e8f0;
  --accent: #c0c8d8;
  --accent-glow: rgba(192,200,216,0.4);
  --text-primary: #f0f0f4;
  --text-muted: #888890;
  --star: #c0c8d8;
  --btn-bg: linear-gradient(160deg, #3878d8 0%, #1858a8 100%);
  --btn-stroke: #5898f0;
  --btn-shadow: rgba(50,120,220,0.4);
  --slider-track: #1a1a20;
  --slider-fill: #c0c8d8;
  --slider-thumb: #f0f0f4;
  --bet-pill: #14141a;
  --bet-text: #e8e8f0;
}

/* Also support .skin-* class pattern for legacy/future use */
.skin-emerald {
  --bg: #08140e;
  --bg-header: #0c2018;
  --header-text: #e8f4ec;
  --header-muted: #88a898;
  --felt-1: #1e6038;
  --felt-2: #103820;
  --felt-edge: rgba(0,0,0,0.55);
  --felt-lamp: rgba(220,255,200,0.08);
  --rim-outer: #2a1808;
  --rim-inner: #5a3818;
  --rim-glow: rgba(180,130,50,0.18);
  --avatar-bg: #2a6845;
  --avatar-stroke: #4a8865;
  --avatar-text: #ffffff;
  --plaque-bg: #0c2018;
  --plaque-stroke: #2a4838;
  --plaque-name: #b8d8c0;
  --plaque-stack: #f4d878;
  --accent: #e8c060;
  --accent-glow: rgba(232,192,96,0.55);
  --text-primary: #e8f4ec;
  --text-muted: #88a898;
  --star: #e8c060;
  --btn-bg: linear-gradient(160deg, #2e72d8 0%, #1850a8 100%);
  --btn-stroke: #5090e8;
  --btn-shadow: rgba(50,100,220,0.4);
  --slider-track: #15301f;
  --slider-fill: #e8c060;
  --slider-thumb: #f4d878;
  --bet-pill: #0c2018;
  --bet-text: #f4d878;
}

.skin-sunset {
  --bg: #1a0a05;
  --bg-header: #2a1408;
  --header-text: #fce8d8;
  --header-muted: #b89878;
  --felt-1: #b85838;
  --felt-2: #6a2808;
  --felt-edge: rgba(0,0,0,0.5);
  --felt-lamp: rgba(255,230,180,0.12);
  --rim-outer: #4a1808;
  --rim-inner: #c87038;
  --rim-glow: rgba(248,160,80,0.25);
  --avatar-bg: #9a4818;
  --avatar-stroke: #d47840;
  --avatar-text: #ffffff;
  --plaque-bg: #2a1408;
  --plaque-stroke: #6a3018;
  --plaque-name: #fcc890;
  --plaque-stack: #ffd870;
  --accent: #ffd060;
  --accent-glow: rgba(255,208,96,0.55);
  --text-primary: #fce8d8;
  --text-muted: #b89878;
  --star: #ffd060;
  --btn-bg: linear-gradient(160deg, #2e72d8 0%, #1850a8 100%);
  --btn-stroke: #5090e8;
  --btn-shadow: rgba(50,100,220,0.4);
  --slider-track: #3a1a08;
  --slider-fill: #ffd060;
  --slider-thumb: #ffe890;
  --bet-pill: #2a1408;
  --bet-text: #ffd870;
}

.skin-carbon {
  --bg: #08080a;
  --bg-header: #14141a;
  --header-text: #f0f0f4;
  --header-muted: #888890;
  --felt-1: #2a2a32;
  --felt-2: #14141a;
  --felt-edge: rgba(0,0,0,0.65);
  --felt-lamp: rgba(220,230,255,0.06);
  --rim-outer: #1a1a20;
  --rim-inner: #4a4a55;
  --rim-glow: rgba(200,210,230,0.12);
  --avatar-bg: #3a3a44;
  --avatar-stroke: #6a6a78;
  --avatar-text: #ffffff;
  --plaque-bg: #14141a;
  --plaque-stroke: #2a2a32;
  --plaque-name: #c0c0c8;
  --plaque-stack: #e8e8f0;
  --accent: #c0c8d8;
  --accent-glow: rgba(192,200,216,0.4);
  --text-primary: #f0f0f4;
  --text-muted: #888890;
  --star: #c0c8d8;
  --btn-bg: linear-gradient(160deg, #3878d8 0%, #1858a8 100%);
  --btn-stroke: #5898f0;
  --btn-shadow: rgba(50,120,220,0.4);
  --slider-track: #1a1a20;
  --slider-fill: #c0c8d8;
  --slider-thumb: #f0f0f4;
  --bet-pill: #14141a;
  --bet-text: #e8e8f0;
}

/* ── Root scene ─────────────────────────────────────────── */
.hpt-root {
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  /* iPhone 13: 100dvh on mobile, capped on desktop preview */
  height: 100dvh;
  max-height: 844px;
  background: var(--bg);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Visible 1px hint border on desktop preview; harmless on mobile */
  border-left: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.05);
}

.scene {
  flex: 1 1 auto;
  width: 100%;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
/* Items absolute-positioned over the scene (turn-timer, presets, side-controls,
   top-up, reconnect, observer badge, etc.) anchor to .scene. */

/* ── Compact top bar (back + spacer + settings) ── */
.compact-top {
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Clear the OS status bar + Telegram fullscreen controls (--app-safe-top
     set in telegram.ts). Falls back to 8px on clients without safe insets. */
  padding: calc(8px + var(--app-safe-top, 0px)) 10px 8px;
}
.compact-top .spacer { flex: 1 1; }
.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(15, 25, 45, 0.85);
  border: 1px solid rgba(120,140,200,0.30);
  color: var(--text-primary);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0;
  line-height: 1;
}
.icon-btn.danger { border-color: rgba(220,90,90,0.5); }
.icon-btn.warn   { border-color: rgba(91,184,255,0.45); }
.icon-btn.active { color: #5be3a8; border-color: rgba(91,227,168,0.55); }

/* Reserved area above felt — collapsed to 0 until widgets actually land
   (hand# / club info / etc.). The previous 64px were eating vertical room
   that TG WebApp viewports (~600-700px dvh) can't spare; felt-region needs
   every pixel so the table can render at a usable size. */
.top-reserved {
  flex: 0 0;
  margin: 0;
}

/* ── Felt region: fills vertical space between top-icons and hero/action ── */
.felt-region {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 240px;
  min-width: 0;
}

/* ── Side controls: sit-out + stand-up vertical stack on left edge ── */
.side-controls {
  position: absolute;
  left: 8px;
  bottom: 110px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 30;
}

/* ── Top header ─────────────────────────────────────────── */
.topbar {
  flex: 0 0 auto;
  height: 78px;
  padding: 14px 20px 10px;
  background: var(--bg-header);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}
.topbar .left { text-align: left; }
.topbar .center { text-align: center; }
.topbar .right { text-align: right; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.game-type {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.game-format {
  font-size: 11.5px;
  color: var(--header-muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.blinds {
  font-size: 18px;
  font-weight: 800;
  color: var(--header-text);
  letter-spacing: -0.3px;
  line-height: 1.05;
}
.hand-num {
  font-size: 11px;
  color: var(--header-muted);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.seat-count {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
}
.gear {
  width: 22px;
  height: 22px;
  color: var(--header-muted);
  cursor: pointer;
}
.connection-status { display: flex; align-items: center; }
.cs-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
  transition: background 0.4s, box-shadow 0.4s;
}
.connection-status[data-connected="true"] .cs-dot {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

/* ── Table ──────────────────────────────────────────────── */
/* Width-first sizing: fills available device width up to (100% - 40px) so the
   20px gutter on each side exactly accommodates side seats at right/left:-20px
   (their outer edge then sits flush with the device edge). Height is derived
   from the 320:510 aspect ratio. max-height clamps the table when felt-region
   is too short (small TG webview) — browsers shrink width proportionally to
   keep the aspect ratio. */
.table-wrap {
  position: relative;
  width: 100%;
  max-width: calc(100% - 40px);
  aspect-ratio: 320 / 510;
  height: auto;
  max-height: 100%;
  overflow: visible;
}
.table-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* On-felt label — variant/blinds watermark printed on the cloth */
.felt-label {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-transform: uppercase;
  z-index: 3;
}
.felt-label-blinds {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -1px;
  color: rgba(232, 238, 246, 0.08);
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.felt-label-variant {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: rgba(232, 238, 246, 0.08);
}
.felt-label-buyin {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(232, 238, 246, 0.08);
}

/* ── Villain seats — positioned inside .table-wrap as percent so they
       scale with the felt regardless of viewport size. ── */
.seat {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.seat-v0 { top: -32px; left: 50%; transform: translateX(-50%); }
.seat-v1 { top: 22%; right: -20px; }
.seat-v2 { top: 60%; right: -20px; }
.seat-v3 { top: 22%; left: -20px; }
.seat-v4 { top: 60%; left: -20px; }

.seat-cards-wrap {
  position: relative;
  height: 24px;
  width: 50px;
  margin-bottom: -10px;
  z-index: 1;
}
.mini-card {
  position: absolute;
  top: 0;
  width: 22px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(135deg, #b8202a 0%, #7a0e18 100%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 2px 5px var(--card-shadow);
  overflow: hidden;
}
.mini-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 4px);
  border-radius: 1px;
}
.mini-card.l { left: 2px; transform: rotate(-8deg); }
.mini-card.r { left: 26px; transform: rotate(8deg); }

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--avatar-stroke), var(--avatar-bg));
  border: 2.5px solid var(--avatar-stroke);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.6),
    inset 0 1px 2px rgba(255,255,255,0.15),
    inset 0 -2px 6px rgba(0,0,0,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--avatar-text);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  z-index: 2;
  position: relative;
}
.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events: none;
}

.plaque {
  margin-top: -6px;
  background: var(--plaque-bg);
  border: 1px solid var(--plaque-stroke);
  border-radius: 10px;
  padding: 3px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  font-size: 12px;
  font-weight: 800;
  color: var(--plaque-stack);
  min-width: 80px;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: -1;
  white-space: nowrap;
}
.plaque .stack {
  font-size: 12px;
  font-weight: 700;
  color: var(--plaque-stack);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  line-height: 1.15;
}
/* money-magnet 🧲: the target plate's stack while it is being drained */
.plaque .stack.mag-drain {
  color: #8fc4ff;
  text-shadow: 0 0 6px rgba(120, 150, 255, 0.9), 0 0 14px rgba(155, 60, 240, 0.6);
  animation: mag-drain-shake 90ms steps(2) infinite;
}
@keyframes mag-drain-shake {
  0% { transform: translateX(-0.6px); }
  100% { transform: translateX(0.6px); }
}
.plaque .pname {
  font-size: 9.5px;
  color: var(--plaque-name);
  margin-bottom: 1px;
  letter-spacing: 0.3px;
}

/* Dealer button */
.dealer-btn {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dealer-bg, var(--accent));
  color: var(--dealer-text, #2a1808);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
  z-index: 21;
  top: 80px;
  left: 50%;
  transform: translateX(28px);
}
.dealer-btn-hero {
  position: absolute;
  bottom: 278px;
  left: calc(50% + 44px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dealer-bg, var(--accent));
  color: var(--dealer-text, #2a1808);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
  z-index: 21;
}

/* ── Hero zone (avatar + cards + plaque) ──────────────────
   Hero is now a flex child rendered AFTER the felt-region; it overlaps
   the felt's bottom rim via negative margin-top. No absolute positioning. */
.hero-zone {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Pull hero-zone up so PTT sits well inside the felt's lower oval,
     matching the mockup where seat-hero overlaps the table by ~120px.
     -90px = ~16px hero-cards visible above PTT + PTT sitting inside felt
     bottom rim. */
  margin-top: -90px;
  z-index: 22;
}
/* Compact hero stack matches v28 mockup (PTT + plaque only).
   seat-name + hero-ptt-hint hidden when not the active state — they ate
   ~21px from felt-region before this rule. */
.hero-zone .seat-name { display: none; }
.hero-zone .hero-ptt-hint:not(.visible) { display: none; }
.hero-zone .plaque { margin-top: 6px; padding: 3px 12px; min-width: 78px; }
.hero-zone .lobby-hero-name {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  text-align: center;
}
.seat-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 22;
}
/* Lobby: hero is one of the seats positioned inside .table-wrap; pin to
   bottom of the felt with absolute positioning like other seats. */
.hpt-lobby .seat-hero {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
}
.hero-cards {
  display: flex;
  position: relative;
  height: 78px;
  margin-bottom: 8px;
  align-items: flex-end;
  justify-content: center;
}
/* Card slot wrapper used for fan rotation (transform set inline by JSX) */
.hero-card-fan {
  display: inline-block;
  line-height: 0;
}
/* For PLO5 (5 cards) shrink slightly so it still fits on 390px-wide portrait */
.hero-cards[data-count="5"] .hero-card {
  transform: scale(0.86);
  transform-origin: center bottom;
}
.hero-cards[data-count="4"] .hero-card {
  transform: scale(0.92);
  transform-origin: center bottom;
}
.hero-card {
  width: 50px;
  height: 70px;
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  border-radius: 5px;
  position: relative;
  box-shadow: 0 6px 18px var(--card-shadow);
  overflow: hidden;
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: 2px;
}
.hero-card .rank {
  position: absolute;
  top: 3px;
  left: 5px;
  font-family: "SF Pro Display", -apple-system, "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  z-index: 2;
}
.hero-card .suit-mini {
  position: absolute;
  top: 25px;
  left: 6px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  z-index: 2;
}
.hero-card .suit,
.card-suit-big {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
}

/* 4-color deck */
.s-h { color: #d11414; }   /* hearts — red */
.s-d { color: #1a4fa0; }   /* diamonds — blue */
.s-c { color: #178a3a; }   /* clubs — green */
.s-s { color: #0a0a0a; }   /* spades — black */

.hero-plaque {
  background: var(--plaque-bg);
  border: 1px solid var(--plaque-stroke);
  border-radius: 14px;
  padding: 6px 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  color: var(--plaque-stack);
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.hero-plaque .you-label {
  color: var(--plaque-name);
  font-weight: 500;
  margin-right: 4px;
}

/* Hero row: [avatar PTT button] [plaque "You · stack"] side-by-side */
.hero-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--avatar-stroke, rgba(255,255,255,0.18));
  background: var(--avatar-bg, #1f2733);
  color: var(--avatar-text, #ffffff);
  font-size: 20px;
  font-weight: 700;
  font-family: "SF Pro Display", -apple-system, "Helvetica Neue", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.hero-avatar:active { transform: scale(0.96); }
.hero-avatar-mono {
  line-height: 1;
  letter-spacing: -0.5px;
}
.hero-avatar-mic {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a1f2a;
  border: 1.5px solid rgba(255,255,255,0.18);
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  opacity: 0.45;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.hero-avatar-active {
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25), 0 4px 14px rgba(74, 222, 128, 0.4);
}
.hero-avatar-active .hero-avatar-mic {
  opacity: 1;
  background: #16a34a;
}
.hero-avatar-active::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(74, 222, 128, 0.55);
  animation: hero-ptt-pulse 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes hero-ptt-pulse {
  0%   { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 0;   }
}
.hero-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-avatar-ring-wrap {
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 56px;
}
.hero-avatar-ring-wrap .turn-ring {
  position: absolute;
  inset: -6px;
  pointer-events: none;
  z-index: 3;
}

/* Villain seats: wrap around the 80×80 avatar to host the SVG ring */
.avatar-ring-wrap {
  position: relative;
  display: inline-flex;
  width: 80px;
  height: 80px;
  z-index: 2;
}
.avatar-ring-wrap .turn-ring {
  position: absolute;
  inset: -7px;
  pointer-events: none;
  z-index: 3;
}
/* Hero PTT: TurnRing renders inside .hero-ptt-core (which is inset:6px from
   the 88×88 button). Pulling -6px out makes the ring's 88×88 viewBox align
   with the button's outer edge, instead of sitting inline in the flex row
   and shoving the monogram off-center. */
.hero-ptt-core .turn-ring {
  position: absolute;
  inset: -6px;
  pointer-events: none;
  z-index: 3;
}
.ptt-countdown {
  font-family: monospace;
  font-size: 12px;
  color: #4ade80;
  text-align: center;
  margin-top: 2px;
  line-height: 1;
}
/* Video mode toggle (PTT | Cam | Mic) — small pill row below hero zone */
.video-mode-toggle {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}
.video-mode-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.video-mode-btn-active {
  background: rgba(251,191,36,0.18);
  border-color: rgba(251,191,36,0.6);
  color: #fbbf24;
}
/* PTT live ring — pulsing amber border on hero seat tile when isPttActive */
@keyframes ptt-live-pulse {
  0%   { box-shadow: 0 0 0 0px rgba(251,191,36,0.8); }
  70%  { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0px rgba(251,191,36,0); }
}
.ptt-live {
  animation: ptt-live-pulse 1.5s ease-out infinite;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.8);
  border-radius: 50%;
}

/* ── Community + pot — center of felt (top-anchored at 44%) ── */
.community-pot {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.community-row {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

/* Pot block lives inside .community-pot below the community row */
.pot-block {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 170px;
  pointer-events: auto;
}
.pot-label-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pot-label {
  margin-top: 12px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
}
.pot-amount {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  text-shadow: 0 0 12px var(--accent-glow);
}
.pot-row {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* ── Street banner — small pill above the community row */
.street-banner {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Community cards — lives inside .community-pot at top of the row */
.community {
  position: static;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.board-card {
  width: 36px;
  height: 52px;
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  border-radius: 4px;
  position: relative;
  box-shadow: 0 3px 10px var(--card-shadow);
  overflow: hidden;
}
.board-card-empty {
  width: 36px;
  height: 52px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}
.board-card::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 1.5px;
}
.board-card .rank {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  font-family: "SF Pro Display", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  z-index: 2;
}
.board-card .suit-mini {
  position: absolute;
  top: 17px;
  left: 4px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  z-index: 2;
}
.board-card .suit {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}

/* ── Per-player bet (chip stack + amount) ───────────────── */
.bet-marker-fly {
  position: absolute;
  z-index: 18;
}
.bet-marker {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.bet-pill {
  background: var(--bet-pill);
  border: 1px solid var(--plaque-stroke);
  border-radius: 9px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--bet-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  margin-bottom: 1px;
  white-space: nowrap;
}

/* Chip stack SVG container */
.chip-stack svg { display: block; }

/* Pot chip stack */
.pot-chips { margin-top: 2px; display: flex; gap: 1px; align-items: flex-end; }

/* ── Turn timer — floats just above the action bar */
.turn-timer {
  position: absolute;
  bottom: 168px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 23;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.turn-timer .timer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: timerPulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.time-bank-btn {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: #f59e0b;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
}
.time-bank-btn:active { transform: scale(0.96); }

/* ── Action bar — compact 2-row layout: raise-row + actions grid ── */
.action-bar {
  flex: 0 0 auto;
  z-index: 25;
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 75%, rgba(0,0,0,0) 100%);
}

/* Single horizontal raise row: MIN ½ POT ALL + slider + amount input */
.raise-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-bottom: 8px;
}

/* Compact quick-bet pill (sits inside raise-row) */
.quick-bet {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: rgba(212,178,72,0.10);
  border: 1px solid rgba(212,178,72,0.35);
  color: var(--accent);
  border-radius: 8px;
  padding: 4px 7px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.12s, border-color 0.12s;
}
.quick-bet:hover, .quick-bet.active {
  background: rgba(212,178,72,0.22);
  border-color: var(--accent);
  color: var(--accent);
}
.quick-bet:disabled { opacity: 0.45; cursor: not-allowed; }

/* Legacy wrapper kept for back-compat; no own styling in compact layout */
.quick-bets { display: contents; }

.preset-pills {
  position: absolute;
  bottom: 100px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  z-index: 24;
}
.preset-pill {
  flex: 1 1; background: transparent; border: 1px solid var(--plaque-stroke);
  border-radius: 10px; padding: 4px 5px; color: var(--text-muted);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.preset-pill.active {
  background: rgba(255, 180, 0, 0.12); color: #f0b429; border-color: #f0b429;
}

/* Raise-controls — kept as a `display: contents` wrapper so its children
   slot directly into .raise-row's flex layout. */
.raise-controls {
  display: contents;
}
.raise-labels {
  display: none; /* compact layout has no labels row */
}
.raise-labels .label { font-size: 9px; color: var(--text-muted); margin-right: 2px; }
.raise-labels .mid {
  color: var(--accent);
  font-weight: 700;
}
.raise-slider {
  flex: 1 1;
  min-width: 0;
  height: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: var(--slider-track);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  position: relative;
}
.raise-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0 var(--fill, 30%), rgba(255,255,255,0.10) var(--fill, 30%) 100%);
}
.raise-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-thumb);
  box-shadow: 0 0 6px var(--accent-glow);
  cursor: pointer;
  border: none;
  margin-top: -6px;
}
.raise-slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--slider-track); }
.raise-slider::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--slider-fill); }
.raise-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: none; background: var(--slider-thumb); box-shadow: 0 0 6px var(--accent-glow); cursor: pointer; }

/* Actions row — equal-width FOLD / CALL / RAISE buttons */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 6px;
  gap: 6px;
  height: 44px;
}
/* Legacy wrapper kept for back-compat; same grid layout */
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 6px;
  gap: 6px;
  height: 44px;
}
.btn {
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.08s, filter 0.12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0));
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}
.btn:active { transform: scale(0.96); filter: brightness(0.92); }
.btn-sub, .btn .sub {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.6px;
  margin-top: 1px;
  text-transform: none;
}
.btn-fold, .btn-call, .btn-raise {
  background: var(--btn-bg);
  color: var(--btn-text, #ffffff);
  border-color: var(--btn-stroke);
  box-shadow: 0 4px 14px var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Skin picker (pill, top-right of scene) ─────────────── */
.skin-picker {
  position: absolute;
  top: 84px;
  right: 14px;
  z-index: 30;
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(20,20,30,0.85);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
}
.skin-chip {
  background: transparent;
  border: 0;
  color: #6a7080;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.skin-chip:hover { color: #c8d0e0; }
.skin-chip.active {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

/* ── Unified dealer button (legacy free-floating disc, used by lobby etc.) */
.dealer-btn-any {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dealer-bg, var(--accent));
  color: var(--dealer-text, #2a1808);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* ── D / SB / BB badges — rendered as children of the avatar so they
       follow the seat position automatically. */
.badge {
  position: absolute;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 5;
}
.badge-dealer {
  width: 20px;
  height: 20px;
  background: var(--dealer-bg);
  color: var(--dealer-text);
  border: 1.5px solid #8a5a08;
  top: -2px;
  right: -2px;
  font-size: 11px;
}
.badge-blind {
  padding: 1px 6px;
  min-width: 22px;
  height: 16px;
  background: rgba(255,255,255,0.95);
  color: #0a0a0a;
  border: 1px solid rgba(0,0,0,0.4);
  font-size: 9px;
  bottom: 22px;
  right: -10px;
}

/* Hero BB pinned on PTT circle */
.hero-bb {
  position: absolute;
  top: 36px;
  right: -12px;
  bottom: auto;
}

/* ── Legacy SB / BB sibling badges (kept for back-compat in lobby) ── */
.sb-btn, .bb-btn {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  padding: 2px 5px;
  border-radius: 8px;
  z-index: 17;
  pointer-events: none;
}
.sb-btn { background: #c97d10; transform: translateY(22px); }
.bb-btn { background: #3a6b8a; transform: translateY(44px); }

/* ── Active-seat pulsing ring ───────────────────────────── */
@keyframes hpt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent); }
}
.seat[data-active="true"] .avatar {
  animation: hpt-pulse 1.4s ease-in-out infinite;
}

/* ── Skeleton ──────────────────────────────────────────── */
.hpt-skeleton-block {
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  animation: hpt-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes hpt-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}
.seat-skeleton-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

/* ── Action bar wrapper (used by skeleton) ──────────────── */
.action-bar-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 25;
  padding: 12px 14px calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ── Settings sheet ──────────────────────────────────────── */
.settings-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 200; animation: hpt-fade-in 120ms ease-out; }
.settings-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 201;
  background: var(--bg-header); border-radius: 20px 20px 0 0;
  padding: 12px 20px calc(32px + env(safe-area-inset-bottom, 0px));
  max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: hpt-slide-up 220ms cubic-bezier(0.32,0.72,0,1); }
@keyframes hpt-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes hpt-fade-in { from { opacity: 0; } to { opacity: 1; } }
.settings-handle { width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.2); margin: 0 auto 16px; }
.settings-header { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; color: var(--text-primary); font-size: 17px; font-weight: 600; }
.settings-close { background: none; border: none; color: var(--text-muted);
  font-size: 20px; cursor: pointer; padding: 4px; }
.settings-row { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.settings-label { color: var(--text-primary); font-size: 15px; }
.settings-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.settings-toggle input { opacity: 0; width: 0; height: 0; }
.settings-toggle-track { position: absolute; inset: 0; border-radius: 12px;
  background: rgba(255,255,255,0.15); transition: background 200ms; cursor: pointer; }
.settings-toggle-track::after { content: ""; position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  transition: left 200ms; }
.settings-toggle input:checked + .settings-toggle-track { background: var(--accent); }
.settings-toggle input:checked + .settings-toggle-track::after { left: 23px; }
/* On/off variant (per-player mutes): checked = enabled = green, off = red. */
.settings-toggle.onoff input:checked + .settings-toggle-track { background: #2fae5f; }
.settings-toggle.onoff input:not(:checked) + .settings-toggle-track { background: #d1453b; }
/* Per-sound sub-accordion (nested inside the settings-menu Sound section) */
.sound-subacc-header { display: flex; justify-content: space-between; align-items: center;
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 9px;
  background: rgba(15, 25, 45, 0.55); border: 1px solid var(--plaque-stroke);
  cursor: pointer; color: #C7CEDB; font-size: 0.82rem; font-weight: 700;
  -webkit-tap-highlight-color: transparent; }
.sound-subacc-header.open { color: #fff; background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.sound-subacc-chev { font-size: 0.7rem; opacity: 0.7; }
.sound-subacc-body { max-height: 40vh; overflow-y: auto; }
.settings-exit-btn { width: 100%; padding: 12px; border-radius: 10px;
  background: rgba(200,50,50,0.18); border: 1px solid rgba(200,50,50,0.4);
  color: #f87171; font-size: 15px; font-weight: 600; cursor: pointer; }
.settings-exit-btn:active { opacity: 0.75; }
.gear-btn { background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; color: inherit; }

/* ── Error toast ─────────────────────────────────────────── */
.error-toast {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(180,30,30,0.92); color: #fff;
  border-radius: 8px; padding: 8px 14px; font-size: 13px;
  display: flex; gap: 8px; align-items: center; z-index: 50;
  animation: toastIn 0.2s ease;
}
.error-toast button {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 16px; padding: 0;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.equity-badge {
  position: absolute;
  background: rgba(255, 180, 0, 0.85);
  color: #0a0e1c;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 22;
  pointer-events: none;
}

.seat-sitting-out { opacity: 0.5; }
.sitting-out-badge {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.55); border-radius: 4px;
  padding: 1px 5px; white-space: nowrap; pointer-events: none;
}

/* ── Top-up button & pending indicator — floats above action bar ── */
.top-up-btn {
  position: absolute;
  bottom: 110px;
  right: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  background: #06b6d4;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  z-index: 30;
}
.top-up-btn:active { transform: scale(0.96); }
.top-up-pending {
  position: absolute;
  bottom: 110px;
  right: 8px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-muted);
  z-index: 30;
}

/* ── Reconnect banner ─────────────────────────────────── */
.reconnect-banner {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(180, 130, 0, 0.92); color: #fff;
  border-radius: 8px; padding: 8px 14px; font-size: 13px;
  z-index: 50; white-space: nowrap;
  animation: toastIn 0.2s ease;
}

/* ── Winner overlay ───────────────────────────────────── */
.winner-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 9999px;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  text-align: center;
}

/* ============================================================
   Round-6 additions — PTT-circle, emote panel, FX layer, speaker ring.
   --ptt-live / --ptt-live-glow are aliased to the active skin's accent.
   Tokens are inherited via .hpt-root so all 4 skins get them automatically.
   ============================================================ */
.hpt-root {
  --ptt-live: var(--accent);
  --ptt-live-glow: var(--accent-glow);
}

/* ── Hero cards-wrap (vertical hero column) ── */
.hero-cards-wrap {
  position: relative;
  width: 96px;
  height: 70px;
  margin-bottom: -44px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ── PTT circle ── */
.hero-ptt {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
}
.hero-ptt-core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--avatar-stroke), var(--avatar-bg));
  border: 2px solid var(--avatar-stroke);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.6),
    inset 0 1px 2px rgba(255,255,255,0.15),
    inset 0 -2px 6px rgba(0,0,0,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--avatar-text);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.hero-ptt-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events: none;
}
.hero-ptt-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.hero-ptt-ring circle { fill: none; stroke-linecap: round; }
.hero-ptt-ring .ring-bg { stroke: rgba(255,255,255,0.06); stroke-width: 3; }
.hero-ptt-ring .ring-fg {
  stroke: var(--ptt-live);
  stroke-width: 3;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  filter: drop-shadow(0 0 6px var(--ptt-live-glow));
  transition: stroke-dashoffset 0.2s linear;
}
.hero-ptt[data-state="armed"], .hero-ptt[data-state="live"],
.hero-ptt[data-state="hold"], .hero-ptt[data-state="cooldown"] { z-index: 6; }
.hero-ptt[data-state="idle"] .hero-ptt-ring .ring-fg { stroke-dashoffset: 264; }
.hero-ptt[data-state="armed"] .hero-ptt-core {
  box-shadow:
    0 0 0 2px var(--ptt-live),
    0 0 18px var(--ptt-live-glow),
    inset 0 1px 2px rgba(255,255,255,0.2);
  transform: scale(1.02);
}
.hero-ptt[data-state="live"] .hero-ptt-core {
  border-color: var(--ptt-live);
  box-shadow:
    0 0 0 2px var(--ptt-live),
    0 0 22px var(--ptt-live-glow),
    inset 0 1px 2px rgba(255,255,255,0.18);
  animation: pttPulse 1.1s ease-in-out infinite;
}
.hero-ptt[data-state="live"] .hero-ptt-ring .ring-fg {
  stroke-dashoffset: 0;
  animation: pttCountdown 60s linear forwards;
}
.hero-ptt[data-state="live"][data-mode="cam"] .hero-ptt-core {
  background: linear-gradient(135deg, #2a3850 0%, #1a2030 50%, #2a3850 100%);
  background-size: 200% 200%;
  animation: pttPulse 1.1s ease-in-out infinite, videoShimmer 4s ease-in-out infinite;
}
.hero-ptt[data-state="live"][data-mode="cam"] .hero-ptt-monogram { display: none; }
.hero-ptt[data-state="live"][data-mode="cam"] .hero-ptt-livecam { display: flex; }
.hero-ptt[data-state="hold"] .hero-ptt-core {
  border-color: var(--ptt-live);
  box-shadow:
    0 0 0 3px var(--ptt-live),
    0 0 28px var(--ptt-live-glow),
    inset 0 1px 2px rgba(255,255,255,0.18);
  transform: scale(0.96);
  animation: pttPulse 0.7s ease-in-out infinite;
}
.hero-ptt[data-state="hold"] .hero-ptt-ring .ring-fg {
  stroke-dashoffset: 0;
  animation: ringSweep 1.4s linear infinite;
}
.hero-ptt[data-state="cooldown"] .hero-ptt-core { opacity: 0.7; transition: opacity 0.5s, box-shadow 0.5s; }
.hero-ptt-livecam { display: none; align-items: center; justify-content: center; position: absolute; inset: 0; color: rgba(255,255,255,0.85); }
.hero-ptt-livecam svg { width: 22px; height: 22px; }

.hero-ptt-hint {
  margin-top: 5px;
  height: 11px;
  font-size: 9px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  text-align: center;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.18s, color 0.18s;
  text-shadow: 0 0 6px var(--ptt-live-glow);
  white-space: nowrap;
}
.hero-ptt-hint.visible { opacity: 1; color: var(--ptt-live); }

.hero-plaque-r6 {
  margin-top: 6px;
  background: var(--plaque-bg);
  border: 1px solid var(--plaque-stroke);
  border-radius: 13px;
  padding: 5px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  min-width: 78px;
  text-align: center;
  z-index: 2;
}
.hero-plaque-r6 .stack {
  font-size: 15px;
  font-weight: 800;
  color: var(--plaque-stack);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  line-height: 1.1;
  text-shadow: 0 0 10px var(--accent-glow);
}
.hero-plaque-r6 .you-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--plaque-name);
  margin-bottom: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Mode badge (mic / cam) on the PTT circle */
.hero-ptt-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--plaque-bg);
  border: 1.5px solid var(--plaque-stroke);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plaque-name);
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
  z-index: 4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, border-color 0.2s, transform 0.1s;
}
.hero-ptt-badge:active { transform: scale(0.9); }
.hero-ptt-badge svg { width: 13px; height: 13px; }
.hero-ptt[data-mode="cam"] .icon-mic { display: none; }
.hero-ptt[data-mode="mic"] .icon-cam { display: none; }

@keyframes pttPulse {
  0%, 100% { box-shadow:
    0 0 0 2px var(--ptt-live),
    0 0 18px var(--ptt-live-glow),
    inset 0 1px 2px rgba(255,255,255,0.18); }
  50% { box-shadow:
    0 0 0 3px var(--ptt-live),
    0 0 30px var(--ptt-live-glow),
    inset 0 1px 2px rgba(255,255,255,0.18); }
}
@keyframes pttCountdown {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 264; }
}
@keyframes ringSweep {
  0%   { stroke-dasharray: 24 264; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 24 264; stroke-dashoffset: -264; }
}
@keyframes videoShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Emote panel (radial bloom around tapped seat) ── */
.emote-panel {
  position: absolute;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
}
.emote-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(14,24,48,0.95);
  border: 1.5px solid var(--plaque-stroke);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.04);
  padding: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  animation: emoteBloom 0.32s cubic-bezier(.2,.9,.3,1.4) forwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes emoteBloom {
  from { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(0.3); }
  to   { opacity: 1; transform: translate(-50%, -50%) translate(var(--ex, 0), var(--ey, 0)) scale(1); }
}
.emote-btn:active {
  transform: translate(-50%, -50%) translate(var(--ex, 0), var(--ey, 0)) scale(0.85);
  transition: transform 0.08s;
}
/* image glyph inside an emote button (e.g. 💋 real lips) */
.emote-ico-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
/* Second-ring placeholders — dimmed, dashed, non-interactive until real emotes land. */
.emote-btn.placeholder {
  background: rgba(14,24,48,0.6);
  border-style: dashed;
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.45);
  font-size: 16px;
  cursor: default;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.emote-btn.placeholder:active {
  transform: translate(-50%, -50%) translate(var(--ex, 0), var(--ey, 0)) scale(1);
}
/* Built but the effect engine hasn't finished warming on THIS device yet — dim +
   soft pulse; tapping shows the "still loading" hint instead of firing/charging. */
.emote-btn.loading {
  opacity: 1;
  color: rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.18);
  animation: emoteBloom 0.32s cubic-bezier(.2,.9,.3,1.4) forwards,
             emoteLoadingPulse 1.1s ease-in-out 0.4s infinite;
}
.emote-btn.loading .emote-ico-img { opacity: 0.25; }
/* Dim the glyph itself so the spinner ring on top reads as "loading". */
.emote-btn.loading { color: rgba(255,255,255,0.22); }
/* Spinner ring overlay — a rotating arc that makes "not ready yet" unmistakable
   vs. the ready buttons, while the button stays visible in its slot. */
.emote-btn.loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.85);
  animation: emoteSpin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes emoteSpin {
  to { transform: rotate(360deg); }
}
@keyframes emoteLoadingPulse {
  0%, 100% { filter: brightness(0.75); }
  50%      { filter: brightness(1.05); }
}
/* Toast shown when the user taps an un-warmed emote. */
.emote-loading-toast {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 78vw;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(14,24,48,0.94);
  border: 1px solid var(--plaque-stroke);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
  animation: emoteToastIn 0.18s ease-out;
}
@keyframes emoteToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.seat.targeting .avatar,
.seat-hero.targeting .hero-ptt-core {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 18px var(--accent-glow),
    inset 0 1px 2px rgba(255,255,255,0.15),
    inset 0 -2px 6px rgba(0,0,0,0.32);
}

/* ── Speaker ring on villains ── */
.avatar.speaking {
  border-color: var(--ptt-live);
  overflow: visible;
  animation: pttPulse 1.1s ease-in-out infinite;
}
.avatar.speaking::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--ptt-live);
  opacity: 0.5;
  animation: speakerRing 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes speakerRing {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ── FX layer for projectiles + splats ── */
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  overflow: hidden;
}
.projectile {
  position: absolute;
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  will-change: transform, left, top;
}
.splat {
  position: absolute;
  font-size: 44px;
  line-height: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  animation: splatKf 0.9s cubic-bezier(.2,.9,.3,1) forwards;
  pointer-events: none;
}
@keyframes splatKf {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-20deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.5) rotate(8deg); }
  45%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) rotate(0deg); }
}
.splat::before, .splat::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.splat::before { top: 60%; left: -10%; }
.splat::after  { top: 30%; right: -10%; }
.splat[data-emote="🍅"] { color: #c41e1e; }
.splat[data-emote="🥚"] { color: #f4d878; }
.splat[data-emote="🍌"] { color: #f4d040; }
.splat[data-emote="💩"] { color: #8a5a2e; }
.splat[data-emote="🥊"] { color: #d11414; }
.splat[data-emote="🍻"] { color: #d4b248; }

@keyframes hitShake {
  0%, 100% { transform: translate(0) rotate(0); }
  12%      { transform: translate(-4px, 1px) rotate(-3deg); }
  28%      { transform: translate(4px, -1px) rotate(3deg); }
  44%      { transform: translate(-3px, 2px) rotate(-2deg); }
  60%      { transform: translate(3px, -1px) rotate(2deg); }
  78%      { transform: translate(-2px, 0) rotate(-1deg); }
}
.seat .avatar.hit { animation: hitShake 0.55s ease-out; }
.hero-ptt.hit .hero-ptt-core { animation: hitShake 0.55s ease-out; }


/* =====================================================================
   Round-6 v28 cosmetic-only additions (2026-05-20)
   These rules are SAFE: they don't restructure the scene layout.
   Layout (scene/table-wrap/seat positioning) stays as round-5/6 production.
   ===================================================================== */

/* Avatars bumped to 80×80 with 2.5px border (round-6 spec). */
.hpt-active .avatar {
  width: 80px; height: 80px;
  border-width: 2.5px;
  font-size: 30px;
}

/* Plaque uniform: 80px min-width to fit "15,400.00" with rake decimals. */
.hpt-active .plaque {
  min-width: 80px;
  padding: 3px 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Seat-name row — between avatar and plaque */
.seat-name {
  margin-top: 2px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Board cards bumped 48×68 for readability */
.hpt-active .board-card {
  width: 48px; height: 68px;
}
.hpt-active .board-card .rank { font-size: 22px; top: 2px; left: 4px; }
.hpt-active .board-card .suit-mini { font-size: 13px; top: 22px; left: 5px; }
.hpt-active .board-card .suit { font-size: 36px; bottom: 3px; }
.hpt-active .board-back {
  width: 48px; height: 68px;
}

/* 4-color deck */
.s-h { color: #d11414; }
.s-d { color: #1a4fa0; }
.s-c { color: #178a3a; }
.s-s { color: #0a0a0a; }

/* Manual bet input — pill next to the slider */
.raise-amt {
  font-size: 13px; font-weight: 800;
  color: var(--text-primary);
  width: 72px; text-align: center;
  background: rgba(15, 25, 45, 0.85);
  border: 1px solid rgba(120, 140, 200, 0.30);
  border-radius: 8px;
  padding: 5px 6px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  margin-right: 8px;
  -moz-appearance: textfield;
}
.raise-amt::-webkit-outer-spin-button,
.raise-amt::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.raise-amt:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* FOLD button now blue (matches Call) — uniform color, no brown */
.action-buttons .btn-fold {
  background: linear-gradient(160deg, #2e72d8, #1850a8) !important;
  border-color: #5090e8 !important;
}

/* =====================================================================
   Tomato-impact hero-effect: camera shake on scene + red tint on victim.
   Pixi canvas is rendered inside .fx-layer (z-index 35), under UI (z 50+).
   ===================================================================== */
.scene-shake {
  animation: sceneShake 0.32s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes sceneShake {
  0%, 100% { transform: translate(0, 0); }
  10%  { transform: translate(-3px, 1px) rotate(-0.3deg); }
  20%  { transform: translate(4px, -2px) rotate(0.4deg); }
  35%  { transform: translate(-5px, 2px) rotate(-0.4deg); }
  50%  { transform: translate(3px, -1px) rotate(0.2deg); }
  65%  { transform: translate(-2px, 2px) rotate(-0.2deg); }
  80%  { transform: translate(2px, -1px) rotate(0.1deg); }
}

.avatar.hit-tomato {
  animation: hitShake 0.55s ease-out, tomatoTint 0.7s ease-out;
}
@keyframes tomatoTint {
  0%   { box-shadow: 0 0 0 0 rgba(196,30,30,0); filter: none; }
  18%  { box-shadow: 0 0 14px 4px rgba(255,40,40,0.85); filter: saturate(1.4) brightness(1.05); }
  60%  { box-shadow: 0 0 8px 2px rgba(196,30,30,0.55); filter: saturate(1.2); }
  100% { box-shadow: 0 0 0 0 rgba(196,30,30,0); filter: none; }
}

@keyframes hpt-spin {
  to { transform: rotate(360deg); }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/equalizer-loader.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.eq-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Only the 4th bar blinks. */
.eq-bar-blink {
  animation: eq-blink 1s ease-in-out infinite;
}
@keyframes eq-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .eq-bar-blink { animation: none; }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/r8css/r8-vars.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────────────────────────
   r8-table.css  —  scoped under .r8-root so it doesn't clash with
   poker-table.css or r7-table.css.
   Source of truth: design/round-8/r8-base-FINAL-2026-05-21.html
   ──────────────────────────────────────────────────────────────────────────── */

.r8-root * { box-sizing: border-box; margin: 0; padding: 0; }

/* MIUI / Xiaomi Telegram WebViews run aggressive double-tap-zoom + scroll
   disambiguation, which "swallows" the first tap on plain onClick targets
   (SIT seats, nav/cog icons, emote buttons) — users had to tap 3-4 times.
   `manipulation` disables double-tap-zoom and the speculative touch-cancel
   while still allowing pan/scroll. Elements that need a stricter value
   (sliders → none, scroll rows → pan-y) override this via higher-specificity
   class rules below. Samsung WebViews weren't affected, but this is safe
   everywhere. */
.r8-root * { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Respect the OS "reduce motion" preference: skip the deal-in fly so the
   cards just appear (equivalent to framer-motion's MotionConfig
   reducedMotion="user"). */
@media (prefers-reduced-motion: reduce) {
  .r8-root .hero-card,
  .r8-root .board-card,
  .r8-root .seat-cards-wrap .mini-card { animation: none !important; }
}

/* ── CSS variables (navy skin defaults) ── */
.r8-root {
  --bg: #050914;
  --bg-header: #081026;
  --header-text: #edf2ff;
  --header-muted: #8b9bb8;

  /* MASTER TABLE: Classic Blue */
  --felt-1: #183a86;
  --felt-mid: #0d255a;
  --felt-2: #071733;
  --felt-edge: rgba(0,0,0,0.72);
  --felt-lamp: rgba(180,205,255,0.115);

  --rim-outer: #091226;
  --rim-inner: #315aa8;
  /* Layered master glow: (1) felt-lamp = soft center light, (2) rim-glow =
     thin sharp rim line, (3) table-outer-bloom = wide very-soft halo on the
     .table-wrap. Premium depth, NOT a neon outline. */
  --rim-glow: rgba(145,92,255,0.20);
  --rim-highlight: rgba(145,92,255,0.24);
  --table-outer-bloom: rgba(145,92,255,0.12);

  /* UI — одинаковое во всех темах (skin-* НЕ переопределяют) */
  /* Avatar = clean dark navy disk (video placeholder) + thin purple ring.
     Identical in every theme (skins must NOT override). No highlight spot. */
  --avatar-bg-mid: #172447;
  --avatar-bg-deep: #070d1c;
  --avatar-bg: #172447; /* legacy alias for non-table placeholder avatars */
  --avatar-stroke: rgba(139, 92, 255, 0.46);
  --avatar-glow: rgba(139, 92, 255, 0.13);
  --avatar-text: #ffffff;

  --plaque-bg: rgba(7,14,32,0.94);
  --plaque-stroke: rgba(139,92,255,0.24);
  --plaque-name: #d8e4ff;
  --plaque-stack: #ffd45a;

  --accent: #ffd45a;
  --accent-glow: rgba(255,212,90,0.34);

  /* ── PASS 5: HUMPOKER brand DNA (single blue/purple system) ──
     Every blue and purple in the UI resolves to these tokens so the whole
     app reads as one design system. The gold --accent stays (pot/timer). */
  --brand-blue: #3B8CFF;
  --brand-blue-dark: #1768E6;
  --brand-purple: #8B5CFF;
  --brand-purple-dark: #6427E8;
  --brand-glow-blue: rgba(55,132,255,0.18);
  --brand-glow-purple: rgba(145,92,255,0.18);
  --brand-gradient: linear-gradient(180deg, #4A96FF 0%, #2E6DF0 58%, #6B35F0 100%);
  /* 70% blue / 30% purple — the brand "active/your-turn" tint */
  --brand-active: rgb(83,126,255);
  /* one focus-glow recipe used everywhere a blue glow used to live */
  --brand-focus-glow: 0 0 8px var(--brand-glow-blue), 0 0 14px var(--brand-glow-purple);

  /* ── PASS 6: voice (green) + camera (cyan) functional accents ── */
  --voice-green: #67E85E;
  --voice-green-dark: #2DBD45;
  --voice-green-glow: rgba(103,232,94,.20);
  --camera-cyan: #48D9FF;
  --camera-cyan-dark: #159EC8;
  --camera-cyan-glow: rgba(72,217,255,.14);

  /* ── PASS 6: table-ring brand lighting (light built INTO the table) ──
     Kept separate from --rim-inner (which menu borders use) on purpose. */
  --rim-core: #347CFF;        /* blue core band         */
  --rim-brand-inner: #5C6FFF; /* blue→purple transition */
  --rim-purple: #8B5CFF;      /* purple inner light      */
  --rim-glow-blue: rgba(59,140,255,.24);
  --rim-glow-purple: rgba(139,92,255,.18);
  --rim-bloom-purple: rgba(139,92,255,.08);

  --text-primary: #edf2ff;
  --text-muted: #8b9bb8;
  --star: #ffd45a;

  --card-bg: #fdfdfb;
  --card-stroke: rgba(255,255,255,0.92);
  --card-shadow: rgba(0,0,0,0.48);

  --suit-red: #d51f32;
  --suit-black: #070b14;

  --btn-bg: linear-gradient(180deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  --btn-stroke: rgba(55,132,255,0.72);
  --btn-text: #ffffff;
  --btn-shadow: rgba(23,104,230,0.42);

  --slider-track: #101b38;
  --slider-fill: #ffd45a;
  --slider-thumb: #ffe58a;

  --dealer-bg: #ffd45a;
  --dealer-text: #2a1808;

  --bet-pill: rgba(7,14,32,0.92);
  --bet-text: #ffd45a;

  --ptt-live: #ffd45a;
  --ptt-live-glow: rgba(255,212,90,0.58);
}

/* ── Skins change ONLY the table: felt + rim + glow + highlight.
   No --bg, no UI vars — everything else inherits the Classic Blue master. ── */

/* Classic Casino — warm green felt, walnut rim, brass */
.r8-root.skin-casino {
  --felt-1: #1f6b3e;
  --felt-mid: #134a2a;
  --felt-2: #082616;
  --felt-edge: rgba(0,0,0,0.74);
  --felt-lamp: rgba(245,220,150,0.10);
  --rim-outer: #241407;
  --rim-inner: #8a5a2b;
  --rim-glow: rgba(215,155,70,0.22);
  --rim-highlight: rgba(255,205,120,0.24);
}

/* Emerald — cold blue-green felt, glossy emerald rim */
.r8-root.skin-emerald {
  --felt-1: #0f6a45;
  --felt-mid: #0a432e;
  --felt-2: #061b14;
  --felt-edge: rgba(0,0,0,0.76);
  --felt-lamp: rgba(120,255,190,0.10);
  --rim-outer: #061710;
  --rim-inner: #12865d;
  --rim-glow: rgba(35,200,140,0.21);
  --rim-highlight: rgba(120,235,190,0.22);
}

/* Sunset — burgundy felt, copper rim */
.r8-root.skin-sunset {
  --felt-1: #9c4525;
  --felt-mid: #642813;
  --felt-2: #2b0d04;
  --felt-edge: rgba(0,0,0,0.72);
  --felt-lamp: rgba(255,190,100,0.11);
  --rim-outer: #2a0e05;
  --rim-inner: #c76b32;
  --rim-glow: rgba(235,130,60,0.24);
  --rim-highlight: rgba(255,200,120,0.22);
}

/* Carbon — graphite felt, brushed-metal rim */
.r8-root.skin-carbon {
  --felt-1: #2a2d34;
  --felt-mid: #181a20;
  --felt-2: #08090d;
  --felt-edge: rgba(0,0,0,0.80);
  --felt-lamp: rgba(210,225,255,0.08);
  --rim-outer: #090a0d;
  --rim-inner: #5c626d;
  --rim-glow: rgba(160,180,220,0.16);
  --rim-highlight: rgba(220,230,255,0.18);
}

/* Neon Cyber — near-black felt, bright cyan rim + strong glow */
.r8-root.skin-neon {
  --felt-1: #071526;
  --felt-mid: #040c17;
  --felt-2: #02040a;
  --felt-edge: rgba(0,0,0,0.84);
  --felt-lamp: rgba(0,210,235,0.12);
  --rim-outer: #031018;
  --rim-inner: #006d80;
  --rim-glow: rgba(0,200,225,0.34);
  --rim-highlight: rgba(0,225,235,0.30);
}

/* Ember — burnt-red felt, deep copper-red rim, fire glow */
.r8-root.skin-ember {
  --felt-1: #4a160b;
  --felt-mid: #2c0c06;
  --felt-2: #100302;
  --felt-edge: rgba(0,0,0,0.80);
  --felt-lamp: rgba(255,95,35,0.11);
  --rim-outer: #160403;
  --rim-inner: #8c3215;
  --rim-glow: rgba(235,75,25,0.27);
  --rim-highlight: rgba(255,150,80,0.22);
}

/* Gold Luxe — almost-black felt, satin gold rim */
.r8-root.skin-gold {
  --felt-1: #211a0b;
  --felt-mid: #141005;
  --felt-2: #070604;
  --felt-edge: rgba(0,0,0,0.82);
  --felt-lamp: rgba(255,220,140,0.10);
  --rim-outer: #090704;
  --rim-inner: #a8873a;
  --rim-glow: rgba(225,185,95,0.25);
  --rim-highlight: rgba(255,230,150,0.24);
}

/* Forest Night — nearly-black green felt, deep forest rim, minimal glow */
.r8-root.skin-forest {
  --felt-1: #123f26;
  --felt-mid: #0b2716;
  --felt-2: #041008;
  --felt-edge: rgba(0,0,0,0.82);
  --felt-lamp: rgba(160,230,150,0.08);
  --rim-outer: #06100a;
  --rim-inner: #2e6040;
  --rim-glow: rgba(80,150,90,0.16);
  --rim-highlight: rgba(120,210,130,0.16);
}