:root {
  --tg-safe-area-inset-top: 0px;
  --tg-safe-area-inset-bottom: 0px;
  --holdem-safe-area-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top));
  --holdem-safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom));
  --holdem-topbar-padding-top: 10px;
  --holdem-topbar-padding-bottom: 10px;
  --holdem-topbar-control-height: 35px;
  --holdem-topbar-height: calc(var(--holdem-topbar-padding-top) + var(--holdem-topbar-padding-bottom) + var(--holdem-topbar-control-height));
  --holdem-struct-chips-height: 48px;
  --holdem-detail-header-height: 45px;
  --holdem-mobile-android-top-spacer: 20px;
  --holdem-overlay-controls-top-gap: 8px;
  --holdem-overlay-controls-height: 48px;
  --holdem-overlay-content-gap: 16px;
  --holdem-mobile-overlay-reserve: calc(var(--holdem-overlay-controls-top-gap) + var(--holdem-overlay-controls-height) + var(--holdem-overlay-content-gap));
  --holdem-mobile-reserved-safe-top: max(var(--holdem-safe-area-top), var(--holdem-mobile-android-top-spacer));
  --holdem-mobile-top-offset: var(--holdem-mobile-reserved-safe-top);
  --holdem-page-sticky-top: 0px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #050810;
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 80px;
}
.hidden { display: none !important; }

.overflow-marquee-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.overflow-marquee-text__inner {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.overflow-marquee-text.is-overflowing {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 10px,
    #000 calc(100% - 18px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 10px,
    #000 calc(100% - 18px),
    transparent 100%
  );
}

.overflow-marquee-text.is-overflowing .overflow-marquee-text__inner {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  padding-right: 24px;
  animation: overflow-title-slide var(--marquee-duration, 9s) linear infinite;
  animation-delay: 0.9s;
}

@keyframes overflow-title-slide {
  0% { transform: translateX(0); }
  14% { transform: translateX(0); }
  82% { transform: translateX(calc(-1 * var(--marquee-distance, 0px))); }
  100% { transform: translateX(calc(-1 * var(--marquee-distance, 0px))); }
}

@media (prefers-reduced-motion: reduce) {
  .overflow-marquee-text.is-overflowing .overflow-marquee-text__inner {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none;
    animation: none;
  }
}

/* Topbar — GG dark navy */
#topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  min-height: var(--holdem-topbar-height);
  padding: var(--holdem-topbar-padding-top) 14px var(--holdem-topbar-padding-bottom);
  background: linear-gradient(180deg, #0f172a 0%, #0a1322 100%);
  border-bottom: 1px solid #1e293b;
  position: sticky; top: var(--holdem-page-sticky-top); z-index: 10;
}
/* G-3: text-scale toggle in topbar */
.text-scale-toggle {
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 32px;
  letter-spacing: 0.3px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.text-scale-toggle:hover { background: rgba(255,255,255,0.10); color: #cbd5e1; }
body[data-text-scale="lg"] .text-scale-toggle {
  background: rgba(251,191,36,0.18);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.55);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.myinfo-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 9px 5px 6px;
  border: 1px solid rgba(251,191,36,0.34);
  border-radius: 999px;
  background: rgba(251,191,36,0.10);
  color: #fde68a;
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.myinfo-mini-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #475569, #111827);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
}
.myinfo-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#title {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 800; font-size: 15px;
  color: #fde68a; letter-spacing: 0.3px;
}
#balance { font-size: 12px; color: #94a3b8; font-weight: 600; }
#balance b { color: #fbbf24; font-variant-numeric: tabular-nums; margin-left: 4px; }

@media (max-width: 390px) {
  #topbar { gap: 5px; padding-left: 10px; padding-right: 10px; }
  #title { font-size: 13px; }
  #balance { font-size: 11px; }
  .myinfo-top-btn { padding-right: 7px; font-size: 10.5px; }
  .myinfo-mini-avatar { width: 20px; height: 20px; }
}

@media (max-width: 768px) {
  :root {
    --holdem-topbar-padding-top: max(16px, calc(var(--holdem-safe-area-top) + 8px));
  }
  body:not(.holdem-table-active):not(.holdem-cash-table-active) {
    --holdem-page-sticky-top: var(--holdem-mobile-reserved-safe-top);
    --holdem-topbar-padding-top: max(10px, calc(var(--holdem-safe-area-top) + 8px));
    --holdem-topbar-height: calc(var(--holdem-topbar-padding-top) + var(--holdem-topbar-padding-bottom) + var(--holdem-topbar-control-height));
  }
  @supports (top: max(1px, 2px)) {
    body:not(.holdem-table-active):not(.holdem-cash-table-active) {
      --holdem-page-sticky-top: var(--holdem-mobile-top-offset);
    }
  }
  body:not(.holdem-table-active):not(.holdem-cash-table-active) #app::before {
    content: "";
    display: block;
    height: var(--holdem-page-sticky-top);
    flex: 0 0 auto;
  }
  body:not(.holdem-table-active):not(.holdem-cash-table-active) #lobby,
  body:not(.holdem-table-active):not(.holdem-cash-table-active) #detailView {
    min-height: calc(100dvh - var(--holdem-page-sticky-top));
  }
}

/* A-1: Pull-to-refresh indicator — fixed below the topbar, expands height
   as the user drags. JS sets --ptr-pull (px). Hidden when 0px. */
#lobby { position: relative; }
.ptr-indicator {
  position: fixed;
  top: calc(var(--holdem-page-sticky-top) + var(--holdem-topbar-height));          /* just below the topbar — visually attached to its bottom edge */
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  overflow: hidden;
  transition: height 0.18s ease-out;
  background: linear-gradient(180deg, rgba(56,189,248,0.18), rgba(56,189,248,0));
  z-index: 9;
}
.ptr-indicator.is-pulling {
  height: var(--ptr-pull, 0px);
}
.ptr-indicator.is-armed {
  color: #fbbf24;
}
.ptr-indicator.is-refreshing {
  height: 56px;
  color: #fbbf24;
}
.ptr-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
  transition: transform 0.15s ease-out;
}
.ptr-indicator.is-armed .ptr-spinner {
  transform: rotate(180deg);
}
.ptr-indicator.is-refreshing .ptr-spinner {
  animation: ptr-spin 0.9s linear infinite;
}
.ptr-label { margin-bottom: 8px; }
@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Tabs */
.tabs {
  display: flex; gap: 0; padding: 0 6px;
  background: #0a1322;
  border-bottom: 1px solid #1e293b;
}
.tab {
  flex: 1; background: transparent; border: 0; color: #64748b; font-size: 13px;
  padding: 13px 6px; font-weight: 700; cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.2px;
  min-height: 44px;              /* G-1: WCAG primary nav target */
}
.tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
.tab:not(.active):hover { color: #cbd5e1; }

/* Structure-type filter chip row */
.struct-chips {
  display: flex; gap: 6px;
  padding: 8px 8px 4px;
  background: #0a1322;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: calc(var(--holdem-page-sticky-top) + var(--holdem-topbar-height));
  z-index: 9;
}
.struct-chips::-webkit-scrollbar { display: none; }
.struct-chip {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  border: 1px solid #1e293b;
  border-radius: 999px;
  padding: 9px 14px;     /* G-1: 5→9 vertical for ≥36px hit target */
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  min-height: 36px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.struct-chip:hover { background: rgba(255,255,255,0.08); color: #cbd5e1; }
.struct-chip.active {
  background: rgba(251,191,36,0.18);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.55);
}

/* Lobby toolbar (검색 + 정렬) */
.lobby-toolbar {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0a1322;
  border-bottom: 1px solid #1e293b;
  position: sticky;
  top: calc(var(--holdem-page-sticky-top) + var(--holdem-topbar-height) + var(--holdem-struct-chips-height));
  z-index: 9;
  min-width: 0;
}
.lobby-toolbar input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 18px;
  padding: 7px 14px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
}
.lobby-toolbar input::placeholder { color: #64748b; }
.lobby-toolbar input:focus {
  border-color: rgba(251,191,36,0.55);
  background: rgba(255,255,255,0.07);
}
.lobby-toolbar select {
  flex: 0 0 auto;
  max-width: 96px;
  background: rgba(255,255,255,0.04);
  color: #cbd5e1;
  border: 1px solid #1e293b;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11.5px;
  outline: none;
  font-family: inherit;
  font-weight: 600;
}

/* Tournament cards — dense GG row layout */
#tournamentList { padding: 6px 8px 24px; }
.tcard {
  background:
    linear-gradient(180deg, var(--tournament-soft-bg, rgba(255,255,255,0.02)), rgba(13,20,36,0) 45%),
    linear-gradient(180deg, #131c30 0%, #0d1424 100%);
  border: 1px solid var(--tournament-border-color, #1e293b);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
  overflow: hidden;
}
.tcard:active { transform: scale(0.99); }
.tcard:hover {
  border-color: var(--tournament-accent-color, #334155);
  background:
    linear-gradient(180deg, var(--tournament-soft-bg, rgba(255,255,255,0.04)), rgba(15,23,48,0) 48%),
    linear-gradient(180deg, #182240 0%, #0f1730 100%);
}
.tcard.is-mine {
  border-color: rgba(251,191,36,0.55);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,0.18);
}
.tcard.is-playing {
  border-color: rgba(56,189,248,0.45);
}
/* A-5: favorite ★ toggle — top-right corner, suppresses card click */
.tcard-fav {
  position: absolute;
  top: 0;
  right: 0;
  /* G-1: 36×36 hit target with 26px visual circle inset via padding */
  width: 40px;
  height: 40px;
  padding: 7px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: transform 0.12s ease;
}
.tcard-fav::before {
  content: "";
  position: absolute;
  top: 7px; left: 7px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148,163,184,0.18);
  transition: background 0.12s, border-color 0.12s;
}
.tcard-fav svg { position: relative; z-index: 1; }
.tcard-fav:hover::before {
  background: rgba(255,255,255,0.10);
  border-color: rgba(148,163,184,0.40);
}
.tcard-fav:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(148,163,184,0.40);
}
.tcard-fav .tfav-shape {
  fill: transparent;
  stroke: #64748b;
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill 0.18s ease, stroke 0.18s;
}
.tcard-fav.is-on::before {
  background: rgba(251,191,36,0.18);
  border-color: rgba(251,191,36,0.55);
}
.tcard-fav.is-on {
  animation: fav-toggle-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tcard-fav.is-on .tfav-shape {
  fill: #fbbf24;
  stroke: #b45309;
}
@keyframes fav-toggle-pop {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1.0); }
}
.tcard.is-fav { background: linear-gradient(180deg, #1a2548 0%, #0d1424 100%); }

/* Reserve right padding on head row so the favorite button doesn't overlap text */
.tcard .tcard-head { padding-right: 44px; }

/* Left accent bar — color encodes status at a glance */
.tcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tournament-accent-color, #475569);
}
.tcard.s-reg-bar::before     { background: linear-gradient(180deg, #22c55e, #15803d); }
.tcard.s-late-bar::before    { background: linear-gradient(180deg, #f97316, #c2410c); }
.tcard.s-play-bar::before    { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.tcard.s-sched-bar::before   { background: linear-gradient(180deg, #94a3b8, #475569); }
.tcard.s-reg-bar::before,
.tcard.s-late-bar::before,
.tcard.s-play-bar::before,
.tcard.s-sched-bar::before {
  background: linear-gradient(180deg, var(--tournament-accent-color, #facc15), rgba(15, 23, 42, 0.45));
}

/* Row 1 — name + structure badge + status pill */
.tcard-head {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px;
  min-width: 0;
}
.tcard-head h3 {
  margin: 0; font-size: 13.5px; color: var(--tournament-title-color, #fde68a); font-weight: 800;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
.tcard-title-marquee {
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.struct-badge {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(148,163,184,0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148,163,184,0.25);
}
.struct-badge.s-standard    { background: rgba(56,189,248,0.14); color: #7dd3fc; border-color: rgba(56,189,248,0.35); }
.struct-badge.s-turbo       { background: rgba(249,115,22,0.16); color: #fdba74; border-color: rgba(249,115,22,0.35); }
.struct-badge.s-hyper-turbo { background: rgba(244,63,94,0.18);  color: #fda4af; border-color: rgba(244,63,94,0.40); }
.struct-badge.s-deep-stack  { background: rgba(168,85,247,0.16); color: #d8b4fe; border-color: rgba(168,85,247,0.35); }

.private-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  min-height: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(251,191,36,0.15);
  color: #fde68a;
  border: 1px solid rgba(251,191,36,0.42);
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1;
}
.private-badge svg {
  width: 11px;
  height: 11px;
  display: block;
  stroke-width: 2.4;
}
.private-badge span { display: none; }

/* 테더 입금 게이트 안내줄 — 게이트 걸린 토너 카드 하단에만 추가 (기존 레이아웃 불변) */
.tcard-deposit-note {
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px dashed rgba(52,211,153,0.35);
  background: rgba(16,185,129,0.09);
  color: #6ee7b7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.ticket-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,0.42);
  background: rgba(14,165,233,0.14);
  color: #7dd3fc;
  font-size: 9.5px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}
.ticket-badge.is-eligible {
  border-color: rgba(34,211,238,0.62);
  background: rgba(14,165,233,0.22);
  color: #a5f3fc;
}

.trophy-badge {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,0.42);
  background: radial-gradient(circle at 50% 35%, rgba(251,191,36,0.24), rgba(15,23,42,0.78));
  box-shadow: 0 0 10px rgba(251,191,36,0.16);
}
.trophy-badge img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.status-pill {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.4px;
}
.status-pill.s-reg     { background: rgba(34,197,94,0.18); color: #86efac; border: 1px solid rgba(34,197,94,0.40); }
.status-pill.s-late    { background: rgba(249,115,22,0.20); color: #fdba74; border: 1px solid rgba(249,115,22,0.40); }
.status-pill.s-play    { background: rgba(56,189,248,0.20); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.40); }
.status-pill.s-sched   { background: rgba(156,163,175,0.18); color: #cbd5e1; border: 1px solid rgba(156,163,175,0.35); }
.status-pill.s-mine {
  min-width: 32px;
  text-align: center;
  background: linear-gradient(180deg, rgba(251,191,36,0.34), rgba(146,96,12,0.28));
  color: #fde68a;
  border: 1px solid rgba(251,191,36,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 10px rgba(251,191,36,0.12);
}

@media (max-width: 430px) {
  .tcard .tcard-head { padding-right: 42px; }
  .tcard-head { gap: 4px; }
  .status-pill {
    font-size: 9px;
    padding: 2px 6px;
  }
  .status-pill.s-mine {
    min-width: 30px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Row 2 — dense stat row (buy-in · prize · players · level) */
.tcard-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: #94a3b8;
}
.tcard-stats .stat {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.tcard-stats .stat .lbl {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tcard-stats .stat .val {
  font-size: 12px;
  color: #e2e8f0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcard-stats .stat.prize .val { color: #fde68a; }
.tcard-stats .stat.players .val { color: #cbd5e1; }
.tcard-stats .stat.flex { flex: 1 1 auto; min-width: 0; }
.tcard-stats .stat.fixed { flex: 0 0 auto; }

/* Thin progress bar (player capacity) */
.tcard-progress {
  margin-top: 8px;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.tcard-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0284c7);
  transition: width 0.3s ease;
}
.tcard-progress.is-full .fill { background: linear-gradient(90deg, #f97316, #dc2626); }

/* Footer — countdown + secondary info */
.tcard-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}
.tcard-foot-left,
.tcard-foot-right {
  min-width: 0;
  display: inline-flex;
  align-items: center;
}
.tcard-foot-left {
  flex: 1 1 auto;
  gap: 5px;
  justify-content: flex-start;
  overflow: hidden;
}
.tcard-foot-right {
  flex: 0 1 auto;
  justify-content: flex-end;
  text-align: right;
}
.tcard-foot-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcard-bounty {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 19px;
  max-width: 124px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(248,113,113,0.42);
  background: rgba(127,29,29,0.24);
  color: #fecaca;
  font-weight: 900;
  line-height: 1;
}
.tcard-bounty-label {
  color: #fca5a5;
  font-size: 9px;
}
.tcard-bounty-val {
  min-width: 0;
  color: #fff1f2;
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcard-foot .countdown {
  color: #fbbf24;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.tcard-foot .countdown.start-display {
  display: inline-block;
  max-width: 100%;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
  word-break: keep-all;
}
.tcard-foot .countdown.urgent {
  color: #fca5a5;
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.40);
  padding: 1px 7px;
  border-radius: 999px;
  animation: late-reg-urgent 0.7s ease-in-out infinite alternate;
  text-shadow: 0 0 8px rgba(248,113,113,0.45);
  letter-spacing: 0.3px;
}
@keyframes late-reg-urgent {
  from { transform: scale(1);    opacity: 0.85; box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
  to   { transform: scale(1.04); opacity: 1.0;  box-shadow: 0 0 14px 2px rgba(239,68,68,0.35); }
}
.tcard-foot .countdown.is-closed {
  color: #94a3b8;
  font-weight: 700;
  background: rgba(148,163,184,0.10);
  border: 1px solid rgba(148,163,184,0.20);
  padding: 1px 7px;
  border-radius: 999px;
}

.tcard .actions { display: flex; gap: 8px; margin-top: 10px; }
.tcard button {
  flex: 1; padding: 10px; border-radius: 6px; border: 0; font-weight: 700;
  cursor: pointer; font-size: 13px;
}
.btn-primary {
  background: linear-gradient(180deg, #facc15, #ca8a04);
  color: #1f2937;
}
.btn-secondary { background: #334155; color: #e2e8f0; }
.btn-danger { background: #b91c1c; color: #fff; }
.btn-primary:disabled { background: #334155; color: #64748b; }

.empty { padding: 40px 20px; text-align: center; color: #475569; font-size: 13px; }

/* ─── F-3: Standard error card (reusable for any load-failure host) ─── */
.error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 20px 32px;
  text-align: center;
  background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02));
  border: 1px solid rgba(239,68,68,0.30);
  border-radius: 12px;
  color: #cbd5e1;
  margin: 8px 0;
}
.error-card .err-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(239,68,68,0.12);
  color: #fca5a5;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.error-card .err-headline {
  font-size: 14px;
  font-weight: 800;
  color: #fca5a5;
  letter-spacing: 0.2px;
}
.error-card .err-sub {
  font-size: 12px;
  color: #94a3b8;
  max-width: 280px;
  line-height: 1.5;
}
.error-card .err-retry {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  color: #fff;
  border: 0;
  padding: 9px 22px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: transform 0.08s ease;
}
.error-card .err-retry:active { transform: scale(0.97); }

/* ─── Lobby empty state — SVG illustration + headline + sub ─── */
.empty-illust {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 40px;
  text-align: center;
  gap: 14px;
  color: #64748b;
}
.empty-illust .ei-art {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(251,191,36,0.10), rgba(0,0,0,0) 70%);
}
.empty-illust .ei-art svg { width: 72px; height: 72px; }
.empty-illust .ei-headline {
  color: #cbd5e1; font-size: 14px; font-weight: 700; letter-spacing: 0.2px;
}
.empty-illust .ei-sub {
  color: #64748b; font-size: 12px; line-height: 1.5; max-width: 280px;
}

/* Lobby-only fixed chrome: keep the title/tabs/filters stationary and let
   only the tournament list consume vertical scroll, including iOS WebView
   rubber-band edge cases. */
body.holdem-lobby-active {
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: #050810;
}

body.holdem-lobby-active #app {
  height: var(--app-height, 100dvh);
  min-height: 0;
  max-height: var(--app-height, 100dvh);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}

body.holdem-lobby-active #topbar {
  position: relative;
  top: auto;
  flex: 0 0 auto;
  z-index: 30;
}

body.holdem-lobby-active #modeSwitch,
body.holdem-cash-lobby-active #modeSwitch {
  flex: 0 0 auto;
}

body.holdem-lobby-active #lobby {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  background: #050810;
}

body.holdem-lobby-active #lobby > .tabs,
body.holdem-lobby-active #lobby > .struct-chips,
body.holdem-lobby-active #lobby > .lobby-toolbar {
  position: relative;
  top: auto;
  flex: 0 0 auto;
  z-index: 25;
}

.tournament-list-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(96px + var(--holdem-safe-area-bottom));
  background: #050810;
}

.tournament-list-scroll-area #tournamentList {
  min-height: 0;
}

.tournament-list-scroll-area #lobbyEmpty.empty-illust {
  min-height: 100%;
}

@supports (height: 100svh) {
  body.holdem-lobby-active,
  body.holdem-lobby-active #app {
    height: var(--app-height, 100svh);
    max-height: var(--app-height, 100svh);
  }
}

body.holdem-cash-lobby-active {
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: #050810;
}

body.holdem-cash-lobby-active #app {
  height: var(--app-height, 100dvh);
  min-height: 0;
  max-height: var(--app-height, 100dvh);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}

body.holdem-cash-lobby-active #topbar {
  position: relative;
  top: auto;
  flex: 0 0 auto;
  z-index: 30;
}

body.holdem-cash-lobby-active #cashLobby {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(30px + var(--holdem-safe-area-bottom));
}

body.holdem-cash-lobby-active .cash-table-list {
  padding-bottom: calc(18px + var(--holdem-safe-area-bottom));
}

@supports (height: 100svh) {
  body.holdem-cash-lobby-active,
  body.holdem-cash-lobby-active #app {
    height: var(--app-height, 100svh);
    max-height: var(--app-height, 100svh);
  }
}

/* 상세 화면 고정 크롬 — 로비 fix의 미러. #detailBody(스트럭처/상금/참가자/
   테이블/핸드 공통 컨테이너)를 스크롤 영역으로 만들어 표가 #topbar·#detailHeader
   아래로 클리핑되게 한다. 5탭 모두 #detailBody 안이라 한 번에 적용됨. */
body.holdem-detail-active {
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: #050810;
}
body.holdem-detail-active #app {
  height: var(--app-height, 100dvh);
  min-height: 0;
  max-height: var(--app-height, 100dvh);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}
body.holdem-detail-active #topbar {
  position: relative;
  top: auto;
  flex: 0 0 auto;
  z-index: 30;
}
body.holdem-detail-active #detailView {
  flex: 1 1 auto;
  min-height: 0;
  height: auto; /* 모바일 min-height: calc(100dvh - 92px) (style.css 모바일 블록) 중화 — 로비 #lobby height:auto 와 동일 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  background: #050810;
}
body.holdem-detail-active #detailHeader {
  position: relative; /* 페이지 sticky 해제 */
  top: auto;
  flex: 0 0 auto;
  z-index: 30;
}
body.holdem-detail-active #detailBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(76px + var(--holdem-safe-area-bottom));
  background: #050810;
}
body.holdem-detail-active #detailTabs.detail-tabs {
  top: 0; /* 페이지 스크롤 기준 top 계산 override — 새 스크롤 컨테이너 상단에 pin */
  z-index: 25;
}
@supports (height: 100svh) {
  body.holdem-detail-active,
  body.holdem-detail-active #app {
    height: var(--app-height, 100svh);
    max-height: var(--app-height, 100svh);
  }
}

/* ─── Lobby loading skeletons (shimmer placeholder cards) ─── */
.tcard-skel {
  background: linear-gradient(180deg, #131c30 0%, #0d1424 100%);
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.tcard-skel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #334155;
}
.tcard-skel .sk-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.tcard-skel .sk-bar {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  height: 12px;
}
.tcard-skel .sk-bar.sk-title { flex: 1; height: 14px; }
.tcard-skel .sk-bar.sk-pill  { width: 48px; height: 16px; border-radius: 999px; flex-shrink: 0; }
.tcard-skel .sk-bar.sk-stat  { flex: 1; height: 18px; }
.tcard-skel .sk-bar.sk-prog  { height: 3px; margin-top: 8px; }
.tcard-skel .sk-stats { display: flex; gap: 10px; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── WS disconnect banner (C-8) ─── */
.ws-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(245,158,11,0.95), rgba(217,119,6,0.95));
  color: #1f1305;
  font-size: 12.5px;
  font-weight: 700;
  border-bottom: 1px solid rgba(180,83,9,0.6);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  animation: ws-banner-in 0.18s ease-out;
}
.ws-banner .ws-icon { font-size: 14px; }
.ws-banner .ws-msg  { flex: 1; min-width: 0; }
.ws-banner .ws-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #1f1305;
  background: rgba(255,255,255,0.45);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11.5px;
  letter-spacing: 0.5px;
}
.ws-banner .ws-retry {
  background: #1f1305;
  color: #fde68a;
  border: 0;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.ws-banner .ws-retry:hover { background: #422006; }
.ws-banner.is-reconnecting {
  background: linear-gradient(180deg, rgba(56,189,248,0.95), rgba(14,165,233,0.95));
  color: #fff;
}
.ws-banner.is-reconnecting .ws-countdown {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.ws-banner.is-reconnecting .ws-retry { display: none; }
@keyframes ws-banner-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Level-up interstitial — full-screen LEVEL N + new blinds ─── */
.level-up-interstitial {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.85), rgba(0,0,0,0.95));
  backdrop-filter: blur(4px);
  pointer-events: none;
  animation: lu-fade-out 1400ms ease-in forwards;
}
.level-up-interstitial.hidden { display: none; }
.lu-card {
  text-align: center;
  padding: 24px 32px;
  background: linear-gradient(160deg, #142042 0%, #0a1322 60%, #050810 100%);
  border: 1px solid rgba(56,189,248,0.55);
  border-radius: 14px;
  box-shadow: 0 0 60px rgba(56,189,248,0.35), 0 0 100px rgba(56,189,248,0.15);
  animation: lu-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lu-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #38bdf8;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lu-num {
  font-size: 64px;
  font-weight: 900;
  color: #fde68a;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 0 20px rgba(251,191,36,0.6);
  margin-bottom: 8px;
}
.lu-blinds {
  font-size: 24px;
  font-weight: 800;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.lu-ante {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(148,163,184,0.14);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: 0.3px;
}
@keyframes lu-pop {
  0%   { opacity: 0; transform: scale(0.65) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes lu-fade-out {
  0%, 78% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ─── Bubble alert — one-shot full-screen "한 명 남으면 상금권" warning ─── */
.bubble-alert {
  position: fixed;
  inset: 0;
  z-index: 9996;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.88), rgba(0,0,0,0.96));
  backdrop-filter: blur(4px);
  pointer-events: none;
  animation: bubble-fade-out 2400ms ease-in forwards;
}
.bubble-alert.hidden { display: none; }
.bubble-card {
  text-align: center;
  padding: 28px 32px;
  background: linear-gradient(160deg, #1f1438 0%, #142042 50%, #050810 100%);
  border: 1px solid rgba(168,85,247,0.55);
  border-radius: 14px;
  box-shadow: 0 0 60px rgba(168,85,247,0.30), 0 0 100px rgba(168,85,247,0.12);
  animation: bubble-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bubble-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 6px;
  animation: bubble-float 1.6s ease-in-out infinite alternate;
}
.bubble-title {
  font-size: 28px;
  font-weight: 900;
  color: #d8b4fe;
  letter-spacing: 6px;
  margin-bottom: 6px;
  text-shadow: 0 0 16px rgba(168,85,247,0.55);
}
.bubble-sub {
  font-size: 13px;
  color: #cbd5e1;
  font-weight: 600;
  margin-bottom: 10px;
}
.bubble-stats {
  font-size: 14px;
  font-weight: 800;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
}
@keyframes bubble-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bubble-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
@keyframes bubble-fade-out {
  0%, 88% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ─── Table rebalance interstitial — covers the seat-vanish moment ─── */
.rebalance-interstitial {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,8,16,0.92);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.rebalance-interstitial.hidden { display: none; }
.rb-card {
  text-align: center;
  padding: 22px 26px;
  background: linear-gradient(160deg, #142042 0%, #0a1322 100%);
  border: 1px solid rgba(56,189,248,0.40);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: rb-pop 0.3s ease-out;
}
.rb-spinner {
  color: #7dd3fc;
  animation: rb-spin 0.9s linear infinite;
}
.rb-title {
  font-size: 14px;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: 0.4px;
}
.rb-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
@keyframes rb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rb-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── All-in screen flash (C-6) — edge glow + center stamp ─── */
.allin-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.allin-edge {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 80px 12px rgba(239,68,68,0.65),
    inset 0 0 22px 4px rgba(248,113,113,0.85);
  border: 2px solid rgba(239,68,68,0.85);
  animation: allin-edge 1200ms ease-out forwards;
}
.allin-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: max-content;
  max-width: calc(100vw - 28px);
  font-size: clamp(42px, 15vw, 64px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: clamp(2px, 1.4vw, 6px);
  white-space: nowrap;
  text-align: center;
  color: #fff5f5;
  text-shadow:
    0 0 14px rgba(239,68,68,1),
    0 0 28px rgba(239,68,68,0.85),
    0 0 50px rgba(239,68,68,0.55);
  animation: allin-text 1200ms cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
  opacity: 0;
}
@keyframes allin-edge {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes allin-text {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); letter-spacing: 0px; }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); letter-spacing: 8px; }
  62%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); letter-spacing: 6px; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); letter-spacing: 6px; }
}

/* ─── Toast notifications (top-right slide-in stack) ─── */
.toast-container {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(440px, calc(100vw - 24px));
}
.toast {
  pointer-events: auto;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 1px solid #334155;
  border-left: 3px solid #64748b;
  color: #e2e8f0;
  padding: 10px 14px 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02) inset;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  animation: toast-in 0.18s ease-out;
  word-break: keep-all;
}
.toast.toast-success { border-left-color: #22c55e; }
.toast.toast-success .toast-icon { color: #86efac; }
.toast.toast-error   { border-left-color: #ef4444; }
.toast.toast-error   .toast-icon { color: #fca5a5; }
.toast.toast-info    { border-left-color: #38bdf8; }
.toast.toast-info    .toast-icon { color: #7dd3fc; }
.toast.toast-warn    { border-left-color: #f59e0b; }
.toast.toast-warn .toast-icon { color: #fcd34d; }
.toast-icon {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  margin-top: 2px;
}
.toast-msg { flex: 1; min-width: 0; }
.toast-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}
.toast-body { color: #e2e8f0; font-weight: 600; word-break: break-word; }
.toast.toast-chat {
  border-left-color: #a855f7;
  background: linear-gradient(180deg, rgba(31,20,56,0.92), rgba(15,10,31,0.92));
  border-color: rgba(168,85,247,0.45);
}
.toast.toast-chat .toast-icon { color: #d8b4fe; }
.toast.toast-chat .toast-title { color: #d8b4fe; }
/* v88: 채팅 티커 — "닉네임  내용" 한 줄 컴팩트로 상단을 스쳐간다.
   게임 정보를 가리는 면적을 최소화 (일반 토스트보다 얇고 반투명). */
.toast.toast-chat {
  padding: 6px 12px 6px 10px;
  font-size: 12px;
  align-items: center;
}
.toast.toast-chat .toast-icon {
  font-size: 13px;
  margin-top: 0;
}
.toast.toast-chat .toast-msg {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.toast.toast-chat .toast-title {
  margin-bottom: 0;
  flex-shrink: 0;
  white-space: nowrap;
}
.toast.toast-chat .toast-body {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.toast.is-leaving {
  animation: toast-out 0.16s ease-in forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* Table view */
/* ─── GG-style Table View ──────────────────────────────────────────────── */

/* Top tournament info bar */
.gg-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #0f172a 0%, #0a1322 100%);
  border-bottom: 1px solid #1e293b;
  font-size: 11px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 11;
  flex-wrap: nowrap;
  overflow: hidden;
}
/* Stats scroll horizontally inside this lane when the row is too wide. */
.gg-topbar-scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gg-topbar-scroll::-webkit-scrollbar { display: none; }
/* Action buttons (P / 🔊 / 관전 / 탈출) — pinned to the right, never
   scrolled or pushed off-screen no matter how wide the stats are. */
.gg-topbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.gg-topbar .back-btn {
  background: #334155;
  color: #cbd5e1;
  border: 0;
  padding: 8px 12px;             /* G-1: 4→8 vertical, ≥34px hit */
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  flex: 0 0 auto;
  min-height: 34px;
  min-width: 34px;
}
.gg-topbar-left, .gg-topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.gg-topbar .gg-lvl {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.gg-topbar .gg-blinds { color: #e2e8f0; font-weight: 700; }
.gg-topbar .gg-stat { color: #94a3b8; font-size: 10px; }
.gg-topbar .gg-stat strong { color: #cbd5e1; font-weight: 700; margin-left: 1px; }
.gg-topbar .gg-sep { color: #475569; }
.gg-topbar .gg-ante { color: #94a3b8; }
.gg-topbar .gg-ante::before { content: "앤티 "; color: #94a3b8; }
.gg-topbar .lvl-countdown {
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}
.gg-topbar .lvl-countdown.is-warn { color: #f59e0b; font-weight: 700; }
.gg-topbar .gg-hand-pill {
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.gg-topbar .spectator-badge {
  background: #7c2d12;
  color: #fed7aa;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.gg-topbar .chip-mode-toggle {
  background: #334155;
  color: #fbbf24;
  border: 1px solid #475569;
  border-radius: 6px;
  padding: 7px 10px;             /* G-1: 2→7 vertical, ≥32px hit */
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
  min-height: 32px;
  min-width: 32px;
}
.gg-topbar .gg-pot-mini { display: none; }  /* legacy element kept for JS compat, hidden */

.table-snapshot-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px 8px;
  background: rgba(5,8,16,0.86);
  border-bottom: 1px solid rgba(148,163,184,0.12);
}
.table-snapshot-bar.hidden { display: none !important; }
.tsb-item {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 7px;
  background: rgba(15,23,42,0.78);
}
.tsb-item span {
  display: block;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsb-item strong {
  display: block;
  margin-top: 2px;
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsb-item.is-good strong { color: #86efac; }
.tsb-item.is-warn strong { color: #fcd34d; }
.tsb-item.is-danger strong { color: #fca5a5; }

/* Mis-tap guard: when the action panel first appears (my turn just started)
   the buttons are visually present but inert for ~450ms — a tap aimed at the
   previous screen state can't land as an accidental fold/check. */
#actionButtons.arming {
  pointer-events: none;
  opacity: 0.45;
}

/* Result presentation: while a hand result is on screen, enlarge the board
   and the revealed hole cards so players can clearly read who won with what.
   Cleared when the next hand is dealt (app.js renderTable / handleHandOver). */
#felt.result-mode #community {
  transform: translate(-50%, -50%) scale(1.3);
  transition: transform 0.25s ease;
}
#felt.result-mode .seat .holes {
  transform: translateX(-50%) scale(1.35);
  transition: transform 0.25s ease;
}

.hand-result-modal {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 282px);
  transform: translateX(-50%);
  width: min(328px, calc(100vw - 34px));
  z-index: 1150;
  pointer-events: none;
}
.hand-result-card {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(5,8,16,0.98));
  border: 1px solid rgba(251,191,36,0.55);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 22px rgba(251,191,36,0.12);
  overflow: hidden;
  animation: handResultIn 0.18s ease-out;
}
.hand-result-title {
  padding: 6px 10px;
  background: rgba(251,191,36,0.13);
  border-bottom: 1px solid rgba(251,191,36,0.25);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.hand-result-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.hand-result-row {
  display: grid;
  grid-template-columns: minmax(62px, 1fr) minmax(88px, 1.2fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}
.hand-result-row.is-hero {
  border-color: rgba(59,130,246,0.55);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.25);
}
.hand-result-name,
.hand-result-hand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hand-result-name {
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 800;
}
.hand-result-hand {
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
}
.hand-result-prize {
  color: #fbbf24;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.hand-result-cards {
  grid-column: 1 / -1;
  display: flex;
  gap: 5px;
  align-items: center;
  overflow-x: auto;
  padding-top: 2px;
}
.hand-result-cards .tiny-card,
.rabbit-cards .tiny-card {
  min-width: 24px;
  height: 34px;
  border-radius: 5px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.rabbit-result {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.rabbit-toggle {
  min-height: 34px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,0.55);
  background: rgba(251,191,36,0.14);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.rabbit-cards {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
}
@keyframes handResultIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Felt — dark navy radial gradient with gold rim */
#felt {
  position: relative;
  margin: 0;
  height: calc(100vh - 240px);
  min-height: 380px;
  max-height: 560px;
  background:
    radial-gradient(ellipse 88% 50% at 50% 45%, #1c4068 0%, #0f2542 35%, #0a1828 65%, #050d1a 100%);
  overflow: hidden;
}
#felt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 45%, transparent 50%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
#felt::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 3%;
  right: 3%;
  bottom: 26%;
  border: 2px solid rgba(251, 191, 36, 0.18);
  border-radius: 50% / 42%;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.55),
    0 4px 24px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* Community cards: positioned absolute in middle of felt */
#community {
  position: absolute;
  /* Board is slightly above center so the pot and hero cards have separate
     vertical lanes on Galaxy/iPhone webviews. */
  top: var(--holdem-board-top, 43%);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
  /* Board must always be visible — sits above seats (z-index:4), dealer
     button (z-index:6), and #seats container (z-index:3). The 5th community
     card was disappearing behind the upper-right seat on 6max because seats
     stacked above community by default. */
  z-index: 7;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}
#community .card {
  width: 36px; height: 50px;
}
#community .card.empty,
#community .card.placeholder {
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  box-shadow: none;
}
#community.rabbit-board::before {
  content: "레빗";
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,0.5);
  background: rgba(8,13,24,0.78);
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
#community .card.rabbit-card {
  border-color: rgba(56,189,248,0.82);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.35), 0 0 16px rgba(56,189,248,0.45);
  transform: translateY(-2px);
}

/* Pot display centered below community */
#potDisplay {
  position: absolute;
  top: calc(var(--holdem-board-top, 43%) + var(--holdem-pot-gap, 41px));
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  /* Stay above seats so the pot number is never hidden by a seat's card or
     name pill that drifts into the felt center. */
  z-index: 10;
  min-width: 62px;
  padding: 2px 7px 3px;
  border-radius: 999px;
  background: rgba(5,8,16,0.52);
  box-shadow: 0 3px 10px rgba(0,0,0,0.32);
  pointer-events: none;
}
#potDisplay .pot-tag {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
#potDisplay .pot-amount {
  color: #fbbf24;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  letter-spacing: 0.5px;
}
#potDisplay .pot-breakdown {
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
}
#potDisplay .pot-breakdown .side { color: #f59e0b; }

/* CSS-only playing cards (4-color deck) */
.card {
  width: 36px;
  height: 50px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue", "SF Pro Display", system-ui, sans-serif;
  font-weight: 900;
  overflow: hidden;
}
.card .rank { font-size: 14px; line-height: 1; letter-spacing: -1px; }
.card .suit { font-size: 16px; line-height: 1; margin-top: 1px; }
.card.spade { color: #1a1a1a; }
.card.heart { color: #dc2626; }
.card.diamond { color: #2563eb; }   /* 4-color: blue */
.card.club { color: #16a34a; }       /* 4-color: green */
body[data-four-color="off"] .card.diamond { color: #dc2626; }
body[data-four-color="off"] .card.club { color: #1a1a1a; }
.card.back, .card.hidden-card {
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 50%, #7f1d1d 100%);
  border: 1.5px solid #fef3c7;
}
.card.back::before, .card.hidden-card::before {
  content: "";
  position: absolute;
  inset: 3px;
  background-image:
    repeating-linear-gradient(45deg, rgba(254,243,199,0.25) 0 2px, transparent 2px 4px);
  border-radius: 2px;
}

/* 폴드 후 hero 카드: 카드백으로 덮어두고 hover/active 시 잠깐 노출.
   .holes.is-folded-reveal 안의 face-up .card 위에 ::after 로 카드백 패턴을
   얹는다. 모바일은 :active(탭 누름), 데스크탑은 :hover. */
.holes.is-folded-reveal { cursor: pointer; }
.holes.is-folded-reveal .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(254,243,199,0.25) 0 2px, transparent 2px 4px),
    linear-gradient(135deg, #7f1d1d 0%, #b91c1c 50%, #7f1d1d 100%);
  border: 1.5px solid #fef3c7;
  border-radius: inherit;
  transition: opacity 0.18s ease;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
}
.holes.is-folded-reveal:hover .card::after,
.holes.is-folded-reveal:active .card::after,
.holes.is-folded-reveal:focus-within .card::after {
  opacity: 0;
}
.card.large {
  width: 56px; height: 78px;
  border-radius: 6px;
}
.card.large .rank { font-size: 24px; }
.card.large .suit { font-size: 28px; }
body[data-card-size="lg"] .card { width: 40px; height: 56px; }
body[data-card-size="lg"] .card .rank { font-size: 15px; }
body[data-card-size="lg"] .card .suit { font-size: 18px; }
body[data-card-size="lg"] .card.large { width: 62px; height: 86px; }
body[data-card-size="lg"] .card.large .rank { font-size: 26px; }
body[data-card-size="lg"] .card.large .suit { font-size: 31px; }
.card.small {
  width: 22px; height: 30px;
  border-radius: 3px;
}
.card.small .rank { font-size: 10px; line-height: 1; }
.card.small .suit { font-size: 11px; line-height: 1; margin-top: 0; }

/* Seats arranged absolutely in arc above felt */
#seats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.seat {
  position: absolute;
  width: 60px;
  text-align: center;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  /* Explicit z-index so every seat sits in the same plane — without this,
     transform-created stacking contexts fell back to DOM order (seat 1 first,
     seat N last), which let the right-side seat overlap left-side seats on a
     6-max table. Combined with the new .holes z-index below, hole cards are
     always visible regardless of seat coordinate. */
  z-index: 4;
}
.seat .avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto;
}
button.avatar-wrap {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
button.avatar-wrap:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.9);
  outline-offset: 3px;
}
.seat .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
  border: 2px solid #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #cbd5e1;
  position: relative;
  overflow: hidden;
}
.seat .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seat .name-pill {
  margin-top: 6px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 2px 4px;
  backdrop-filter: blur(4px);
}
.seat .name {
  font-size: 10px;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat .chips {
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1.2;
}
.seat .note-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
}
.player-note-btn {
  min-width: 24px;
  min-height: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.32);
  background: rgba(15,23,42,0.9);
  color: #94a3b8;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1.2;
}
.player-note-btn.has-note {
  border-color: rgba(251,191,36,0.55);
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
}
.player-note-tag {
  max-width: 44px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(56,189,248,0.14);
  border: 1px solid rgba(56,189,248,0.32);
  color: #7dd3fc;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat .holes {
  position: absolute;
  /* Pushed higher so the cards don't sit inside a neighboring seat's clickable
     box on 6max / 8max tables where seats arc close together. */
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  /* z-index:3 inside the seat's stacking context so hole cards are guaranteed
     to render above the seat's own avatar / name pill (z-index:2). Cross-seat
     ordering is handled by .seat { z-index:4 } above. */
  z-index: 3;
}
.seat .holes .card { width: 20px; height: 27px; border-radius: 3px; }
.seat .holes .card .rank { font-size: 8px; }
.seat .holes .card .suit { font-size: 9px; margin-top: 0; }
.seat .avatar-wrap { z-index: 2; }
.seat .name-pill { z-index: 2; position: relative; }
.seat .commit {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(251,191,36,0.45);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.seat.folded { opacity: 0.45; }
.seat .fold-mark {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(248,113,113,0.55);
  background: rgba(69,10,10,0.82);
  color: #fecaca;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  white-space: nowrap;
  z-index: 4;
}
.seat.folded .commit {
  bottom: -34px;
}
.seat.empty { display: none; }

/* ─── Bust ghost: opponent seat fades to grayscale + OUT stamp before being removed ─── */
#seatGhosts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
#seatGhosts .seat-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  animation: bust-ghost 1500ms ease-out forwards;
  filter: grayscale(0.95) brightness(0.65);
}
#seatGhosts .seat-ghost::after {
  content: "OUT";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fca5a5;
  background: rgba(15,23,42,0.85);
  padding: 4px 10px;
  border: 2px solid #ef4444;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 10;
  animation: bust-stamp 220ms ease-out;
}
@keyframes bust-ghost {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
}
@keyframes bust-stamp {
  0%   { transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); opacity: 0; }
  60%  { transform: translate(-50%, -50%) rotate(-12deg) scale(0.92); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; }
}

/* Active seat (current to act) — cyan glow */
.seat.toact .avatar {
  border-color: #06b6d4;
  box-shadow: 0 0 18px rgba(6,182,212,0.7), 0 0 4px rgba(6,182,212,0.4) inset;
  animation: toactPulse 1.4s ease-in-out infinite;
}
@keyframes toactPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(6,182,212,0.7), 0 0 4px rgba(6,182,212,0.4) inset; }
  50%      { box-shadow: 0 0 26px rgba(6,182,212,1.0), 0 0 6px rgba(6,182,212,0.6) inset; }
}
.seat .toact-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #06b6d4, #0e7490);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 4;
  white-space: nowrap;
}

/* Urgency escalation. tickActionCountdown toggles .is-warn (6-15s) and
   .is-danger (≤5s) on every .toact-badge so muted observers also see the
   timer collapse, not only the hero. */
@keyframes toactBadgeBlink {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.45; transform: translateX(-50%) scale(1.06); }
}
.seat .toact-badge.is-warn {
  background: linear-gradient(180deg, #facc15, #b45309);
  animation: toactBadgeBlink 0.75s ease-in-out infinite;
}
.seat .toact-badge.is-danger {
  background: linear-gradient(180deg, #ef4444, #7f1d1d);
  animation: toactBadgeBlink 0.35s ease-in-out infinite;
}

/* Full-screen red vignette pulse for the hero's last-5s window. Driven by
   tickActionCountdown adding .is-active when isMyTurnCountdown && ≤5s, so
   users who muted the tab still get a strong visual prompt. pointer-events:
   none keeps every action button tappable underneath. */
.screen-urgent-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  box-shadow: inset 0 0 0 0 rgba(239,68,68,0);
  opacity: 0;
  transition: opacity 120ms linear;
}
.screen-urgent-overlay.is-active {
  opacity: 1;
  animation: screenUrgentBlink 0.55s ease-in-out infinite;
}
@keyframes screenUrgentBlink {
  0%, 100% { box-shadow: inset 0 0 60px 0px rgba(239,68,68,0.0); }
  50%      { box-shadow: inset 0 0 120px 18px rgba(239,68,68,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .seat .toact-badge.is-warn,
  .seat .toact-badge.is-danger { animation: none; }
  .screen-urgent-overlay.is-active {
    animation: none;
    box-shadow: inset 0 0 100px 14px rgba(239,68,68,0.45);
  }
}

/* Dealer marker — Phase A-7 replaces this with a floating #dealerBtn element
   that transitions smoothly between seats. The pseudo-element approach is
   intentionally suppressed (left as no-op for compat with stale CSS caches). */
.seat.dealer .avatar-wrap::after { content: none; }

/* Hero seat (you) — bottom of felt, larger */
#hero {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 8;
}
#hero .holes {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.hero-hand-strength {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(280px, calc(100vw - 28px));
  min-height: 24px;
  margin: 0 auto 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,0.45);
  background: rgba(5,8,16,0.82);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
#hero .hero-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(0,0,0,0.7) 100%);
  border: 1.5px solid #fbbf24;
  padding: 5px 14px;
  border-radius: 24px;
  box-shadow: 0 0 24px rgba(251,191,36,0.3);
  backdrop-filter: blur(6px);
  position: relative;
}
#hero .hero-info .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#hero .hero-info .avatar img { width: 100%; height: 100%; object-fit: cover; }
#hero .hero-info .name {
  font-size: 12px;
  font-weight: 800;
  color: #fef3c7;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#hero .hero-info .chips {
  font-size: 14px;
  font-weight: 900;
  color: #fbbf24;
}
#hero .commit {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  min-width: 64px;
  background: rgba(0,0,0,0.85);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid rgba(251,191,36,0.5);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
#hero.toact .hero-info {
  border-color: #06b6d4;
  box-shadow: 0 0 26px rgba(6,182,212,0.5);
  animation: heroToactPulse 1.4s ease-in-out infinite;
}
@keyframes heroToactPulse {
  0%, 100% { box-shadow: 0 0 26px rgba(6,182,212,0.5); }
  50%      { box-shadow: 0 0 36px rgba(6,182,212,0.85); }
}

/* Action panel — GG color-coded */
#actionPanel {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  background: linear-gradient(180deg, #0f172a 0%, #050810 100%);
  border-top: 1px solid #1e293b;
  padding: 5px 8px calc(7px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 12;
}
#myStatus { text-align: center; font-size: 10px; color: #cbd5e1; }
.action-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 27px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid rgba(56,189,248,0.36);
  background: linear-gradient(180deg, rgba(14,165,233,0.18), rgba(15,23,42,0.78));
  color: #e0f2fe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.action-hint strong {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 950;
  color: #7dd3fc;
}
.action-hint span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: 11px;
  font-weight: 850;
  color: #fef3c7;
  font-variant-numeric: tabular-nums;
}

#actionButtons {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.1fr;
  gap: 5px;
}
#actionButtons button {
  min-height: 48px;
  padding: 8px 0;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: transform 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#actionButtons button:active { transform: scale(0.97); }
#actionButtons button .ab-label { display: block; font-size: 10px; opacity: 0.9; }
#actionButtons button .ab-amount { display: block; font-size: 12px; margin-top: 0; }
#actionButtons button .ab-label,
#actionButtons button .ab-amount {
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  hyphens: none;
}
#actionButtons button.is-allin {
  flex-direction: row;
  gap: 6px;
}
#actionButtons button.is-allin .ab-label,
#actionButtons button.is-allin .ab-amount {
  display: inline;
  margin-top: 0;
}
#btnFold.ab-fold {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
}
#btnFold.confirming {
  outline: 2px solid rgba(252,211,77,0.92);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.22), 0 0 18px rgba(245,158,11,0.36);
  animation: foldConfirmPulse 0.75s ease-in-out infinite alternate;
}
#btnFold.confirming .ab-label,
#btnFold.confirming .ab-amount {
  color: #fef3c7;
}
@keyframes foldConfirmPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.22); }
}
#btnCheckCall.ab-call {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
}
#btnCheckCall.ab-check {
  background: linear-gradient(180deg, #06b6d4 0%, #0e7490 100%);
}
#btnRaise.ab-raise {
  background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%);
  color: #1f2937;
}
#btnRaise.ab-raise .ab-label,
#btnRaise.ab-raise .ab-amount { color: #1f2937; }

/* Quick-bet chip row */
#quickBets {
  display: flex;
  gap: 3px;
}
#quickBets button {
  flex: 1;
  padding: 4px 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid #334155;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
#quickBets button:hover, #quickBets button:active {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border-color: #fbbf24;
}

/* Slider row with +/- and value display */
.bet-amount-preview {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(251,191,36,0.38);
  background: linear-gradient(180deg, rgba(251,191,36,0.16), rgba(15,23,42,0.76));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.bet-preview-label {
  color: #fef3c7;
  font-size: 10px;
  font-weight: 900;
}
.bet-amount-preview strong {
  min-width: 0;
  color: #fbbf24;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(251,191,36,0.28);
}
.slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.slider-row .step-btn {
  width: 24px; height: 24px;
  background: #334155;
  border: 0;
  color: #fbbf24;
  font-weight: 900;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  flex: 0 0 auto;
}
.manual-bet-btn {
  width: 28px;
  height: 26px;
  background: #1e293b;
  border: 1px solid #475569;
  color: #fbbf24;
  font-weight: 900;
  border-radius: 7px;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.manual-bet-btn:active {
  transform: scale(0.96);
}
#raiseSlider input[type="range"] {
  flex: 1;
  height: 3px;
  background: #1e293b;
  border-radius: 2px;
  appearance: none;
  cursor: pointer;
}
#raiseSlider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px; height: 15px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
  cursor: pointer;
}
#raiseSlider input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  background: #fbbf24;
  border-radius: 50%;
  border: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
  cursor: pointer;
}
.bet-value {
  display: none;
  min-width: 54px;
  text-align: right;
  color: #fbbf24;
  font-size: 13px;
  font-weight: 900;
  flex: 0 0 auto;
}
#raiseSlider .raise-confirm,
#raiseSlider .raise-cancel {
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
#raiseSlider .raise-confirm {
  background: linear-gradient(180deg, #facc15, #ca8a04);
  color: #1f2937;
}
#raiseSlider .raise-cancel {
  background: #475569;
}

#logFeed {
  display: none;
}
#logFeed div { padding: 2px 0; }

/* ── Tournament-end overlay (GG dark navy) ─────────────────────────────── */
#endOverlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.end-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(56,189,248,0.18) 0%, rgba(5,8,16,0.0) 50%),
    radial-gradient(ellipse at center, rgba(15,23,42,0.85) 0%, rgba(0,0,0,0.96) 100%);
  backdrop-filter: blur(4px);
}
.end-content {
  position: relative;
  max-width: 380px; width: 92%;
  background: linear-gradient(160deg, #142042 0%, #0a1322 60%, #050810 100%);
  border: 1px solid rgba(251,191,36,0.55);
  border-radius: 16px;
  padding: 22px 18px 18px;
  text-align: center;
  box-shadow:
    0 20px 60px rgba(251,191,36,0.18),
    0 0 100px rgba(251,191,36,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  animation: end-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.end-content.is-winner {
  border-color: rgba(251,191,36,0.85);
  box-shadow:
    0 20px 60px rgba(251,191,36,0.35),
    0 0 100px rgba(251,191,36,0.22),
    inset 0 0 0 1px rgba(255,200,80,0.20);
}
@keyframes end-pop {
  from { opacity: 0; transform: scale(0.6) translateY(40px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#endTrophyWrap {
  display: flex; justify-content: center;
  margin-bottom: 10px;
  perspective: 600px;
}
.trophy-svg {
  width: 160px; height: auto;
  animation: trophy-glow 2.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  transform-style: preserve-3d;
}
.trophy-svg.winner-rotate {
  animation:
    trophy-glow 2.4s ease-in-out infinite alternate,
    trophy-spin 4.5s linear infinite;
}
.trophy-svg.loser { width: 90px; opacity: 0.55; }
@keyframes trophy-glow {
  from { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(251,191,36,0.45)); }
  to   { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 32px rgba(251,191,36,1.0)); }
}
@keyframes trophy-spin {
  0%   { transform: rotateY(0deg);   }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
.trophy-svg .sparkle {
  animation: sparkle-twinkle 1.6s ease-in-out infinite;
  transform-origin: center;
}
.trophy-svg .sparkle:nth-child(2) { animation-delay: 0.4s; }
.trophy-svg .sparkle:nth-child(3) { animation-delay: 0.8s; }
.trophy-svg .sparkle:nth-child(4) { animation-delay: 1.2s; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* Confetti — winner-only celebration particles. JS spawns absolute children */
.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
}
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px; height: 12px;
  border-radius: 1px;
  animation: confetti-fall linear forwards;
  opacity: 0.95;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-12px) rotate(0deg);   opacity: 0;   }
  10%  { opacity: 1; }
  100% { transform: translateY(540px) rotate(540deg); opacity: 0;   }
}

#endTitle {
  position: relative;
  font-size: 26px; font-weight: 900;
  color: #fde68a;
  text-shadow: 0 2px 12px rgba(251,191,36,0.55);
  margin-bottom: 4px;
  letter-spacing: 0.6px;
}
#endSubtitle {
  position: relative;
  font-size: 13px; color: #cbd5e1; margin-bottom: 14px;
  font-weight: 600;
}
#endSubtitle .prize {
  display: block; font-size: 24px; font-weight: 900; color: #fde68a;
  margin-top: 4px;
  text-shadow: 0 0 14px rgba(251,191,36,0.45);
}
#endSubtitle .prize-detail {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: none;
}

/* ─── Top-3 podium (D-2) ───────────────────────────────────────────────── */
.podium {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  gap: 6px;
  margin: 4px 0 12px;
  min-height: 130px;
}
.podium-step {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 6px 8px;
  text-align: center;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.podium-step.rank-1 {
  height: 130px;
  border-color: rgba(251,191,36,0.55);
  background: linear-gradient(180deg, rgba(251,191,36,0.18), rgba(251,191,36,0.04));
  box-shadow: 0 0 22px rgba(251,191,36,0.30);
}
.podium-step.rank-2 {
  height: 105px;
  border-color: rgba(203,213,225,0.45);
  background: linear-gradient(180deg, rgba(203,213,225,0.12), rgba(203,213,225,0.02));
}
.podium-step.rank-3 {
  height: 90px;
  border-color: rgba(217,119,6,0.50);
  background: linear-gradient(180deg, rgba(217,119,6,0.16), rgba(217,119,6,0.02));
}
.podium-step.is-me {
  outline: 2px solid #fbbf24;
  outline-offset: -2px;
}
.podium-medal {
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}
.podium-rank {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #94a3b8;
  text-transform: uppercase;
}
.podium-step.rank-1 .podium-rank { color: #fbbf24; }
.podium-step.rank-2 .podium-rank { color: #cbd5e1; }
.podium-step.rank-3 .podium-rank { color: #fdba74; }
.podium-name {
  font-size: 11.5px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0 2px;
}
.podium-prize {
  font-size: 11px;
  font-weight: 800;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.podium-prize small,
#endStandings .row .prize small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #fbbf24;
  white-space: nowrap;
}
.podium-step.rank-2 .podium-prize { color: #e2e8f0; }
.podium-step.rank-3 .podium-prize { color: #fed7aa; }

/* Standings (rank 4+) — compact list below podium */
#endStandings {
  text-align: left; padding: 8px 12px;
  background: rgba(0,0,0,0.30);
  border: 1px solid #1e293b;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 11.5px;
}
#endStandings .row {
  display: flex; justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #94a3b8;
}
#endStandings .row:last-child { border-bottom: 0; }
#endStandings .row.me {
  color: #fbbf24; font-weight: 800;
}
#endStandings .row .rank { width: 32px; font-weight: 700; }
#endStandings .row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#endStandings .row .prize { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }

/* Action row — share + close */
.end-actions {
  display: flex; gap: 8px;
}
#endShare,
#endClose {
  flex: 1;
  border: 0;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: transform 0.08s ease;
}
#endShare {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  color: #062032;
}
#endShare:active { transform: scale(0.98); }
#endShare.hidden { display: none !important; }
#endClose {
  background: linear-gradient(180deg, #fbbf24, #ca8a04);
  color: #1f2937;
}
#endClose:active { transform: scale(0.98); }
/* '다른게임으로' — 다른 토너에 살아있는 테이블이 있을 때만 노출 (app.js 동적 생성) */
#endOther {
  flex: 1;
  border: 0;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: transform 0.08s ease;
  background: linear-gradient(180deg, #34d399, #059669);
  color: #052e1b;
}
#endOther:active { transform: scale(0.98); }

/* ─── 토너먼트 상세 화면 ─── */
.back-btn {
  background: transparent; color: #cbd5e1; border: 0;
  font-size: 16px; padding: 6px 10px; cursor: pointer; line-height: 1;
}
.back-btn:active { transform: scale(0.95); }

#detailHeader {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  min-height: var(--holdem-detail-header-height);
  background: linear-gradient(180deg, #0f172a 0%, #0a1322 100%);
  border-bottom: 1px solid #1e293b;
  position: sticky; top: calc(var(--holdem-page-sticky-top) + var(--holdem-topbar-height)); z-index: 5;
}
#detailTitle { font-size: 16px; font-weight: 800; color: #fde68a; letter-spacing: 0.2px; }

#detailBody { padding: 10px 10px calc(76px + var(--holdem-safe-area-bottom)); }
#detailBody .card-block {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid #1e293b;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
#detailBody details.card-block summary {
  cursor: pointer; font-weight: 700; padding: 4px 0; color: #cbd5e1;
}
#detailBody .table-scroll { overflow-x: auto; margin-top: 6px; }
#detailBody table { width: 100%; border-collapse: collapse; font-size: 13px; }
#detailBody th, #detailBody td {
  padding: 6px 8px; text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#detailBody th:first-child, #detailBody td:first-child { text-align: left; }

#detailSummary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
#detailSummary .row { display: flex; justify-content: space-between; }
#detailSummary .row .lbl { color: #94a3b8; font-size: 12px; font-weight: 600; }
#detailSummary .row .val { color: #f8fafc; font-weight: 700; font-size: 13px; }

#detailMyStatus {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.32);
}
#detailMyStatus.is-busted {
  background: rgba(220,38,38,0.12);
  border-color: rgba(220,38,38,0.32);
}

/* B-6: fallback CTA stays above the safe-area bottom while detail content scrolls.
   When #detailActions is hidden (display:none from JS), no shadow/padding artifact remains. */
#detailActions {
  display: flex;
  gap: 8px;
  position: fixed;
  left: 50%;
  bottom: max(8px, calc(var(--holdem-safe-area-bottom) + 8px));
  width: min(460px, calc(100vw - 20px));
  z-index: 12;
  margin: 0;
  padding: 10px 10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(10,19,34,0.78), rgba(5,8,16,0.92));
  border: 1px solid #1e293b;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
#detailActions button {
  flex: 1; padding: 12px; border: 0; border-radius: 8px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  letter-spacing: 0.2px;
  transition: transform 0.08s ease;
}
#detailActions button:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(180deg, #facc15, #ca8a04);
  color: #1f2937;
}
.btn-secondary { background: #334155; color: #e2e8f0; }
.btn-danger {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  color: #fff;
}

#detailTables .trow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid #1e293b;
  border-radius: 8px;
  margin-top: 6px;
  font-size: 13px;
}
#detailTables .trow.is-mine {
  border-color: rgba(251,191,36,0.50);
  background: linear-gradient(180deg, rgba(251,191,36,0.10), rgba(251,191,36,0.02));
}
#detailTables .trow .trow-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
#detailTables .trow .num { font-weight: 800; color: #fde68a; font-size: 13px; letter-spacing: 0.2px; }
#detailTables .trow .meta { color: #94a3b8; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
#detailTables .trow .meta-seats { color: #cbd5e1; }
#detailTables .trow .meta-avg { color: #94a3b8; font-variant-numeric: tabular-nums; }
#detailTables .trow .meta-dot { color: #475569; }
#detailTables .trow .seat-btn {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  color: #062032;
  border: 0;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
#detailTables .trow.is-mine .seat-btn {
  background: linear-gradient(180deg, #facc15, #ca8a04);
  color: #1f2937;
}
#detailTables .trow .seat-btn:disabled {
  background: #334155; color: #64748b; cursor: not-allowed;
}

/* ─── B-4: Mini table diagram ─── */
.mini-table {
  flex-shrink: 0;
}
.mini-table .mt-felt {
  fill: rgba(56,189,248,0.12);
  stroke: rgba(56,189,248,0.45);
  stroke-width: 1;
}
.mini-table.is-mine .mt-felt {
  fill: rgba(251,191,36,0.16);
  stroke: rgba(251,191,36,0.65);
}
.mini-table .mt-seat.mt-occupied {
  fill: #38bdf8;
  stroke: #0284c7;
  stroke-width: 0.5;
}
.mini-table.is-mine .mt-seat.mt-occupied {
  fill: #fde68a;
  stroke: #ca8a04;
}
.mini-table .mt-seat.mt-vacant {
  fill: rgba(148,163,184,0.10);
  stroke: rgba(148,163,184,0.40);
  stroke-width: 0.7;
}

/* ─── 액션 카운트다운 (자동 폴드) ─── */
.action-countdown {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; margin: 6px 0;
}
.action-countdown-bar {
  flex: 1; height: 6px;
  background: rgba(255,255,255,0.1); border-radius: 3px;
  overflow: hidden;
}
#actionCountdownFill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #22c55e, #facc15 60%, #ef4444);
  transition: width 0.1s linear, background 0.3s;
}
#actionCountdownLabel {
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; color: #fde68a;
  min-width: 36px; text-align: right;
}
.action-countdown.is-warn #actionCountdownFill { background: #f97316; }
.action-countdown.is-danger #actionCountdownFill { background: #dc2626; }
.action-countdown.is-danger #actionCountdownLabel {
  color: #fca5a5;
  animation: countdown-pulse 0.45s ease-in-out infinite alternate;
  text-shadow: 0 0 8px rgba(248,113,113,0.7);
}
@keyframes countdown-pulse {
  from { transform: scale(1);    opacity: 0.7; }
  to   { transform: scale(1.18); opacity: 1.0; }
}
/* 타임뱅크 배지 — 베이스 30s 위에 추가로 쓸 수 있는 그레이스 잔량 */
.time-bank-pill {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  background: rgba(96, 165, 250, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 10px;
  color: #93c5fd;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.time-bank-pill.hidden { display: none; }

/* ─── Bust modal ─── */
.bust-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,0,0,0.85), rgba(0,0,0,0.95));
  backdrop-filter: blur(3px);
}
.bust-modal.active { display: flex; }
.bust-card {
  max-width: 320px; width: 90%;
  background: linear-gradient(160deg, #2a1a1a, #0e0606);
  border: 2px solid #b91c1c;
  border-radius: 14px;
  padding: 28px 20px 20px;
  text-align: center;
  box-shadow: 0 12px 50px rgba(220,38,38,0.35);
  animation: bust-pop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes bust-pop {
  from { transform: scale(0.6) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.bust-emoji { font-size: 48px; margin-bottom: 10px; }
.bust-rank {
  font-size: 28px; font-weight: 800; color: #fca5a5;
  margin-bottom: 6px;
}
.bust-sub { font-size: 13px; color: #94a3b8; margin-bottom: 18px; }
.bust-actions { display: flex; flex-direction: column; gap: 8px; }
/* '다른게임으로' — 다른 토너에 살아있는 테이블이 있을 때만 노출 (app.js) */
#bustOther {
  width: 100%; padding: 12px;
  background: linear-gradient(180deg, #34d399, #059669); color: #052e1b;
  border: 0; border-radius: 8px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  letter-spacing: 0.2px;
}
#bustOther:active { transform: scale(0.98); }
#bustClose {
  width: 100%; padding: 12px;
  background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff;
  border: 0; border-radius: 8px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  letter-spacing: 0.2px;
}
#bustClose:active { transform: scale(0.98); }

/* ─── Replay embed overlay — 텔레그램 웹뷰 안 리플레이 (세션 쿠키 유지 iframe) ─── */
#replayEmbedOverlay {
  position: fixed; inset: 0; z-index: 1300; /* bust 모달(1100)·종료 오버레이(1000) 위 */
  background: #050810;
}
#replayEmbedOverlay iframe {
  display: block; width: 100%; height: 100%; border: 0;
}
#replayEmbedClose {
  position: absolute;
  top: calc(var(--tg-safe-area-inset-top, 0px) + 10px);
  left: 10px;
  z-index: 2;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,0.85);
  color: #e2e8f0;
  border: 1px solid rgba(148,163,184,0.4);
  border-radius: 50%;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
#replayEmbedClose:active { transform: scale(0.94); }

/* ─── Tournament starting countdown ─── */
.starting-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.88), rgba(0,0,0,0.96));
  backdrop-filter: blur(4px);
}
.starting-overlay.active { display: flex; }
.starting-card {
  max-width: 280px; width: 80%;
  background: linear-gradient(160deg, #142042 0%, #0a1322 60%, #050810 100%);
  border: 1px solid rgba(251,191,36,0.55);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  animation: starting-pulse 1s ease-in-out infinite alternate;
}
@keyframes starting-pulse {
  from { box-shadow: 0 0 30px rgba(251,191,36,0.3); }
  to   { box-shadow: 0 0 60px rgba(251,191,36,0.7); }
}
.starting-title { font-size: 16px; color: #fbbf24; font-weight: 700; margin-bottom: 12px; }
.starting-secs {
  font-size: 64px; font-weight: 900; color: #fef3c7;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 16px rgba(251,191,36,0.5);
}
.starting-sub { font-size: 12px; color: #94a3b8; margin-top: 8px; }

/* ─── History modal (로비 [기록] 탭) ─── */
.history-modal {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
}
.history-modal.hidden { display: none; }
.history-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(3px);
}
.history-card {
  position: relative;
  width: 92%; max-width: 420px;
  max-height: 80vh;
  background: linear-gradient(160deg, #142042 0%, #0a1322 60%, #050810 100%);
  border: 1px solid rgba(251,191,36,0.55);
  border-radius: 14px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.history-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(251,191,36,0.3);
  font-size: 15px; font-weight: 700; color: #fbbf24;
}
.history-header button {
  width: 30px; height: 30px;
  background: transparent; border: 0;
  color: #fbbf24; font-size: 22px; cursor: pointer;
  line-height: 1;
}
.history-body {
  flex: 1; overflow-y: auto;
  padding: 12px 14px;
}

.tournament-password-card {
  max-width: 380px;
}
.tournament-password-body {
  display: grid;
  gap: 10px;
}
.tournament-password-name {
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  min-height: 19px;
}
.tournament-password-desc {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}
.tournament-password-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 10px;
  background: rgba(2,6,23,0.62);
  color: #f8fafc;
  padding: 9px 11px;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.tournament-password-input:focus {
  border-color: rgba(251,191,36,0.62);
  box-shadow: 0 0 0 3px rgba(251,191,36,0.14);
}
.tournament-password-error {
  min-height: 18px;
  color: #fca5a5;
  font-size: 12.5px;
  font-weight: 700;
}
.tournament-password-actions {
  display: flex;
  gap: 10px;
  padding: 0 14px 14px;
}
.tournament-password-actions button {
  flex: 1;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.26);
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  font-weight: 850;
  font: inherit;
}
.tournament-password-actions #tournamentPasswordConfirm {
  border: 0;
  color: #0a1322;
  background: linear-gradient(180deg,#fbbf24,#f59e0b);
}
.ticket-register-card {
  max-width: 410px;
}
.ticket-register-body {
  display: grid;
  gap: 9px;
}
.ticket-register-option {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 10px;
  background: rgba(15,23,42,0.72);
  color: #e5e7eb;
  padding: 10px 11px;
  text-align: left;
  font: inherit;
}
.ticket-register-option.is-recommended {
  border-color: rgba(34,211,238,0.42);
  background: rgba(14,165,233,0.14);
}
.ticket-register-option strong,
.ticket-register-option small {
  display: block;
  min-width: 0;
}
.ticket-register-option strong {
  color: #f8fafc;
  font-size: 13.5px;
  font-weight: 950;
}
.ticket-register-option small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}
.ticket-register-option b {
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(251,191,36,0.14);
  color: #fde68a;
  font-size: 10px;
  font-weight: 950;
}

/* ── feat-4 PokerCraft-lite (pokercraft-lite.js) — additive, reuses .history-modal ── */
.hpc-launch-btn {
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 12px;
  color: #fbbf24;
  font-size: 20px; font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hpc-launch-float {
  position: fixed; right: 14px; bottom: 84px; z-index: 940;
}
.hpc-stats { margin-bottom: 12px; }
.hpc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hpc-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}
.hpc-stat-val { font-size: 17px; font-weight: 800; color: #fbbf24; line-height: 1.1; }
.hpc-stat-label { font-size: 11px; color: #cbd5e1; margin-top: 3px; }
.hpc-stat-sub { font-size: 10px; color: #64748b; margin-top: 2px; }
.hpc-stats-note { font-size: 10px; color: #64748b; margin-top: 8px; }
.hpc-section-title {
  font-size: 12px; font-weight: 700; color: #94a3b8;
  margin: 6px 0 8px;
}
.hpc-empty { font-size: 13px; color: #94a3b8; padding: 12px 0; text-align: center; }
.hpc-hand-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main foot" "board foot";
  align-items: center;
  column-gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hpc-hand-main { grid-area: main; display: flex; align-items: center; gap: 8px; }
.hpc-hand-no { font-weight: 700; color: #e2e8f0; font-size: 13px; }
.hpc-hand-blinds { font-size: 11px; color: #94a3b8; }
.hpc-hand-board { grid-area: board; font-size: 12px; color: #cbd5e1; letter-spacing: 0.5px; margin-top: 2px; }
.hpc-hand-foot { grid-area: foot; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hpc-hole-cards {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-height: 30px;
}
.hpc-hole-card {
  width: 24px;
  height: 30px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff 0%, #e5e7eb 100%);
  border: 1px solid rgba(15,23,42,0.26);
  box-shadow: 0 3px 7px rgba(0,0,0,0.28);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.hpc-hole-card + .hpc-hole-card {
  margin-left: -5px;
}
.hpc-hole-rank {
  font-size: 11px;
}
.hpc-hole-suit {
  margin-top: 1px;
  font-size: 12px;
}
.hpc-suit-red { color: #dc2626; }
.hpc-suit-dark { color: #111827; }
.hpc-hole-card-back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.28) 0 4px, transparent 4px 8px),
    linear-gradient(180deg, #c2410c, #7f1d1d);
  border-color: rgba(253,186,116,0.78);
}
.hpc-hand-net { font-size: 14px; font-weight: 800; }
.hpc-net-win { color: #34d399; }
.hpc-net-loss { color: #f87171; }
.hpc-net-even { color: #94a3b8; }
.hpc-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 6px;
}
.hpc-badge-sd { background: rgba(52,211,153,0.15); color: #34d399; }
.hpc-badge-fold { background: rgba(148,163,184,0.15); color: #94a3b8; }
.hpc-replay-btn {
  padding: 5px 10px;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 8px;
  color: #fbbf24; font-size: 12px; font-weight: 700;
  cursor: pointer;
}

/* ── feat-4 4-4 bet presets (bet-presets.js) — chips inherit #quickBets button ── */
#quickBets .bp-chip { opacity: 0.97; }
#quickBets .bp-edit-chip { font-size: 14px; }
.bp-list { margin-bottom: 12px; }
.bp-empty { color: #94a3b8; font-size: 13px; padding: 8px 0; text-align: center; }
.bp-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bp-row-label { font-weight: 800; color: #fbbf24; }
.bp-row-desc { font-size: 12px; color: #cbd5e1; }
.bp-del-btn {
  padding: 4px 10px;
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.4);
  border-radius: 7px;
  color: #f87171; font-size: 12px; cursor: pointer;
}
.bp-add-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.bp-add-row select, .bp-add-row input {
  min-height: 36px;
  background: rgba(15,23,42,0.92);
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 8px;
  color: #e2e8f0; font-size: 13px; padding: 0 8px;
}
.bp-add-btn {
  padding: 8px 12px;
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 8px;
  color: #fbbf24; font-size: 13px; font-weight: 700; cursor: pointer;
}
.bp-note { font-size: 10px; color: #64748b; margin-top: 10px; }

/* 종료 토너 결과 모달 — 헤더 박스 + 순위 행 */
.results-header-box {
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.6;
}
.results-header-box b { color: #fbbf24; }
.res-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.05);
}
.res-row.is-winner { background: linear-gradient(180deg, rgba(251,191,36,0.10), rgba(180,83,9,0.05)); border-color: rgba(251,191,36,0.30); }
.res-row.is-me { box-shadow: 0 0 0 2px rgba(59,130,246,0.45); }
.res-pos { font-weight: 800; font-size: 16px; text-align: right; color: #cbd5e1; }
.res-row.is-winner .res-pos { color: #fbbf24; }
.res-name { font-weight: 600; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-prize { font-weight: 700; color: #94a3b8; text-align: right; font-variant-numeric: tabular-nums; }
.res-prize.is-paid { color: #fbbf24; }
.res-prize.has-bounty {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.res-prize-total { white-space: nowrap; }
.res-prize-breakdown {
  font-size: 10.5px;
  font-weight: 700;
  color: #f59e0b;
  max-width: min(54vw, 240px);
  line-height: 1.18;
  white-space: normal;
}
.res-empty {
  text-align: center;
  color: #64748b;
  padding: 28px 0;
  font-size: 13px;
}

/* ─── Hand ranking guide ─────────────────────────────────────────────── */
.hand-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.hand-guide-modal.hidden { display: none; }
.hand-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
}
.hand-guide-card {
  position: relative;
  width: min(420px, 94vw);
  max-height: 82vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #142042 0%, #0a1322 62%, #050810 100%);
  border: 1px solid rgba(251,191,36,0.55);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.hand-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(251,191,36,0.28);
  color: #fbbf24;
  font-size: 15px;
  font-weight: 900;
}
.hand-guide-head button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #fbbf24;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.hand-guide-body {
  overflow-y: auto;
  padding: 12px;
}
.hand-guide-row {
  display: grid;
  grid-template-columns: 122px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.hand-guide-row b {
  color: #e5e7eb;
  font-size: 12px;
}
.hand-guide-row span {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}

/* ─── Manual bet amount keypad ───────────────────────────────────────── */
.bet-input-modal {
  position: fixed;
  inset: 0;
  z-index: 1320;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bet-input-modal.hidden { display: none; }
.bet-input-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
}
.bet-input-card {
  position: relative;
  width: min(420px, 100%);
  background: linear-gradient(180deg, #0f172a, #050810);
  border: 1px solid rgba(251,191,36,0.45);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 12px 14px 16px;
  box-shadow: 0 -18px 44px rgba(0,0,0,0.55);
}
.bet-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fbbf24;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 10px;
}
.bet-input-head button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #fbbf24;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
#betInputField {
  width: 100%;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid rgba(251,191,36,0.45);
  background: rgba(255,255,255,0.06);
  color: #fbbf24;
  font-size: 28px;
  font-weight: 950;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.bet-input-range {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  margin: 8px 2px 10px;
}
.bet-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.bet-keypad button,
.bet-input-actions button {
  min-height: 42px;
  border: 1px solid #334155;
  border-radius: 9px;
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}
.bet-keypad button:active,
.bet-input-actions button:active {
  transform: scale(0.97);
}
.bet-input-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 7px;
  margin-top: 9px;
}
.bet-input-actions #betInputApply {
  background: linear-gradient(180deg, #facc15, #ca8a04);
  border-color: rgba(251,191,36,0.7);
  color: #1f2937;
}

/* "결과" 작은 버튼 (history 행 안에서) */
.hist-row .hist-results-btn {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(59,130,246,0.18);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.35);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
.hist-row .hist-results-btn:active { transform: translateY(1px); }
.hist-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.05);
  align-items: center;
}
.hist-name {
  font-size: 13px; font-weight: 700; color: #fef3c7;
  grid-column: 1; grid-row: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist-meta {
  grid-column: 1; grid-row: 2;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #94a3b8;
  flex-wrap: wrap;
}
.hist-ts { font-variant-numeric: tabular-nums; }
.hist-pl {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  align-self: center;
  font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
  white-space: nowrap;
  text-align: right;
}
.hist-bounty {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
}
/* 결과 버튼이 없는 row 는 hist-pl 를 2 row 모두 차지하게 */
.hist-row:not(:has(.hist-results-btn)) .hist-pl {
  grid-row: 1 / 3;
}
.hist-pl.pos { color: #86efac; }
.hist-pl.neg { color: #fca5a5; }
.hist-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px; font-weight: 700;
}
.hist-badge.win    { background: rgba(251,191,36,0.25); color: #fde68a; border: 1px solid rgba(251,191,36,0.5); }
.hist-badge.bust   { background: rgba(248,113,113,0.18); color: #fca5a5; border: 1px solid rgba(248,113,113,0.4); }
.hist-badge.reg    { background: rgba(96,165,250,0.18); color: #93c5fd; border: 1px solid rgba(96,165,250,0.35); }
.hist-badge.seat   { background: rgba(74,222,128,0.18); color: #86efac; border: 1px solid rgba(74,222,128,0.35); }
.hist-badge.refund { background: rgba(148,163,184,0.18); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }
.hist-empty { text-align: center; padding: 30px; color: #64748b; font-size: 13px; }
.hist-empty.err { color: #f87171; }

/* 기록 탭 — 다른 탭과 시각적으로 구분 */
.tab.tab-history {
  background: rgba(251,191,36,0.1);
  color: #fbbf24;
}
.tab.tab-history:hover { background: rgba(251,191,36,0.18); }

/* ─── 블라인드 카운트다운 ─── */
.lvl-countdown {
  font-variant-numeric: tabular-nums;
  font-size: 12px; color: #9ca3af; padding-left: 4px;
}
.lvl-countdown.is-warn { color: #fbbf24; }

/* ─── 토너먼트 시계 — GG-style hero clock ─── */
.tourn-clock {
  background: linear-gradient(180deg, #0f1d36 0%, #0a1322 100%);
  border: 1px solid rgba(56,189,248,0.28);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.05) inset, 0 4px 18px rgba(0,0,0,0.35);
  padding: 14px 14px 12px;
  border-radius: 12px;
}
.tc-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}
.tc-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(180deg, rgba(251,191,36,0.16), rgba(251,191,36,0.04));
  border: 1px solid rgba(251,191,36,0.40);
  border-radius: 10px;
  padding: 6px 10px 4px;
  min-width: 64px;
}
.tc-lvl-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fbbf24;
  text-transform: uppercase;
}
.tc-lvl-num {
  font-size: 32px;
  font-weight: 900;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.5px;
}
.tc-blinds-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tc-blinds-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #94a3b8;
  text-transform: uppercase;
}
.tc-blinds-val {
  font-size: 22px;
  font-weight: 800;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-ante {
  font-size: 10px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(148,163,184,0.14);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 4px;
  padding: 1px 6px;
  align-self: flex-start;
  letter-spacing: 0.3px;
}
.tc-next-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.tc-next-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #94a3b8;
  text-transform: uppercase;
}
.tc-next-val {
  font-size: 24px;
  font-weight: 800;
  color: #38bdf8;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 0 12px rgba(56,189,248,0.25);
}
.tc-next-val.urgent {
  color: #fca5a5;
  text-shadow: 0 0 14px rgba(248,113,113,0.35);
  animation: clock-urgent 1s ease-in-out infinite;
}
@keyframes clock-urgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.tc-progress {
  height: 4px;
  background: rgba(148,163,184,0.14);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}
.tc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  width: 0%;
  transition: width 0.6s ease-out;
}
.tc-progress-fill.urgent {
  background: linear-gradient(90deg, #f97316, #ef4444);
}
.tc-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  color: #94a3b8;
}
.tc-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.tc-stat-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.tc-stat-val {
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.tc-stat.tc-in-money .tc-stat-val { color: #fde68a; }
.tc-stat-sep { color: #334155; font-weight: 700; }
.tc-late {
  margin-top: 10px;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgba(249,115,22,0.20), rgba(249,115,22,0.08));
  border: 1px solid rgba(249,115,22,0.45);
  border-radius: 8px;
  font-size: 12px;
  color: #fdba74;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

/* ─── 칩 리더 ─── */
.muted-count { color: #9ca3af; font-weight: 400; font-size: 12px; }
.leaders-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.leaders-list .lrow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid #1e293b;
  border-radius: 7px;
  font-size: 13px;
}
.leaders-list .lrow.is-me {
  background: linear-gradient(180deg, rgba(251,191,36,0.16), rgba(251,191,36,0.05));
  border-color: rgba(251,191,36,0.50);
  box-shadow: 0 0 0 1px rgba(251,191,36,0.10) inset;
}
/* Eliminated players — kept in the list but faded so they don't compete
   visually with live competitors. The rank cell shows their finish_position
   (e.g. "8위"), the chips cell reads "탈락". */
.leaders-list .lrow.is-busted {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.leaders-list .lrow.is-busted .lchips {
  color: #94a3b8;
  font-style: italic;
}
.leaders-list .lrow.is-busted .lrank {
  color: #64748b;
}
/* Registered-but-not-started players — still alive, just waiting for the
   tournament to begin. Slight desaturation distinguishes them from active
   seats without the "eliminated" look. */
.leaders-list .lrow.is-pending .lchips {
  color: #38bdf8;
  font-weight: 700;
}
.leaders-list .lrow.is-pending .lrank {
  color: #475569;
}
.leaders-list .lrank {
  min-width: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
  text-align: right;
  font-size: 12px;
}
.leaders-list .lrank.gold   { color: #fbbf24; }
.leaders-list .lrank.silver { color: #cbd5e1; }
.leaders-list .lrank.bronze { color: #fdba74; }
.leaders-list .lavatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.leaders-list .lname { flex: 1; color: #e5e7eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.leaders-list .lchips {
  color: #fde68a; font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.2px;
}
.leaders-list .ltable {
  color: #64748b; font-size: 10.5px; margin-left: 4px;
  font-weight: 700;
  background: rgba(148,163,184,0.10);
  border: 1px solid rgba(148,163,184,0.18);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.leaders-list .empty { color: #64748b; padding: 8px; text-align: center; font-size: 12px; }
/* Pinned hero row (B-3) — surface label + divider above the natural rank list. */
.leaders-list .lrow-pinned-label {
  font-size: 9.5px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 4px 2px;
}
.leaders-list .lrow-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,0.18), transparent);
  margin: 6px 0;
}

/* ─── 테이블 도구 레일 + 채팅 패널 (아레나 룸 연동) ─── */
.table-tool-rail {
  position: fixed;
  left: max(10px, calc((100vw - 480px) / 2 + 10px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 276px);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0;
  border-radius: 10px;
  border: 0;
  background: transparent;
  backdrop-filter: blur(8px);
  box-shadow: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.table-tool-rail.is-open {
  padding: 6px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(5,8,16,0.58);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.table-tool-rail.result-hidden {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.table-tool-rail:not(.is-open) .tool-rail-btn {
  display: none;
}
.tool-menu-toggle {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(251,191,36,0.45);
  background: rgba(15,23,42,0.88);
  color: #fbbf24;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.38);
  -webkit-tap-highlight-color: transparent;
}
.tool-menu-toggle:active {
  transform: translateY(1px);
}
.table-tool-rail.is-open .tool-menu-toggle {
  border-color: rgba(56,189,248,0.55);
  color: #7dd3fc;
}
.tool-rail-btn,
.chat-toggle-btn,
.hand-history-fab {
  position: relative;
  width: 92px;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.86);
  color: #e5e7eb;
  cursor: pointer;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  column-gap: 7px;
  padding: 7px 9px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.32);
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.tool-rail-btn:active,
.chat-toggle-btn:active,
.hand-history-fab:active {
  transform: translateY(1px);
  box-shadow: 0 2px 7px rgba(0,0,0,0.36);
}
.tool-rail-btn svg,
.chat-toggle-btn svg,
.hand-history-fab svg {
  justify-self: center;
}
.tool-rail-icon {
  justify-self: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251,191,36,0.18);
  color: #fbbf24;
  font-weight: 900;
}
.tool-rail-label {
  min-width: 0;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-toggle-btn {
  border-color: rgba(251,191,36,0.38);
}
.hand-history-fab {
  border-color: rgba(59,130,246,0.42);
}

/* ─── 멀티테이블 탭 스트립 (테이블 뷰 최상단) ─── */
.multi-table-strip {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #0f172a 0%, #0b1424 100%);
  border-bottom: 1px solid #1e293b;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.multi-table-strip::-webkit-scrollbar { height: 4px; }
.multi-table-strip::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 2px; }
.mt-tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 18px;
  border: 1px solid #1e293b;
  background: #0b1424;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.mt-tab.is-active {
  background: linear-gradient(180deg, #1e40af, #1e3a8a);
  border-color: #3b82f6;
  color: #fff;
}
.mt-tab.is-turn {
  border-color: #fbbf24;
  color: #fde68a;
  animation: mt-tab-urgent 0.7s ease-in-out infinite alternate;
}
.mt-tab .mt-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
}
@keyframes mt-tab-urgent {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.35); }
  100% { box-shadow: 0 0 0 6px rgba(251,191,36,0.0); }
}

/* ─── 핸드히스토리 패널 ─── */

.hand-history-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(55vh, 480px);
  background: linear-gradient(180deg, #0f172a 0%, #0a1322 100%);
  border-top: 1px solid #1e293b;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.hand-history-panel:not(.hidden) { transform: translateY(0); }
.hh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #1e293b;
  background: rgba(15,23,42,0.96);
}
.hh-title { font-weight: 700; color: #e2e8f0; }
.hh-filters {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(30,41,59,0.9);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hh-filters button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.26);
  background: rgba(255,255,255,0.04);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.hh-filters button.is-active {
  border-color: rgba(251,191,36,0.62);
  background: rgba(251,191,36,0.14);
  color: #fbbf24;
}
.hh-close {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.hh-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 12px 16px;
}
.hh-empty {
  text-align: center;
  color: #64748b;
  padding: 32px 0;
  font-size: 13px;
}
.chat-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border: 2px solid #050810;
  font-variant-numeric: tabular-nums;
}

.player-note-modal,
.table-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 1330;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.player-note-modal.hidden,
.table-settings-modal.hidden { display: none; }
.player-note-backdrop,
.table-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(3px);
}
.player-note-card,
.table-settings-card {
  position: relative;
  width: min(390px, 94vw);
  background: linear-gradient(180deg, #111c32, #070b14);
  border: 1px solid rgba(251,191,36,0.48);
  border-radius: 13px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  overflow: hidden;
}
.player-note-head,
.table-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  color: #fbbf24;
  font-size: 15px;
  font-weight: 950;
  border-bottom: 1px solid rgba(251,191,36,0.22);
}
.player-note-head button,
.table-settings-head button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #fbbf24;
  font-size: 22px;
  cursor: pointer;
}
.player-note-field {
  display: block;
  padding: 10px 14px 0;
}
.player-note-field span,
.setting-row span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 5px;
}
.player-note-field select,
.player-note-field textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
}
.player-note-field textarea {
  resize: vertical;
  min-height: 88px;
}
.player-note-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  padding: 12px 14px 14px;
}
.player-note-actions button {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.26);
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  font-weight: 900;
  cursor: pointer;
}
#playerNoteSave {
  border-color: rgba(251,191,36,0.66);
  background: linear-gradient(180deg, #facc15, #ca8a04);
  color: #1f2937;
}

.myinfo-sheet,
.ticket-detail-sheet {
  position: fixed;
  inset: 0;
  z-index: 1360;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  padding-bottom: max(14px, calc(var(--holdem-safe-area-bottom) + 10px));
}
.myinfo-sheet.hidden,
.ticket-detail-sheet.hidden { display: none; }
.myinfo-backdrop,
.ticket-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.74);
  backdrop-filter: blur(4px);
}
.myinfo-card,
.ticket-detail-card {
  position: relative;
  width: min(450px, 100%);
  max-height: min(86vh, 720px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid rgba(251,191,36,0.42);
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(180deg, #111c32 0%, #07101e 50%, #030712 100%);
  box-shadow: 0 18px 60px rgba(0,0,0,0.64);
}
.myinfo-head,
.ticket-detail-head {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(251,191,36,0.20);
  color: #fbbf24;
}
.myinfo-head strong,
.ticket-detail-head strong {
  font-size: 17px;
  font-weight: 950;
}
.myinfo-head button,
.ticket-detail-head button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #fbbf24;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.myinfo-body,
.ticket-detail-body {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px max(18px, var(--holdem-safe-area-bottom));
}
.myinfo-loading,
.myinfo-empty {
  padding: 32px 8px;
  color: #94a3b8;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}
.myinfo-hero {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 13px;
  align-items: center;
  margin-bottom: 12px;
}
.myinfo-avatar .avatar,
.myinfo-avatar-fallback {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(251,191,36,0.58);
  background: linear-gradient(135deg, #475569 0%, #111827 100%);
  color: #f8fafc;
  font-size: 28px;
  font-weight: 950;
}
.myinfo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.myinfo-identity {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.myinfo-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.myinfo-name {
  min-width: 0;
  overflow: hidden;
  color: #f8fafc;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myinfo-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(34,197,94,0.15);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.34);
  font-size: 10.5px;
  font-weight: 950;
}
.myinfo-id-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 850;
}
.myinfo-id-row code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myinfo-copy-btn {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid rgba(148,163,184,0.26);
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.myinfo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 14px;
}
.myinfo-actions button,
.myinfo-nick-actions button,
.myinfo-ticket-row,
.myinfo-convert-btn {
  min-height: 40px;
  border-radius: 8px;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}
.myinfo-primary {
  border: 1px solid rgba(251,191,36,0.62);
  background: linear-gradient(180deg, #facc15, #ca8a04);
  color: #172033;
}
.myinfo-secondary,
.myinfo-convert-btn {
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.78);
  color: #dbeafe;
}
.myinfo-convert-btn:disabled {
  opacity: .64;
  cursor: not-allowed;
}
.myinfo-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.myinfo-stat {
  min-width: 0;
  padding: 10px 9px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 8px;
  background: rgba(15,23,42,0.68);
}
.myinfo-stat span {
  display: block;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 900;
}
.myinfo-stat strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #f8fafc;
  font-size: 17px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myinfo-section {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 8px;
  background: rgba(2,6,23,0.48);
}
.myinfo-ticket-section {
  padding: 0;
  overflow: hidden;
}
.myinfo-section h3 {
  margin: 0 0 10px;
  color: #fde68a;
  font-size: 14px;
  font-weight: 950;
}
.myinfo-section-note,
.myinfo-nick-message {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}
.myinfo-nick-grid {
  display: grid;
  gap: 8px;
}
.myinfo-nick-grid input,
.myinfo-convert-grid select,
.myinfo-convert-grid input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #f8fafc;
  font: inherit;
  font-size: 14px;
  outline: none;
  padding: 9px 10px;
}
.myinfo-nick-grid input:focus {
  border-color: rgba(251,191,36,0.58);
}
.myinfo-nick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.myinfo-nick-message.ok { color: #86efac; }
.myinfo-nick-message.err { color: #fca5a5; }
.myinfo-ledger,
.myinfo-ticket-list {
  display: grid;
  gap: 7px;
}
.myinfo-ticket-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0.90), rgba(2,6,23,0.70));
}
.myinfo-ticket-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.myinfo-ticket-box-head span {
  display: block;
  color: #fde68a;
  font-size: 14px;
  font-weight: 950;
}
.myinfo-ticket-box-head strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 17px;
  font-weight: 950;
}
.myinfo-ticket-box-head b {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(34,211,238,0.26);
  border-radius: 999px;
  background: rgba(14,165,233,0.12);
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 950;
}
.myinfo-ticket-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.myinfo-ticket-chip {
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}
.myinfo-ticket-chip.is-active {
  border-color: rgba(251,191,36,0.62);
  background: linear-gradient(180deg, rgba(251,191,36,0.22), rgba(180,83,9,0.14));
  color: #fde68a;
  box-shadow: inset 0 0 0 1px rgba(251,191,36,0.10);
}
.myinfo-ticket-empty {
  display: grid;
  min-height: 92px;
  place-content: center;
  gap: 5px;
  border: 1px dashed rgba(148,163,184,0.20);
  border-radius: 8px;
  background: rgba(15,23,42,0.42);
  color: #e2e8f0;
  text-align: center;
}
.myinfo-ticket-empty strong {
  font-size: 13px;
  font-weight: 950;
}
.myinfo-ticket-empty small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}
.myinfo-ledger-row,
.myinfo-ticket-row {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(148,163,184,0.13);
  border-radius: 8px;
  background: rgba(15,23,42,0.60);
  color: #e5e7eb;
  text-align: left;
}
.myinfo-ledger-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.myinfo-ticket-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.myinfo-ledger-row small,
.myinfo-ticket-row small,
.ticket-detail-row span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}
.myinfo-ledger-row strong.plus { color: #86efac; }
.myinfo-ledger-row strong.minus { color: #fca5a5; }
.myinfo-ticket-row strong {
  min-width: 0;
  color: #f8fafc;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myinfo-ticket-row em {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(251,191,36,0.12);
  color: #fde68a;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 950;
}
.myinfo-ticket-row.is-urgent {
  border-color: rgba(248,113,113,0.42);
  background: rgba(69,10,10,0.34);
}
.myinfo-ticket-row.is-soon {
  border-color: rgba(251,191,36,0.32);
}
.myinfo-ticket-conditions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.myinfo-ticket-conditions b {
  min-width: 0;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.15);
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.trophy-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 128px);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.trophy-strip::-webkit-scrollbar { display: none; }
.trophy-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 9px 8px;
  border: 1px solid rgba(251,191,36,0.18);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 20%, rgba(251,191,36,0.14), rgba(15,23,42,0.72) 62%);
  text-align: center;
}
.trophy-item img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(251,191,36,0.18));
}
.trophy-item strong,
.trophy-item span,
.trophy-item em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trophy-item strong {
  color: #fde68a;
  font-size: 11.5px;
  font-weight: 950;
}
.trophy-item span {
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 800;
}
.trophy-item em {
  color: #7dd3fc;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.trophy-empty {
  display: grid;
  min-height: 70px;
  place-items: center;
  border: 1px dashed rgba(148,163,184,0.20);
  border-radius: 8px;
  background: rgba(15,23,42,0.42);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.myinfo-ticket-meta {
  color: #64748b !important;
}
.myinfo-ticket-view,
.ticket-detail-filter {
  justify-self: start;
  margin-top: 3px;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 950;
}
.ticket-detail-filter {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(34,211,238,0.30);
  border-radius: 9px;
  background: rgba(14,165,233,0.12);
  font: inherit;
}
.myinfo-convert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.myinfo-convert-grid input,
.myinfo-convert-grid button,
.myinfo-convert-grid .myinfo-section-note {
  grid-column: 1 / -1;
}
/* USDT → 포인트 교환 */
.myinfo-exchange-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
}
.myinfo-exchange-row input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #f8fafc;
  font: inherit;
  font-size: 14px;
  outline: none;
  padding: 9px 10px;
}
.myinfo-exchange-row input:focus { border-color: rgba(250,204,21,0.55); }
.myinfo-exchange-quick {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.myinfo-exchange-quick button {
  flex: 1 1 0;
  min-height: 32px;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.myinfo-exchange-quick button:active { background: rgba(250,204,21,0.16); }
.myinfo-exchange-preview {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(250,204,21,0.25);
  border-radius: 8px;
  background: rgba(250,204,21,0.07);
  color: #fde68a;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.ticket-detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(148,163,184,0.12);
}
.ticket-detail-row:last-child { border-bottom: 0; }
.ticket-detail-row strong {
  color: #f8fafc;
  font-size: 13px;
  text-align: right;
}
@media (min-width: 720px) {
  .myinfo-sheet {
    align-items: center;
  }
  .myinfo-card {
    border-radius: 10px;
  }
}
@media (max-width: 360px) {
  .myinfo-card { max-height: 88vh; }
  .myinfo-hero { grid-template-columns: 64px 1fr; }
  .myinfo-avatar .avatar,
  .myinfo-avatar-fallback {
    width: 62px;
    height: 62px;
    font-size: 24px;
  }
  .myinfo-name { font-size: 19px; }
  .myinfo-stats { grid-template-columns: 1fr; }
  .myinfo-convert-grid { grid-template-columns: 1fr; }
}

.player-profile-sheet {
  position: fixed;
  inset: 0;
  z-index: 1340;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
}
.player-profile-sheet.hidden { display: none; }
.player-profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
}
.player-profile-card {
  position: relative;
  width: min(540px, calc(100vw - 24px));
  max-height: min(86vh, 760px);
  max-height: min(86dvh, 760px);
  overflow: hidden auto;
  background:
    linear-gradient(145deg, rgba(15,23,42,0.98), rgba(2,6,23,0.98) 58%, rgba(3,12,24,0.98)),
    #030712;
  border: 1px solid rgba(34,211,238,0.42);
  border-radius: 14px 14px 10px 10px;
  box-shadow: 0 18px 56px rgba(0,0,0,0.62);
}
.player-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  color: #e5e7eb;
  font-size: 15px;
  font-weight: 950;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}
.player-profile-head button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #e5e7eb;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.player-profile-main {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 16px 12px;
}
.player-profile-avatar .avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
  border: 2px solid rgba(34,211,238,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #e5e7eb;
  font-size: 32px;
  font-weight: 950;
}
.player-profile-avatar .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.player-profile-summary {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.player-profile-summary strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-profile-summary span {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 800;
}
.player-profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 16px 12px;
}
.player-profile-actions.hidden { display: none; }
.player-profile-photo-btn {
  display: block;
  width: 100%;
  min-height: 40px;
  margin: 0;
  border: 1px solid rgba(34,211,238,0.62);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8,145,178,0.95), rgba(14,116,144,0.95));
  color: #ecfeff;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}
.player-profile-upload-btn {
  border-color: rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.92);
  color: #dbeafe;
}
/* feat-4 4-3: opponent memo trigger in the profile sheet (full-width row). */
.player-profile-note-btn {
  display: block;
  width: auto;
  min-height: 40px;
  margin: 0 16px 12px;
  border: 1px solid rgba(251,191,36,0.5);
  border-radius: 8px;
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.player-profile-note-btn.hidden { display: none; }
.player-profile-tabs {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 16px 12px;
}
.player-profile-tabs button {
  min-height: 36px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.player-profile-tabs button.is-active {
  border-color: rgba(34,211,238,0.7);
  background: rgba(34,211,238,0.16);
  color: #e0f2fe;
}
.player-profile-body {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
}
.player-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 8px;
  background: rgba(15,23,42,0.68);
}
.player-profile-row span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
}
.player-profile-row strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}
.pp-current-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pp-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15,23,42,0.72), rgba(2,6,23,0.58));
}
.pp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #e5e7eb;
}
.pp-section-head strong {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 950;
}
.pp-section-head span {
  margin-left: auto;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.pp-refresh {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 50%;
  background: rgba(15,23,42,0.78);
  color: #bae6fd;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.pp-hud-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pp-hud-gauge {
  --profile-pct: 0;
  --pp-tone: #22d3ee;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #e5e7eb;
  text-align: center;
}
.pp-hud-gauge.pp-tone-orange { --pp-tone: #f59e0b; }
.pp-hud-gauge.pp-tone-green { --pp-tone: #84cc16; }
.pp-hud-gauge.pp-tone-red { --pp-tone: #ef4444; }
.pp-gauge-ring {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #0f172a 0 52%, transparent 53%),
    conic-gradient(var(--pp-tone) calc(var(--profile-pct) * 1%), rgba(51,65,85,0.72) 0);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.08);
}
.pp-hud-gauge.is-empty .pp-gauge-ring {
  background:
    radial-gradient(circle at center, #0f172a 0 52%, transparent 53%),
    conic-gradient(rgba(71,85,105,0.45) 100%, rgba(51,65,85,0.72) 0);
}
.pp-gauge-ring span {
  color: #f8fafc;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0;
}
.pp-hud-gauge strong {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 950;
}
.pp-hud-gauge em {
  max-width: 100%;
  overflow: hidden;
  color: #94a3b8;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-street-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pp-street-card {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(15,23,42,0.72);
}
.pp-street-card > strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
}
.pp-bar-row {
  --pp-bar: #eab308;
  display: grid;
  grid-template-columns: 34px minmax(42px, 1fr) 38px;
  gap: 6px;
  align-items: center;
  min-height: 18px;
}
.pp-bar-row.pp-tone-orange { --pp-bar: #f59e0b; }
.pp-bar-row.pp-tone-green { --pp-bar: #22c55e; }
.pp-bar-row.pp-tone-red { --pp-bar: #ef4444; }
.pp-bar-row span,
.pp-bar-row strong {
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 900;
}
.pp-bar-row strong {
  color: #f8fafc;
  text-align: right;
}
.pp-bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(51,65,85,0.72);
}
.pp-bar-track i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pp-bar), var(--pp-bar));
}
.pp-bar-row.is-empty .pp-bar-track i {
  width: 0 !important;
}
.pp-bar-row.is-info {
  grid-template-columns: 1fr auto;
}
.pp-performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pp-performance-grid div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(15,23,42,0.72);
}
.pp-performance-grid span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
}
.pp-performance-grid strong {
  overflow-wrap: anywhere;
  color: #fbbf24;
  font-size: 16px;
  font-weight: 950;
}
.pp-mode-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 8px;
  background: rgba(15,23,42,0.72);
}
.pp-mode-filter span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
}
.pp-mode-filter strong {
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 950;
}
.pp-graph {
  display: grid;
  gap: 4px;
  padding: 8px 8px 6px;
  border-radius: 8px;
  background: rgba(15,23,42,0.72);
}
.pp-graph svg {
  width: 100%;
  height: 118px;
  display: block;
}
.pp-graph line {
  stroke: rgba(148,163,184,0.24);
  stroke-width: 0.5;
}
.pp-graph polyline {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 1.4;
}
.pp-graph circle {
  fill: #60a5fa;
  stroke: #1e40af;
  stroke-width: 0.8;
}
.pp-graph-labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}
.pp-graph-labels span {
  overflow: hidden;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-win-list {
  display: grid;
  gap: 7px;
}
.pp-win-total,
.pp-win-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(15,23,42,0.72);
}
.pp-win-total,
.pp-win-row span {
  min-width: 0;
  overflow: hidden;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-win-row strong {
  flex: 0 0 auto;
  color: #fbbf24;
  font-size: 11px;
  font-weight: 950;
}
.pp-empty,
.pp-loading,
.pp-error {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px dashed rgba(148,163,184,0.22);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.pp-error {
  color: #fca5a5;
  border-color: rgba(248,113,113,0.28);
}
@media (max-width: 480px) {
  .player-profile-sheet { padding: 12px; }
  .player-profile-card {
    max-height: min(88vh, 720px);
    max-height: min(88dvh, 720px);
  }
  .pp-hud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-street-grid { grid-template-columns: 1fr; }
  .pp-performance-grid { grid-template-columns: 1fr; }
  .pp-graph svg { height: 104px; }
}
@media (max-width: 360px) {
  .player-profile-main {
    grid-template-columns: 78px 1fr;
    gap: 10px;
    padding-inline: 12px;
  }
  .player-profile-avatar .avatar {
    width: 76px;
    height: 76px;
  }
  .player-profile-body { padding: 0 12px 16px; }
  .player-profile-actions { margin: 0 12px 12px; }
  .pp-current-rows { grid-template-columns: 1fr; }
}
.avatar-picker-sheet {
  position: fixed;
  inset: 0;
  z-index: 1380;
  display: flex;
  justify-content: center;
  background: #000;
  color: #f8fafc;
}
.avatar-picker-sheet.hidden { display: none; }
.avatar-picker-card {
  width: min(100vw, 480px);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  background: #000;
}
.avatar-picker-head {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  min-height: 60px;
}
.avatar-picker-head button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #a3a3a3;
  font-size: 64px;
  line-height: 36px;
  cursor: pointer;
}
.avatar-picker-head strong {
  color: #f8fafc;
  font-size: 31px;
  font-weight: 900;
  text-align: center;
}
.avatar-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 20px;
}
.avatar-picker-tabs button {
  min-width: 90px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  background: #242424;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  color: #d4d4d4;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.avatar-picker-tabs button.is-active {
  border-color: rgba(185,28,28,0.9);
  background: #a50f1d;
  color: #fff;
}
.avatar-picker-rule {
  height: 1px;
  margin: 0 0 14px;
  background: rgba(255,255,255,0.2);
}
.avatar-picker-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 20px 14px;
  padding: 0 8px 20px;
}
.avatar-option {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
}
.avatar-option-image {
  position: relative;
  width: min(76px, 19vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1f1f1f;
}
.avatar-option-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.avatar-option.is-selected .avatar-option-image {
  box-shadow: 0 0 0 4px #a50f1d;
}
.avatar-option-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: #a50f1d;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.avatar-option.is-selected .avatar-option-check { display: flex; }
.avatar-option-name {
  width: 100%;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
}
.avatar-picker-save {
  width: min(260px, 76vw);
  min-height: 58px;
  margin: 10px auto 0;
  border: 0;
  border-radius: 28px;
  background: #a50f1d;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  cursor: pointer;
}
.avatar-picker-save:disabled {
  opacity: .62;
  cursor: wait;
}
@media (max-width: 360px) {
  .avatar-picker-card { padding-left: 12px; padding-right: 12px; }
  .avatar-picker-tabs { gap: 7px; }
  .avatar-picker-tabs button {
    min-width: 82px;
    padding: 0 10px;
    font-size: 13px;
  }
  .avatar-picker-grid {
    gap: 17px 10px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .avatar-option-name { font-size: 12px; }
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row span {
  margin: 0;
  color: #e2e8f0;
  font-size: 13px;
}
.setting-row input {
  width: 42px;
  height: 24px;
  accent-color: #fbbf24;
}
/* Feature 1: volume slider — opt out of the 42px checkbox sizing above. */
.setting-row-range input[type="range"] {
  width: auto;
  flex: 1;
  height: 4px;
  min-width: 120px;
  accent-color: #fbbf24;
}
.setting-row-select select {
  min-width: 124px;
  min-height: 32px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(251,191,36,0.42);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(2,6,23,0.98));
  color: #f8fafc;
  font-size: 12px;
  font-weight: 850;
  outline: none;
  accent-color: #fbbf24;
}

.chat-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(50dvh, 460px);
  background: linear-gradient(180deg, #0f172a 0%, #0a1322 100%);
  border-top: 1px solid #1e293b;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.chat-panel.is-open { transform: translateY(0); }
.chat-panel.hidden { display: flex; transform: translateY(100%); pointer-events: none; }

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chat-panel-title { font-size: 13px; font-weight: 700; color: #fde68a; }
.chat-panel-close {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}

.chat-panel-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
}
.chat-panel-msgs .msg {
  padding: 3px 0;
  word-break: break-word;
  color: #e5e7eb;
}
.chat-panel-msgs .msg .nick {
  color: #fde68a;
  font-weight: 600;
  margin-right: 6px;
}
.chat-panel-msgs .msg.is-system {
  color: #9ca3af;
  font-style: italic;
  font-size: 12px;
}
.chat-panel-msgs .empty {
  color: #64748b;
  text-align: center;
  padding: 20px;
  font-size: 12px;
}

.chat-panel-form {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}
.chat-panel-form input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 14px;
  outline: none;
}
.chat-panel-form input:focus { border-color: rgba(251,191,36,0.5); }
.chat-panel-form button {
  background: linear-gradient(180deg, #facc15, #ca8a04);
  color: #1f2937;
  border: 0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.chat-panel-form button:active { transform: scale(0.96); }
.chat-panel-form button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── 베팅 사이즈 프리셋 ─── */
.raise-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.raise-presets .preset {
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.raise-presets .preset:active { transform: scale(0.96); }
.raise-presets .preset.is-selected {
  background: rgba(251, 191, 36, 0.32);
  border-color: #fbbf24;
  color: #fff;
}
.raise-presets .preset[data-preset="allin"] {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.48);
  color: #fecaca;
}
.raise-presets .preset[data-preset="allin"].is-selected {
  background: rgba(220, 38, 38, 0.4);
  color: #fff;
}
.raise-presets .preset:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ─── 포인트/BB 토글 버튼 ─── */
/* ─── 관전 배지 ─── */
.spectator-badge {
  background: rgba(59,130,246,0.18);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.chip-mode-toggle {
  margin-left: auto;
  background: rgba(251,191,36,0.18);
  color: #fde68a;
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 14px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  letter-spacing: 0.5px;
}
.chip-mode-toggle:active { transform: scale(0.95); }
.chip-mode-toggle.is-m {
  background: rgba(168,85,247,0.18);
  color: #d8b4fe;
  border-color: rgba(168,85,247,0.55);
}
.chip-mode-toggle.is-bb {
  background: rgba(56,189,248,0.18);
  color: #bae6fd;
  border-color: rgba(56,189,248,0.4);
}

/* ─── Phase 2: Pre-actions / Timer ring / Hand rank / Chip animation ──── */

/* Pre-action checkboxes — visible while hero waits for opponents to act. */
#preActions {
  display: flex;
  gap: 6px;
  font-size: 11px;
}
#preActions label {
  position: relative;
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid #334155;
  border-radius: 8px;
  min-height: 44px;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  color: #cbd5e1;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: manipulation;
}
#preActions input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#preActions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#preActions label:has(input:checked),
#preActions label.pa-on {
  background: rgba(251,191,36,0.18);
  border-color: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(251,191,36,0.3) inset;
}

/* Circular timer ring — wraps the active seat's avatar. SVG <circle> stroke
   shrinks via stroke-dashoffset (set by JS each tick). */
.timer-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 4px rgba(6,182,212,0.6));
}
.timer-ring-circle {
  fill: none;
  stroke: #06b6d4;
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: stroke 0.2s ease-out;
}

/* Hide the legacy linear action countdown bar — ring replaces it.
   Time-bank pill (🏦 Ns) still surfaces from the bar wrapper, so we keep
   the wrapper at zero height but allow inline children to show. */
#actionCountdown.action-countdown {
  display: flex;
  padding: 0;
  margin: 0;
  height: 0;
  overflow: visible;
  gap: 0;
}
#actionCountdown .action-countdown-bar { display: none; }
#actionCountdown #actionCountdownLabel { display: none; }
.time-bank-pill {
  position: absolute;
  top: -22px;
  right: 8px;
  z-index: 5;
}

/* Hand rank badge — shown above hero with current best hand */
.hand-rank-badge {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(251,191,36,0.95) 0%, rgba(245,158,11,0.95) 100%);
  color: #1f2937;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 12px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  box-shadow: 0 2px 10px rgba(251,191,36,0.5);
  z-index: 4;
  white-space: nowrap;
  letter-spacing: 0.3px;
  animation: handRankFadeIn 0.3s ease-out;
}
@keyframes handRankFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Showdown 결과 — 슬림 한 줄 배너. felt 안쪽 최상단(seats 시작 위치 위)
   에 띄워서 community cards / seats 어디도 가리지 않음. 쇼다운 참가자
   홀카드는 felt 자체에 그대로 표시되므로 팝업에 카드 row 없음. */
.hand-rank-popup {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translate(-50%, -8px);
  background: linear-gradient(135deg, rgba(251,191,36,0.94) 0%, rgba(245,158,11,0.94) 100%);
  color: #1f2937;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 4px 14px rgba(251,191,36,0.55);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.2, 1.4, 0.5, 1);
  pointer-events: none;
  max-width: 94%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hand-rank-popup.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.hand-rank-popup .winner-line { line-height: 1.2; }

/* Winning seat glow — applied for ~3.5s after hand_over so observers see
   which seats scooped (works for fold-walk wins too, where no hand rank
   is shown). Pulses gold around the avatar ring. */
.seat.is-winner .avatar-wrap,
#hero.is-winner .avatar-wrap {
  box-shadow: 0 0 0 3px #fbbf24, 0 0 24px rgba(251,191,36,0.7);
  animation: winnerGlow 0.6s ease-in-out infinite alternate;
  border-radius: 50%;
}
@keyframes winnerGlow {
  from { box-shadow: 0 0 0 3px #fbbf24, 0 0 18px rgba(251,191,36,0.5); }
  to   { box-shadow: 0 0 0 4px #fde68a, 0 0 38px rgba(251,191,36,1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .seat.is-winner .avatar-wrap,
  #hero.is-winner .avatar-wrap {
    animation: none;
    box-shadow: 0 0 0 4px #fbbf24, 0 0 24px rgba(251,191,36,0.8);
  }
}

/* Made-hand highlight — the 5 cards forming the winning hand (board +
   winner hole cards) get a gold lift while the result is held. Non-made
   cards are dimmed so the made hand reads at a glance, like the big sites. */
#felt .card.hl-made {
  box-shadow: 0 0 0 2px #fbbf24, 0 0 14px rgba(251,191,36,0.85);
  transform: translateY(-3px) scale(1.04);
  z-index: 6;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#felt #community .card:not(.hl-made):not(.placeholder),
#felt .seat .holes .card:not(.hl-made),
#felt #hero .holes .card:not(.hl-made) {
  /* Only dims once at least one made card is highlighted on the board. */
}
#felt #community:has(.hl-made) .card:not(.hl-made):not(.placeholder) {
  filter: brightness(0.62) saturate(0.8);
  transition: filter 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  #felt .card.hl-made { transform: none; }
}

/* All-in equity badge — small win% chip during the board run-out sweat.
   Anchored to table-surface bet-chip coordinates, never profile/card space. */
.equity-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
  z-index: 7;
  pointer-events: none;
  white-space: nowrap;
}

body.holdem-table-active #betChipLayer .table-bet-chip .equity-badge {
  top: auto;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

body.holdem-table-active #betChipLayer .equity-chip-anchor {
  position: absolute !important;
  width: 42px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

body.holdem-table-active #betChipLayer .equity-chip-anchor .equity-badge {
  top: auto;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
}

body.holdem-table-active #seats .seat > .equity-badge,
body.holdem-table-active #hero > .equity-badge {
  display: none !important;
}

/* Pot pulse on amount change */
#potDisplay .pot-amount.pulse {
  animation: potPulse 0.4s ease-out;
}
@keyframes potPulse {
  0%   { transform: scale(1);    color: #fbbf24; }
  50%  { transform: scale(1.18); color: #fef3c7; }
  100% { transform: scale(1);    color: #fbbf24; }
}

/* Flying chip — animated bet→pot transfer. Spawned via JS as a fixed-position
   div, transitions transform+opacity to fly from seat origin to pot center. */
.flying-chip {
  position: fixed;
  z-index: 100;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1f2937;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease-out;
  white-space: nowrap;
}

/* Hero seat — wrap for avatar + ring */
#hero .hero-avatar-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hero .hero-avatar-wrap .timer-ring {
  width: 44px; height: 44px;
}

/* Opponent seat — ring sized to fit around .avatar (48px) */
.seat .avatar-wrap .timer-ring {
  width: 60px; height: 60px;
}

/* ─── Phase 2: detail-view tabs (Structure / Payouts / Players / Tables) ─── */
.detail-tabs {
  display: flex;
  gap: 2px;
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 4px;
  margin: 10px 0 6px;
  position: sticky;
  top: calc(var(--holdem-page-sticky-top) + var(--holdem-topbar-height) + var(--holdem-detail-header-height));
  z-index: 5;
  backdrop-filter: blur(6px);
}
.detail-tab {
  flex: 1;
  padding: 12px 4px;             /* G-1: 8→12 vertical, ≥40px hit */
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  min-height: 40px;
  transition: all 0.15s;
  white-space: nowrap;
}
.detail-tab:hover {
  color: #cbd5e1;
  background: rgba(255,255,255,0.04);
}
.detail-tab.active {
  background: linear-gradient(180deg, rgba(251,191,36,0.22) 0%, rgba(245,158,11,0.12) 100%);
  color: #fbbf24;
  box-shadow: 0 0 0 1px rgba(251,191,36,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.detail-tab .muted-count {
  font-size: 10px;
  color: inherit;
  opacity: 0.7;
  margin-left: 2px;
}
.detail-panel {
  padding: 8px 0;
  min-height: 120px;
}
.detail-panel.hidden { display: none !important; }

.structure-help {
  margin: 2px 0 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0.88), rgba(8,13,24,0.88));
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 8px;
  color: #cbd5e1;
}
.structure-help-title {
  color: #fbbf24;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
}
.structure-help p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  word-break: keep-all;
}
.structure-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}
.structure-help-grid div {
  min-width: 0;
  padding: 8px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.structure-help-grid b {
  display: block;
  color: #e5e7eb;
  font-size: 12px;
  margin-bottom: 2px;
}
.structure-help-grid span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
  word-break: keep-all;
}
.structure-help .structure-help-note {
  color: #a7b5c8;
}

/* ─── Tournament detail redesign v1 ─────────────────────────────────────── */
body.holdem-detail-active {
  background:
    radial-gradient(ellipse 110% 42% at 50% -8%, rgba(40, 74, 128, 0.22), transparent 58%),
    linear-gradient(180deg, #050914 0%, #07111f 48%, #030711 100%) !important;
}

body.holdem-detail-active #detailView,
body.holdem-detail-active #detailBody {
  background: transparent !important;
}

body.holdem-detail-active #detailHeader {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 10px 14px 8px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.96), rgba(3, 7, 18, 0.72) 76%, rgba(3, 7, 18, 0));
  box-shadow: none;
}

body.holdem-detail-active #detailBack,
body.holdem-detail-active .detail-share-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f5c96b;
  font-size: 34px;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.holdem-detail-active .detail-share-btn {
  justify-self: end;
  font-size: 0;
}

.detail-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  gap: 5px;
  text-align: center;
}

body.holdem-detail-active #detailTitle {
  display: block;
  max-width: 100%;
  color: #f8fafc;
  font-size: clamp(18px, 5vw, 25px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}
body.holdem-detail-active #detailTitle .overflow-marquee-text__inner {
  line-height: inherit;
}

.detail-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
}

.detail-tags.is-empty {
  display: none;
}

.detail-tags span {
  flex: 0 1 auto;
  min-width: 0;
  padding: 4px 9px;
  border: 1px solid rgba(74, 144, 226, 0.38);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(28, 75, 153, 0.44), rgba(13, 44, 96, 0.54));
  color: #5fa8ff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.holdem-detail-active #detailBody {
  padding: 0 12px calc(92px + var(--holdem-safe-area-bottom));
}

body.holdem-detail-active #detailClock {
  display: none !important;
}

#detailBody #detailSummary.td-summary-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 27vw, 136px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(5px, 1.8vw, 10px);
  min-height: 112px;
  margin: 6px 0 16px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid rgba(234, 179, 8, 0.36);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 48%, rgba(250, 204, 21, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(16, 26, 46, 0.98), rgba(8, 18, 34, 0.98) 52%, rgba(4, 9, 19, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 44px rgba(0, 0, 0, 0.36);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#detailSummary.td-summary-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 26%, transparent 70%, rgba(255, 255, 255, 0.03)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.td-banner-prize,
.td-banner-time {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: visible;
}

.td-banner-time {
  text-align: right;
}

.td-banner-prize > span,
.td-banner-time > span {
  display: block;
  color: #aebbd0;
  font-size: 13px;
  font-weight: 750;
}

.td-banner-prize strong,
.td-banner-time strong {
  display: block;
  min-width: 0;
  margin-top: 6px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(24px, 6.2vw, 36px);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.td-banner-prize-value,
.td-banner-prize-value .td-banner-value-main,
.td-banner-prize-value .td-banner-value-unit,
.td-banner-prize-value .td-banner-value-empty {
  background: linear-gradient(180deg, #d9f6ff 0%, #8fdfff 45%, #42a8e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #8fdfff;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(80, 190, 255, 0.22);
}

.td-banner-time-value {
  background: linear-gradient(180deg, #e3f2ff 0%, #a9d8ff 50%, #5dadeb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #a9d8ff;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(90, 170, 255, 0.2);
}

.td-banner-value-unit {
  display: inline;
  margin-left: 3px;
  font-size: 0.62em;
  font-weight: 900;
  opacity: 0.9;
  vertical-align: baseline;
}

.td-banner-value-main,
.td-banner-value-empty {
  display: inline;
}

.td-banner-prize em,
.td-banner-time em {
  display: block;
  margin-top: 8px;
  color: #b7c2d2;
  font-size: clamp(11px, 3vw, 13px);
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.td-banner-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  max-width: 145px;
  height: 82px;
  justify-self: center;
}

.td-brand-123game {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  width: clamp(112px, 31vw, 145px);
  min-width: 0;
  padding: 11px 12px 13px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 244, 183, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(95, 65, 13, 0.24), rgba(6, 13, 26, 0.18));
  border-radius: 999px;
  filter: drop-shadow(0 13px 20px rgba(0, 0, 0, 0.48));
}

.td-brand-123game::before,
.td-brand-123game::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.78), transparent);
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.2);
}

.td-brand-123game::before {
  top: 8px;
}

.td-brand-123game::after {
  bottom: 8px;
}

.td-brand-123game strong,
.td-brand-123game span {
  position: relative;
  z-index: 1;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: 0;
  background: linear-gradient(180deg, #fff7c2 0%, #facc15 30%, #b9770e 68%, #fff0a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.35px rgba(105, 55, 5, 0.58);
  text-shadow:
    0 1px 0 rgba(255, 249, 196, 0.5),
    0 8px 18px rgba(0, 0, 0, 0.46),
    0 0 20px rgba(250, 204, 21, 0.2);
  white-space: nowrap;
}

.td-brand-123game strong {
  font-size: clamp(24px, 7vw, 34px);
}

.td-brand-123game span {
  margin-left: -2px;
  font-size: clamp(18px, 5.5vw, 27px);
}

.td-brand-123game i,
.td-brand-123game em {
  position: absolute;
  z-index: 0;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.td-brand-123game i {
  left: 10px;
  bottom: 7px;
  width: 29px;
  height: 14px;
  border: 1px solid rgba(250, 204, 21, 0.7);
  background: linear-gradient(180deg, #ffe18c, #8b5e13);
  box-shadow:
    9px -3px 0 -1px rgba(210, 139, 18, 0.92),
    15px 1px 0 -2px rgba(250, 204, 21, 0.75);
}

.td-brand-123game em {
  right: 16px;
  top: 12px;
  width: 5px;
  height: 5px;
  background: #fff4b8;
  box-shadow:
    12px 18px 0 -1px rgba(250, 204, 21, 0.9),
    -92px 8px 0 -1px rgba(250, 204, 21, 0.68);
}

body.holdem-detail-active .detail-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(66px, 1fr));
  gap: 0;
  margin: 0 0 14px;
  padding: 0;
  overflow-x: auto;
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 18px;
  background: rgba(8, 18, 34, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  scrollbar-width: none;
}

body.holdem-detail-active .detail-tabs::-webkit-scrollbar {
  display: none;
}

body.holdem-detail-active .detail-tab {
  min-height: 58px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.09);
  border-radius: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 850;
}

body.holdem-detail-active .detail-tab:last-child {
  border-right: 0;
}

body.holdem-detail-active .detail-tab.active {
  background: linear-gradient(180deg, rgba(177, 126, 20, 0.32), rgba(51, 38, 18, 0.54));
  color: #f8c63f;
  box-shadow: inset 0 -2px 0 #f8c63f, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.holdem-detail-active .detail-panel {
  padding: 0;
}

.td-core-card,
.td-info-card,
.td-accordion {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(42, 73, 119, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(12, 24, 43, 0.96), rgba(5, 13, 26, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 28px rgba(0, 0, 0, 0.24);
}

.td-core-card {
  padding: 16px 14px;
}

.td-core-top,
.td-core-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.td-core-top {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.td-core-bottom {
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.td-metric {
  min-width: 0;
  padding: 0 10px;
  border-right: 1px solid rgba(148, 163, 184, 0.18);
  text-align: center;
}

.td-metric:first-child {
  padding-left: 0;
}

.td-metric:last-child {
  padding-right: 0;
  border-right: 0;
}

.td-metric span,
.td-info-row span {
  display: block;
  color: #a7b2c4;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.td-metric strong,
.td-info-row strong {
  display: block;
  min-width: 0;
  margin-top: 5px;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.td-core-top .td-metric strong {
  color: #f8fafc;
}

.td-metric.is-chip strong {
  color: #dbeafe;
}

.td-metric.has-stack-display strong {
  margin-top: 6px;
}

.td-stack-display {
  display: flex;
  min-height: 39px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  line-height: 1.12;
}

.td-stack-display.is-empty {
  min-height: 39px;
  color: #f8fafc;
  font-size: 17px;
  font-weight: 900;
}

.td-stack-display__main {
  display: block;
  color: #f8fafc;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

.td-stack-display__sub {
  display: block;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.12;
  white-space: nowrap;
}

.td-core-bottom .td-stack-display__main {
  color: #eaf2ff;
}

.td-core-bottom .td-stack-display__sub {
  color: #d7e4f7;
}

.td-core-mid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}

.td-blind-summary,
.td-player-summary {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.td-info-row {
  min-width: 0;
}

.td-player-summary .td-info-row strong {
  color: #57d165;
}

.td-timer-ring {
  --td-progress: 0%;
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(#f8c63f var(--td-progress), rgba(148, 163, 184, 0.2) 0);
  box-shadow: 0 0 0 1px rgba(248, 198, 63, 0.14), 0 12px 24px rgba(0, 0, 0, 0.32);
}

.td-timer-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0a1425, #06101f);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.48);
}

.td-timer-ring > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.td-timer-ring span,
.td-timer-ring em {
  display: block;
  color: #bac5d6;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.td-timer-ring strong {
  display: block;
  margin: 5px 0;
  color: #f8fafc;
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.td-info-card {
  margin-top: 12px;
  padding: 16px 16px;
}

.td-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #f8c63f;
}

.td-section-title span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(248, 198, 63, 0.45);
  border-radius: 7px;
  color: #f8c63f;
  font-size: 16px;
}

.td-section-title strong {
  min-width: 0;
  color: #f8c63f;
  font-size: 18px;
  font-weight: 900;
}

.td-section-title small {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(203, 213, 225, 0.45);
  border-radius: 50%;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 900;
}

.td-info-card p {
  margin: 10px 0 0;
  color: #b8c3d4;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
  word-break: keep-all;
}

.td-info-card p.td-trophy-note {
  color: #f8c63f;
}

.td-info-card p.td-trophy-note strong {
  color: #fff1a8;
}

.td-structure-grid,
.td-rule-grid,
.td-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 14px;
}

.td-structure-grid .td-info-row,
.td-info-grid .td-info-row {
  position: relative;
  padding-left: 12px;
}

.td-structure-grid .td-info-row::before,
.td-info-grid .td-info-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f8c63f;
}

.td-rule-grid p {
  margin: 0;
  color: #b8c3d4;
  font-size: 14px;
  line-height: 1.45;
}

.td-rule-grid p.td-rule-compact {
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: -0.35px;
}

.td-accordion-list {
  display: grid;
  gap: 0;
  margin: 12px 0 6px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
}

.td-accordion {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: rgba(8, 18, 34, 0.88);
  box-shadow: none;
}

.td-accordion:last-child {
  border-bottom: 0;
}

.td-accordion summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
}

.td-accordion summary::-webkit-details-marker {
  display: none;
}

.td-accordion-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #f8c63f;
  font-size: 18px;
}

.td-accordion summary strong {
  color: #f8c63f;
  font-size: 17px;
  font-weight: 900;
}

.td-accordion summary em {
  justify-self: end;
  width: 12px;
  height: 12px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.td-accordion[open] summary em {
  transform: rotate(45deg);
}

.td-accordion-body {
  padding: 0 16px 16px 54px;
}

.td-empty {
  color: #aeb8c8;
  font-size: 13px;
  line-height: 1.45;
}

.td-prize-list,
.td-blind-list {
  display: grid;
  gap: 8px;
}

.td-mystery-accordion {
  display: grid;
  gap: 12px;
}

.td-mystery-subtitle {
  margin-top: 2px;
  color: #f8c63f;
  font-size: 13px;
  font-weight: 900;
}

.td-prize-row,
.td-blind-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.56);
}

.td-prize-row span,
.td-blind-row span {
  color: #f8c63f;
  font-size: 13px;
  font-weight: 900;
}

.td-prize-row strong,
.td-blind-row strong {
  min-width: 0;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-prize-row em,
.td-blind-row em {
  grid-column: 2;
  color: #93a4bb;
  font-size: 12px;
  font-style: normal;
}

.td-mystery-box-row.has-remaining em {
  color: #65e48a;
}

.td-mystery-box-row.is-empty strong,
.td-mystery-box-row.is-empty em {
  opacity: 0.58;
}

.td-mystery-award-row strong {
  white-space: normal;
  line-height: 1.28;
}

body.holdem-detail-active #detailMyStatus {
  margin: 12px 0 0;
  border-radius: 16px;
  background: rgba(34, 197, 94, 0.11);
  border-color: rgba(34, 197, 94, 0.32);
}

@media (min-width: 431px) and (max-width: 480px) {
  .td-banner-prize > span,
  .td-banner-time > span {
    font-size: 12px;
  }

  .td-banner-prize strong,
  .td-banner-time strong {
    font-size: clamp(14px, 3.35vw, 15.5px);
    letter-spacing: -0.4px;
  }

  .td-banner-value-unit {
    margin-left: 1px;
    font-size: 0.52em;
  }

  .td-banner-prize em,
  .td-banner-time em {
    font-size: 10px;
  }
}

@media (max-width: 430px) {
  #detailBody #detailSummary.td-summary-banner {
    grid-template-columns: minmax(0, 1fr) clamp(64px, 18vw, 78px) minmax(0, 1fr);
    gap: 4px;
    padding: 14px 8px;
  }

  .td-banner-prize > span,
  .td-banner-time > span {
    font-size: 11px;
  }

  .td-banner-prize strong,
  .td-banner-time strong {
    max-width: 100%;
    font-size: clamp(13.5px, 3.4vw, 15px);
    letter-spacing: -0.4px;
  }

  .td-banner-value-unit {
    margin-left: 1px;
    font-size: 0.5em;
  }

  .td-banner-prize em,
  .td-banner-time em {
    font-size: 9.5px;
  }

  .td-banner-art {
    max-width: 124px;
    height: 82px;
  }

  .td-brand-123game {
    width: clamp(104px, 29vw, 124px);
    padding: 10px 9px 12px;
  }

  .td-brand-123game strong {
    font-size: clamp(24px, 7vw, 34px);
  }

  .td-brand-123game span {
    font-size: clamp(18px, 5.5vw, 27px);
  }

  .td-brand-123game i {
    width: 24px;
    height: 12px;
    left: 8px;
  }

  .td-brand-123game em {
    right: 12px;
  }

  .td-core-card {
    padding: 14px 12px;
  }

  .td-core-mid {
    grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
    gap: 14px;
  }

  .td-timer-ring {
    justify-self: center;
  }

  .td-blind-summary,
  .td-player-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 390px) {
  #detailBody #detailSummary.td-summary-banner {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .td-banner-prize strong,
  .td-banner-time strong {
    font-size: 13.5px;
    letter-spacing: -0.4px;
  }

  .td-banner-art {
    max-width: 104px;
    height: 82px;
  }

  .td-brand-123game {
    width: 104px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .td-brand-123game strong {
    font-size: 26px;
  }

  .td-brand-123game span {
    font-size: 20px;
  }

  .td-banner-prize em,
  .td-banner-time em {
    font-size: 9.5px;
  }

  .td-rule-grid p.td-rule-compact {
    font-size: 12px;
    letter-spacing: -0.55px;
  }
}

@media (max-width: 360px) {
  body.holdem-detail-active #detailHeader {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .td-core-top,
  .td-core-bottom,
  .td-structure-grid,
  .td-rule-grid,
  .td-info-grid,
  .td-blind-summary,
  .td-player-summary {
    grid-template-columns: 1fr;
  }

  #detailBody #detailSummary.td-summary-banner {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    gap: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .td-banner-prize strong,
  .td-banner-time strong {
    font-size: 13px;
    letter-spacing: -0.4px;
  }

  .td-banner-art {
    display: grid;
    max-width: 86px;
    height: 82px;
  }

  .td-brand-123game {
    width: 86px;
    min-width: 86px;
    padding: 9px 5px 10px;
  }

  .td-brand-123game strong {
    font-size: 24px;
  }

  .td-brand-123game span {
    font-size: 18px;
  }

  .td-brand-123game i,
  .td-brand-123game em {
    display: none;
  }

  .td-metric {
    padding: 0;
    border-right: 0;
  }
}

/* ─── B-2: Prize ladder ───────────────────────────────────────────────── */
.prize-ladder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.prize-pool-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.prize-pool-split div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(15, 23, 42, 0.42));
}
.prize-pool-split span {
  display: block;
  color: #aeb8c8;
  font-size: 11px;
  font-weight: 800;
}
.prize-pool-split strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prl-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid #1e293b;
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.prl-row.rank-1 {
  background: linear-gradient(180deg, rgba(251,191,36,0.16), rgba(251,191,36,0.04));
  border-color: rgba(251,191,36,0.55);
}
.prl-row.rank-2 {
  background: linear-gradient(180deg, rgba(203,213,225,0.10), rgba(203,213,225,0.02));
  border-color: rgba(203,213,225,0.40);
}
.prl-row.rank-3 {
  background: linear-gradient(180deg, rgba(217,119,6,0.14), rgba(217,119,6,0.02));
  border-color: rgba(217,119,6,0.40);
}
.prl-rank-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  line-height: 1;
}
.prl-rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #334155;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
}
.prl-rank-label {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.4px;
}
.prl-row.rank-1 .prl-rank-label { color: #fbbf24; }
.prl-row.rank-2 .prl-rank-label { color: #cbd5e1; }
.prl-row.rank-3 .prl-rank-label { color: #fdba74; }
.prl-bar-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.prl-bar {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.prl-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #475569, #334155);
  border-radius: 3px;
  transition: width 0.3s ease-out;
}
.prl-row.rank-1 .prl-bar-fill { background: linear-gradient(90deg, #facc15, #ca8a04); }
.prl-row.rank-2 .prl-bar-fill { background: linear-gradient(90deg, #e2e8f0, #94a3b8); }
.prl-row.rank-3 .prl-bar-fill { background: linear-gradient(90deg, #fb923c, #c2410c); }
.prl-amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
}
.prl-row.rank-1 .prl-amount { color: #fde68a; }
.prl-pct {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.prl-row.rank-1 .prl-pct { color: #fbbf24; }

/* ─── Phase 3: card deal animation, fold fade, dealer entrance ──────── */

/* Card transitions live on the base .card so any transform change animates. */
.card {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease-out;
}
/* Initial state for freshly-dealt cards — JS removes the class on next frame
   to trigger the slide-in from above. */
.card.card-fresh {
  transform: translateY(-60px) scale(0.6) rotate(-12deg);
  opacity: 0;
}
.card.large.card-fresh {
  transform: translateY(-80px) scale(0.6) rotate(-18deg);
}

#community .card.flop-reveal-card {
  animation: holdemFlopReveal 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--flop-reveal-delay, 0ms);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity, box-shadow;
}

@keyframes holdemFlopReveal {
  0% {
    opacity: 0;
    transform: perspective(480px) rotateY(-58deg) scale(0.92);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }
  48% {
    opacity: 1;
    transform: perspective(480px) rotateY(6deg) scale(1.025);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.85),
      0 0 0 2px rgba(251,191,36,0.36),
      0 0 18px rgba(251,191,36,0.48),
      0 7px 11px rgba(0,0,0,0.5);
  }
  100% {
    opacity: 1;
    transform: perspective(480px) rotateY(0deg) scale(1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }
}

/* Fold fade — gently dim the seat instead of abrupt opacity jump. */
.seat {
  transition: opacity 0.45s ease-out;
}
#hero {
  transition: opacity 0.45s ease-out;
}

/* Phase A-7: floating dealer (D) button. Single element absolutely positioned
   inside #felt — JS sets `style.left` / `style.top` (in %) to the current
   dealer seat's coordinates each render. CSS transition handles the smooth
   slide between seats when dealer rotates between hands. */
#dealerBtn {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fef3c7 0%, #f59e0b 50%, #b45309 100%);
  color: #7f1d1d;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  z-index: 6;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.7s cubic-bezier(0.5, 0, 0.2, 1),
              top  0.7s cubic-bezier(0.5, 0, 0.2, 1);
  /* Default off-screen until first positioned. */
  left: -100px;
  top:  -100px;
}
#dealerBtn.hidden { display: none; }

/* Sound toggle reuses chip-mode-toggle styling but with a different active
   state (muted = dimmed). */
#soundToggle.is-muted {
  opacity: 0.55;
  color: #94a3b8;
}

/* Phase A-4: sit-out toggle. When active (sitting out) shows as red/dim;
   normal state is amber matching other topbar chips. */
#sitOutToggle.is-active {
  background: linear-gradient(180deg, rgba(239,68,68,0.22), rgba(185,28,28,0.12));
  color: #fca5a5;
  border-color: rgba(239,68,68,0.5);
}
#hero.sitting-out .hero-info {
  opacity: 0.55;
  border-color: rgba(239,68,68,0.6);
  box-shadow: 0 0 14px rgba(239,68,68,0.3);
}
#hero.sitting-out .hero-info::before {
  content: "관전 중";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(239,68,68,0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* Hand list (B-5) — shown in the "핸드" detail tab. Each row links to
   the replayer page. Card-style layout: top meta row, community preview, bottom action row. */
.hands-list .hand-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  background: linear-gradient(180deg, #131c30 0%, #0d1424 100%);
  border: 1px solid #1e293b;
  border-radius: 8px;
  margin-bottom: 5px;
  font-size: 12px;
  position: relative;
}
.hands-list .hand-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  border-radius: 8px 0 0 8px;
}
.hands-list .h-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hands-list .h-num {
  color: #fde68a;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2px;
}
.hands-list .h-lvl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: rgba(56,189,248,0.16);
  color: #7dd3fc;
  border: 1px solid rgba(56,189,248,0.30);
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
}
.hands-list .h-blinds {
  font-size: 11px;
  color: #cbd5e1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hands-list .h-time {
  font-size: 10.5px;
  color: #64748b;
  margin-left: auto;
  font-weight: 600;
}
.hands-list .h-cards {
  display: flex;
  gap: 4px;
  padding-left: 2px;
}
.hands-list .tiny-card {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 5px 2px 4px;
  background: #f8fafc;
  color: #1e293b;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 3px;
  font-family: ui-rounded, system-ui, sans-serif;
  letter-spacing: 0.2px;
  min-width: 22px;
  justify-content: center;
}
.hands-list .tiny-card.ts-hearts   { color: #dc2626; }
.hands-list .tiny-card.ts-diamonds { color: #1d4ed8; }
.hands-list .tiny-card.ts-clubs    { color: #15803d; }
.hands-list .tiny-card.ts-spades   { color: #1e293b; }
.hands-list .tiny-card .tiny-suit {
  font-size: 11px;
  line-height: 1;
}
.hands-list .h-row-bot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.hands-list .h-pot-label {
  font-size: 9.5px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.hands-list .h-pot {
  color: #fbbf24;
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.hands-list .h-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}
.hands-list .h-replay,
.hands-list .h-image {
  background: linear-gradient(180deg, #facc15, #ca8a04);
  color: #1f2937;
  text-decoration: none;
  padding: 9px 10px;             /* G-1: ≥36px hit target */
  border: 0;
  border-radius: 6px;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  cursor: pointer;
  font-family: inherit;
  min-height: 36px;
  white-space: nowrap;
}
.hands-list .h-image {
  background: rgba(15,23,42,0.94);
  color: #cbd5e1;
  border: 1px solid rgba(148,163,184,0.30);
}
.hands-list .h-replay:active,
.hands-list .h-image:active { transform: scale(0.97); }
@media (max-width: 390px) {
  .hands-list .h-row-bot { gap: 6px; }
  .hands-list .h-actions { gap: 4px; }
  .hands-list .h-replay,
  .hands-list .h-image {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 10px;
  }
}
.hands-list .empty {
  color: #64748b;
  text-align: center;
  padding: 24px 12px;
  font-size: 12px;
}
.hands-list .hand-list-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.hands-list .hand-list-more:hover {
  background: rgba(251,191,36,0.1);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.4);
}

/* Phase A-3: card flip-reveal animation. Fires when an opponent's hole
   cards transition from hidden to revealed (showdown). Uses Y-axis rotation
   with an over-rotate bounce for that "card flipping in" feel. */
@keyframes cardFlipIn {
  0%   { transform: rotateY(-180deg) scale(0.85); opacity: 0; }
  55%  { transform: rotateY(15deg)   scale(1.08); opacity: 1; }
  100% { transform: rotateY(0deg)    scale(1);    opacity: 1; }
}
.card.card-flipping {
  animation: cardFlipIn 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Phone felt tuning: Telegram webviews on Galaxy/iPhone have less usable
   height than the CSS viewport suggests, so keep the hero/name, pot, menu,
   and result panel in separate lanes. */
@media (max-width: 480px) {
  #app {
    padding-bottom: 140px;
  }
  #felt {
    height: calc(100vh - 222px);
    height: calc(100dvh - 222px);
    min-height: 350px;
    max-height: none;
  }
  #felt::after {
    top: 13%;
    left: 2%;
    right: 2%;
    bottom: 27%;
    border-radius: 50% / 40%;
  }
  #community {
    top: var(--holdem-board-top, 39.5%);
    gap: 3px;
  }
  #community .card {
    width: 34px;
    height: 48px;
  }
  #potDisplay {
    --holdem-pot-gap: 39px;
  }
  #potDisplay .pot-amount {
    font-size: 17px;
  }
  body.holdem-action-open #felt {
    height: var(--holdem-action-felt-height, calc(100dvh - 266px));
    min-height: 300px;
    --holdem-board-top: 34%;
    --holdem-pot-gap: 38px;
  }
  #hero {
    bottom: 18px;
  }
  body.holdem-action-open #hero {
    bottom: var(--holdem-action-hero-bottom, 14px);
  }
  body.holdem-action-open #hero .card.large {
    width: 48px;
    height: 67px;
  }
  body.holdem-action-open #hero .card.large .rank { font-size: 20px; }
  body.holdem-action-open #hero .card.large .suit { font-size: 23px; }
  #hero .holes {
    margin-bottom: 4px;
  }
  #hero .hero-info {
    padding: 4px 10px;
    gap: 6px;
  }
  #hero .hero-info .name {
    display: block;
    max-width: 112px;
    font-size: 11px;
  }
  #hero .hero-info .chips {
    font-size: 13px;
  }
  .hero-hand-strength {
    min-height: 22px;
    margin-bottom: 4px;
    padding: 3px 10px;
    font-size: 11px;
  }
  .table-tool-rail {
    left: max(8px, calc((100vw - 480px) / 2 + 8px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 326px);
  }
  .tool-menu-toggle {
    width: 38px;
    height: 38px;
  }
  .hand-result-modal {
    top: calc(env(safe-area-inset-top, 0px) + 112px);
    bottom: auto;
    width: min(352px, calc(100vw - 24px));
  }
  .hand-result-card {
    max-height: 34vh;
  }
  .hand-result-rows {
    max-height: calc(34vh - 28px);
    overflow-y: auto;
    padding: 6px;
  }
  .hand-result-row {
    grid-template-columns: minmax(54px, 0.85fr) minmax(82px, 1fr) auto;
    gap: 5px;
    padding: 5px 7px;
  }
  #felt.result-mode #community {
    transform: translate(-50%, -50%) scale(1.14);
  }
  #felt.result-mode .seat .holes {
    transform: translateX(-50%) scale(1.16);
  }
}

@media (max-width: 480px) and (max-height: 720px) {
  #felt {
    height: calc(100vh - 212px);
    height: calc(100dvh - 212px);
    min-height: 330px;
  }
  #community {
    top: var(--holdem-board-top, 38.5%);
  }
  #community .card {
    width: 31px;
    height: 44px;
  }
  #potDisplay {
    --holdem-pot-gap: 36px;
  }
  #hero {
    bottom: 14px;
  }
  #hero .card.large {
    width: 48px;
    height: 67px;
  }
  #hero .card.large .rank { font-size: 20px; }
  #hero .card.large .suit { font-size: 23px; }
  body[data-card-size="lg"] #hero .card.large {
    width: 52px;
    height: 72px;
  }
  .table-tool-rail {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 306px);
  }
  #actionPanel {
    gap: 3px;
    padding-top: 4px;
  }
  body.holdem-action-open #felt {
    height: var(--holdem-action-felt-height, calc(100dvh - 248px));
    min-height: 286px;
    --holdem-board-top: 30%;
    --holdem-pot-gap: 35px;
  }
  body.holdem-action-open #hero {
    bottom: var(--holdem-action-hero-bottom, 10px);
  }
  body.holdem-action-open #hero .card.large {
    width: 44px;
    height: 62px;
  }
  body.holdem-action-open #hero .card.large .rank { font-size: 18px; }
  body.holdem-action-open #hero .card.large .suit { font-size: 21px; }
  body.holdem-action-open .hero-hand-strength {
    max-width: min(210px, calc(100vw - 116px));
  }
  #actionButtons button {
    min-height: 44px;
    padding: 7px 0;
  }
  .bet-amount-preview {
    min-height: 30px;
    padding: 4px 9px;
  }
  .bet-amount-preview strong {
    font-size: 18px;
  }
}

/* Phase A-5: landscape (mobile rotated) — felt fills the viewport, action
   panel docks to the right as a vertical strip. Targets phones (max-height
   ≤ 540px in landscape); tablets keep the portrait layout via max-height. */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --holdem-landscape-panel-width: clamp(236px, 36vw, 280px);
  }
  #app {
    max-width: none;
    padding-bottom: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
  }
  #tableView {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #tableView.hidden {
    display: none !important;
  }
  /* Hide global topbar (잔고 chip) — too cramped in landscape mobile. */
  #topbar { display: none; }

  /* GG topbar stays at top, full width. */
  .gg-topbar {
    position: relative;
    top: auto;
    z-index: 12;
    flex: 0 0 auto;
    padding: 4px 6px;
  }
  #multiTableStrip {
    flex: 0 0 auto;
  }

  /* Felt: take all space minus right action panel. min-height must be
     cleared — the portrait 380px floor would otherwise make the felt taller
     than a short landscape viewport, pushing the hero + bottom seats off
     the bottom edge ("칸 날아감"). */
  #felt {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-right: 0;
    --holdem-board-top: 37%;
    --holdem-pot-gap: 36px;
  }
  body.holdem-action-panel-visible #felt {
    margin-right: var(--holdem-landscape-panel-width);
  }
  #felt::after {
    top: 10%;
    bottom: 22%;
  }
  #community .card {
    width: 32px;
    height: 45px;
  }

  /* Action panel becomes a right-docked column. */
  #actionPanel {
    position: fixed;
    top: var(--holdem-landscape-panel-top, 36px);
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--holdem-landscape-panel-width);
    max-width: none;
    border-top: 0;
    border-left: 1px solid #1e293b;
    overflow-y: auto;
    padding: 10px;
  }

  /* Compact spacings in the right column. */
  #actionPanel #actionButtons {
    gap: 6px;
  }
  #actionPanel #actionButtons button {
    min-height: 46px;
    padding: 9px 0;
  }
  #actionPanel #preActions {
    gap: 5px;
  }
  #actionPanel #preActions label {
    min-height: 42px;
    padding: 5px 6px;
  }

  .table-tool-rail {
    left: 10px;
    bottom: 76px;
  }
  .hand-result-modal {
    left: calc((100vw - 280px) / 2);
    bottom: 82px;
    width: min(340px, calc(100vw - 310px));
  }

  /* Hero stays at bottom of felt — verify it fits in shorter felt. */
  #hero { bottom: 12px; }
  /* Card sizes shrink slightly to fit reduced felt height. */
  #hero .card.large { width: 48px; height: 68px; }
  #hero .card.large .rank { font-size: 20px; }
  #hero .card.large .suit { font-size: 24px; }
}

/* ─── G-3: larger text mode (user-toggleable, persisted in localStorage) ──
   Scales key body/CTA text by ~15% without breaking dense status pills or
   numeric layouts. body[data-text-scale="lg"] is set by JS — see app.js. */
body[data-text-scale="lg"] {
  font-size: 16px;
}
body[data-text-scale="lg"] .tcard-head h3 { font-size: 15.5px; }
body[data-text-scale="lg"] .tcard-stats .stat .val { font-size: 13.5px; }
body[data-text-scale="lg"] .tcard-stats .stat .lbl { font-size: 10px; }
body[data-text-scale="lg"] .tcard-foot { font-size: 12px; }
body[data-text-scale="lg"] .tab { font-size: 14.5px; }
body[data-text-scale="lg"] .detail-tab { font-size: 13.5px; }
body[data-text-scale="lg"] #detailTitle { font-size: 18px; }
body[data-text-scale="lg"] #detailSummary .row .lbl { font-size: 13px; }
body[data-text-scale="lg"] #detailSummary .row .val { font-size: 14.5px; }
body[data-text-scale="lg"] #balance { font-size: 13.5px; }
body[data-text-scale="lg"] #title { font-size: 17px; }
body[data-text-scale="lg"] #endTitle { font-size: 30px; }
body[data-text-scale="lg"] #endSubtitle { font-size: 14.5px; }
body[data-text-scale="lg"] .tc-blinds-val { font-size: 24px; }
body[data-text-scale="lg"] .tc-next-val { font-size: 26px; }
body[data-text-scale="lg"] .tc-lvl-num { font-size: 36px; }
body[data-text-scale="lg"] #detailActions button { font-size: 16px; }
body[data-text-scale="lg"] .ab-label { font-size: 14px; }
body[data-text-scale="lg"] .ab-amount { font-size: 13.5px; }
body[data-text-scale="lg"] .leaders-list .lrow { font-size: 14px; }
body[data-text-scale="lg"] .hands-list .h-num { font-size: 14.5px; }
body[data-text-scale="lg"] .hands-list .h-pot { font-size: 14.5px; }
body[data-text-scale="lg"] .struct-chip { font-size: 12.5px; }
body[data-text-scale="lg"] .lobby-toolbar input { font-size: 14px; }
body[data-text-scale="lg"] .toast { font-size: 14px; }
body[data-text-scale="lg"] .err-headline { font-size: 15.5px; }
body[data-text-scale="lg"] .err-sub { font-size: 13.5px; }

/* ─── G-2: prefers-reduced-motion ────────────────────────────────────────
   Honor the OS-level "reduce motion" setting by neutralizing all cosmetic
   animations and transitions. Functional state changes still happen
   (display/visibility), they just no longer animate. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Cosmetic infinite/loop animations explicitly turned off — keeps the user
     from seeing a single 0.01ms flash of motion. */
  .trophy-svg.winner-rotate,
  .trophy-svg,
  .ptr-indicator.is-refreshing .ptr-spinner,
  .tcard-foot .countdown.urgent,
  .tcard-skel .sk-bar,
  .seat.toact .avatar,
  .action-countdown.is-danger #actionCountdownLabel,
  .tc-next-val.urgent,
  .starting-card,
  .confetti-piece,
  .allin-edge,
  .allin-text,
  .seat-ghost,
  .seat-ghost::after {
    animation: none !important;
  }
  .ptr-indicator.is-refreshing .ptr-spinner {
    transform: none !important;
  }
}

body[data-reduce-motion="1"] *,
body[data-reduce-motion="1"] *::before,
body[data-reduce-motion="1"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ─── WPL-style table skin override ─────────────────────────────────────
   Applied only during the table view. It keeps the existing DOM and game
   logic but changes the table to the tall leather/oval layout from the
   reference screenshots. */
body.holdem-table-active {
  background:
    radial-gradient(circle at 50% 0%, rgba(120,110,96,0.18), transparent 34%),
    radial-gradient(circle at 50% 46%, rgba(90,72,58,0.22), transparent 58%),
    linear-gradient(180deg, #0b0908 0%, #17110f 42%, #090807 100%);
  color: #e9e0d2;
}
body.holdem-table-active #app {
  max-width: 590px;
  min-height: 100dvh;
  padding-bottom: 96px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,0.05), transparent 22%),
    linear-gradient(90deg, rgba(0,0,0,0.32), transparent 14%, transparent 86%, rgba(0,0,0,0.32)),
    #120f0d;
  box-shadow: 0 0 42px rgba(0,0,0,0.85);
}
body.holdem-table-active #topbar {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(590px, 100vw);
  height: 64px;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(3,3,3,0.86), rgba(10,8,7,0.18));
  border: 0;
  z-index: 30;
}
body.holdem-table-active #title {
  width: 42px;
  height: 42px;
  font-size: 0;
}
body.holdem-table-active #title::before {
  content: "☰";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 30px;
  line-height: 1;
  color: #d7d1c8;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
body.holdem-table-active #balance {
  position: absolute;
  left: 82px;
  top: 12px;
  min-width: 92px;
  height: 42px;
  padding: 4px 12px;
  border: 2px solid rgba(245,239,221,0.68);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(24,24,23,0.94), rgba(8,8,8,0.92));
  color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.55);
}
body.holdem-table-active #balance::before {
  content: attr(data-hero-cards);
  display: block;
  color: #f7f2e8;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 2px;
  line-height: 1.05;
  text-align: center;
}
body.holdem-table-active #balance::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 3px auto 0;
  border-radius: 999px;
  background: #f0c32b;
}
body.holdem-table-active #balance b { display: none; }
body.holdem-table-active .text-scale-toggle {
  width: 42px;
  height: 42px;
  min-height: 42px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d7d1c8;
  font-size: 0;
}
body.holdem-table-active .text-scale-toggle::before {
  content: "🛒";
  font-size: 27px;
  line-height: 42px;
  filter: grayscale(1) brightness(1.25);
}
body.holdem-table-active #tableView {
  position: relative;
  padding-top: 70px;
  min-height: 100dvh;
}
body.holdem-table-active #multiTableStrip {
  display: none !important;
}
body.holdem-table-active .gg-topbar {
  position: absolute;
  top: 64px;
  left: 16px;
  right: 16px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 24;
  pointer-events: none;
}
body.holdem-table-active .gg-topbar-scroll {
  position: absolute;
  left: 0;
  top: 0;
  width: 224px;
  height: 52px;
  padding: 9px 12px;
  border: 1px solid rgba(210,206,196,0.28);
  background: rgba(43,42,38,0.84);
  color: #c9c2b7;
  font-size: 12px;
  line-height: 1.35;
  display: block;
  overflow: hidden;
}
body.holdem-table-active .gg-topbar-scroll::before {
  content: "1등 상금 -\A 인머니 순위 -";
  white-space: pre;
}
body.holdem-table-active .gg-topbar-left,
body.holdem-table-active .gg-topbar-right,
body.holdem-table-active #potInfo,
body.holdem-table-active #handInfo,
body.holdem-table-active #spectatorBadge {
  display: none !important;
}
body.holdem-table-active .gg-topbar-actions {
  pointer-events: auto;
  margin-left: auto;
  gap: 8px;
}
body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(18,18,17,0.72);
  color: #d6d0c6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.55);
}
body.holdem-table-active .table-snapshot-bar {
  display: none !important;
}
body.holdem-table-active #felt {
  height: calc(100dvh - 138px);
  min-height: 680px;
  max-height: none;
  margin: 0;
  overflow: hidden;
  transition: background 0.45s ease, box-shadow 0.45s ease;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,0.05), transparent 20%),
    radial-gradient(ellipse 80% 55% at 50% 44%, rgba(118,103,89,0.26), transparent 54%),
    linear-gradient(180deg, #17120f 0%, #231a16 46%, #0b0908 100%);
}
body.holdem-table-active #felt::before {
  content: "";
  position: absolute;
  top: 11%;
  left: 18%;
  right: 8%;
  bottom: 17%;
  border-radius: 48% / 36%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(110,102,92,0.18), transparent 34%),
    linear-gradient(180deg, rgba(63,57,51,0.94), rgba(46,41,37,0.97));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.07),
    inset 0 0 48px rgba(0,0,0,0.56),
    0 28px 42px rgba(0,0,0,0.72);
  pointer-events: none;
  z-index: 0;
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
body.holdem-table-active #felt::after {
  content: "";
  position: absolute;
  top: 9.4%;
  left: 14%;
  right: 4%;
  bottom: 15%;
  border: 16px solid rgba(95,86,77,0.72);
  border-radius: 48% / 36%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.13),
    inset 0 0 36px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.82),
    0 10px 22px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 1;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
body.holdem-table-active.holdem-final-table-bg {
  background:
    radial-gradient(ellipse 76% 34% at 50% 2%, rgba(238,178,70,0.14), transparent 44%),
    radial-gradient(ellipse 115% 70% at 50% 46%, rgba(73,28,92,0.28), transparent 64%),
    linear-gradient(180deg, #0b0712 0%, #170c18 45%, #080608 100%);
}
body.holdem-table-active.holdem-final-table-bg #app {
  background:
    radial-gradient(ellipse 88% 42% at 50% 10%, rgba(244,185,78,0.11), transparent 42%),
    linear-gradient(90deg, rgba(0,0,0,0.36), transparent 14%, transparent 86%, rgba(0,0,0,0.36)),
    #120a14;
}
body.holdem-table-active.holdem-final-table-bg #felt {
  background:
    radial-gradient(ellipse 72% 32% at 50% 9%, rgba(255,207,102,0.13), transparent 42%),
    radial-gradient(ellipse 86% 58% at 50% 43%, rgba(117,47,145,0.32), transparent 58%),
    radial-gradient(ellipse 105% 66% at 50% 78%, rgba(116,23,36,0.16), transparent 64%),
    linear-gradient(180deg, #160b1e 0%, #24102b 46%, #09070b 100%);
  box-shadow:
    inset 0 0 96px rgba(0,0,0,0.44),
    inset 0 0 120px rgba(238,178,70,0.06);
}
body.holdem-table-active.holdem-final-table-bg #felt::before {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(168,84,191,0.19), transparent 36%),
    radial-gradient(ellipse at 50% 72%, rgba(178,51,54,0.11), transparent 50%),
    linear-gradient(180deg, rgba(59,41,74,0.95), rgba(37,29,48,0.98));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 0 58px rgba(0,0,0,0.58),
    0 24px 52px rgba(0,0,0,0.74),
    0 0 62px rgba(216,159,55,0.11);
}
body.holdem-table-active.holdem-final-table-bg #felt::after {
  border-color: rgba(173,122,47,0.56);
  box-shadow:
    inset 0 0 0 1px rgba(255,238,187,0.16),
    inset 0 0 42px rgba(0,0,0,0.52),
    0 0 0 1px rgba(0,0,0,0.84),
    0 10px 24px rgba(0,0,0,0.78),
    0 0 28px rgba(223,166,62,0.16);
}
body.holdem-table-active #community {
  top: 42%;
  left: 52%;
  gap: 5px;
  z-index: 9;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.72));
}
body.holdem-table-active #community .card {
  width: 50px;
  height: 70px;
  border-radius: 6px;
}
body.holdem-table-active #community .card.placeholder {
  background: linear-gradient(180deg, #d3d0ca, #aaa69f);
  border: 0;
  opacity: 0.66;
}
body.holdem-table-active #community .card.placeholder::before {
  content: "♞";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(70,70,70,0.55);
  font-size: 30px;
}
body.holdem-table-active #potDisplay {
  top: 26%;
  left: 52%;
  min-width: 148px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  z-index: 8;
}
body.holdem-table-active #potDisplay .pot-tag {
  display: block;
  margin-bottom: 4px;
  color: #d7bc45;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}
body.holdem-table-active #potDisplay .pot-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(25,20,17,0.92), rgba(11,9,8,0.94));
  color: #ebcd34;
  font-size: 20px;
  font-weight: 950;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.64), 0 2px 7px rgba(0,0,0,0.45);
}
body.holdem-table-active #potDisplay .pot-amount::before {
  content: "🔵";
  margin-right: 12px;
  font-size: 13px;
}
body.holdem-table-active #potDisplay .pot-breakdown {
  display: none;
}
body.holdem-table-active #seats,
body.holdem-table-active #seatGhosts {
  z-index: 10;
}
body.holdem-table-active .seat {
  width: 82px;
  z-index: 11;
}
body.holdem-table-active .seat .avatar-wrap {
  width: 62px;
  height: 62px;
}
body.holdem-table-active .seat .avatar {
  width: 62px;
  height: 62px;
  border: 3px solid rgba(28,28,28,0.9);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.24), transparent 22%),
    linear-gradient(145deg, #b94d47, #254e80);
  color: #f8fafc;
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.55);
  box-shadow: 0 4px 9px rgba(0,0,0,0.72);
}
body.holdem-table-active .seat.toact .avatar,
body.holdem-table-active #hero.toact .hero-info .avatar {
  border-color: #f7e44a;
  box-shadow:
    0 0 0 4px rgba(240,225,50,0.26),
    0 0 22px rgba(240,225,50,0.86),
    0 4px 12px rgba(0,0,0,0.75);
  animation: none;
}
body.holdem-table-active .seat .holes {
  top: -25px;
  gap: 3px;
}
body.holdem-table-active .seat .holes .card {
  width: 31px;
  height: 43px;
  border-radius: 4px;
}
body.holdem-table-active .seat .holes .card .rank { font-size: 12px; }
body.holdem-table-active .seat .holes .card .suit { font-size: 14px; }
body.holdem-table-active .seat .name-pill {
  width: 72px;
  margin: -4px auto 0;
  padding: 10px 4px 5px;
  border: 0;
  border-radius: 5px;
  background: rgba(5,5,5,0.82);
  box-shadow: 0 3px 8px rgba(0,0,0,0.68);
}
body.holdem-table-active .seat .name-pill::before {
  content: "V";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  min-width: 36px;
  padding: 1px 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d53636, #8d1111);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}
body.holdem-table-active .seat .name {
  font-size: 12px;
  color: #d5d0c8;
  font-weight: 650;
}
body.holdem-table-active .seat .chips {
  font-size: 13px;
  color: #f7f1e4;
  font-weight: 800;
}
body.holdem-table-active .seat .commit {
  bottom: -31px;
  min-width: 48px;
  padding: 1px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f1e8dc;
  font-size: 15px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  box-shadow: none;
}
body.holdem-table-active .seat .commit::before {
  content: "🎲";
  display: block;
  margin-bottom: -2px;
  font-size: 20px;
}
body.holdem-table-active .seat .toact-badge {
  top: -18px;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #21d940, #05a31f);
  color: #050805;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
body.holdem-table-active #hero {
  bottom: 112px;
  width: 300px;
  min-height: 132px;
  z-index: 14;
}
body.holdem-table-active #hero .hero-info {
  position: absolute;
  left: 20px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 92px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .hero-avatar-wrap {
  width: 84px;
  height: 84px;
}
body.holdem-table-active #hero .hero-info .hero-avatar-wrap {
  margin: 0 auto;
}
body.holdem-table-active #hero .hero-info .avatar {
  border: 4px solid rgba(26,24,22,0.95);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.22), transparent 22%),
    linear-gradient(145deg, #b88946, #5d3c20);
  color: #fff;
  font-size: 30px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.72);
}
body.holdem-table-active #hero .hero-info::before {
  content: "V";
  position: absolute;
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
  min-width: 44px;
  padding: 1px 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d53636, #8d1111);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  z-index: 2;
}
body.holdem-table-active #hero .hero-info .name {
  width: 76px;
  max-width: 76px;
  margin: -2px auto 0;
  padding: 13px 3px 0;
  border-radius: 5px 5px 0 0;
  background: rgba(5,5,5,0.84);
  color: #ddd6cc;
  font-size: 13px;
  line-height: 1.2;
}
body.holdem-table-active #hero .hero-info .chips {
  width: 76px;
  margin: 0 auto;
  padding: 0 3px 6px;
  border-radius: 0 0 5px 5px;
  background: rgba(5,5,5,0.84);
  color: #f8f1e7;
  font-size: 14px;
  line-height: 1.2;
}
body.holdem-table-active #hero .holes {
  position: absolute;
  left: 128px;
  bottom: 28px;
  gap: 7px;
  margin: 0;
}
body.holdem-table-active #hero .card.large {
  width: 69px;
  height: 94px;
  border-radius: 7px;
}
body.holdem-table-active #hero .card.large .rank { font-size: 30px; }
body.holdem-table-active #hero .card.large .suit { font-size: 35px; }
body.holdem-table-active #hero .commit {
  position: absolute;
  left: 166px;
  bottom: -7px;
  min-width: 72px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #d8bd54;
  font-size: 16px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}
body.holdem-table-active .hero-hand-strength {
  position: absolute;
  left: 128px;
  bottom: -31px;
  width: 150px;
  max-width: 150px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d9bd48;
  font-size: 14px;
  line-height: 1.15;
  box-shadow: none;
  text-shadow: 0 2px 4px rgba(0,0,0,0.88);
}
body.holdem-table-active #actionPanel {
  max-width: 590px;
  padding: 0 4px calc(5px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: linear-gradient(180deg, rgba(12,12,12,0.08), rgba(0,0,0,0.82) 34%, #020202 100%);
  gap: 4px;
}
body.holdem-table-active .action-hint,
body.holdem-table-active .bet-amount-preview,
body.holdem-table-active #quickBets,
body.holdem-table-active #raiseSlider {
  margin: 0 2px;
  border-radius: 0;
  border-color: rgba(220,220,220,0.25);
  background: linear-gradient(180deg, rgba(58,58,58,0.92), rgba(18,18,18,0.94));
}
body.holdem-table-active #preActions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
body.holdem-table-active #preActions label {
  min-height: 76px;
  border-radius: 0;
  border-color: rgba(255,255,255,0.25);
  background: linear-gradient(180deg, #3d3d3d, #0f0f0f);
  color: #f5f1ea;
  font-size: 15px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 -1px 0 rgba(0,0,0,0.85);
}
body.holdem-table-active #preActions label:has(input:checked),
body.holdem-table-active #preActions label.pa-on {
  color: #f0c32b;
  border-color: rgba(240,195,43,0.78);
  background: linear-gradient(180deg, #4a4534, #111);
}
body.holdem-table-active #actionButtons {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
body.holdem-table-active #actionButtons button {
  min-height: 78px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.26);
  background: linear-gradient(180deg, #4c4c4c 0%, #171717 52%, #050505 100%) !important;
  color: #f6f1e9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -10px 18px rgba(0,0,0,0.36), 0 -1px 0 rgba(0,0,0,0.9);
}
body.holdem-table-active #actionButtons button .ab-label {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 950;
  text-shadow: 0 2px 3px rgba(0,0,0,0.92);
}
body.holdem-table-active #actionButtons button .ab-amount {
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
}
body.holdem-table-active #btnFold .ab-label,
body.holdem-table-active #btnFold .ab-amount {
  color: #f5f1e9;
}
body.holdem-table-active #btnCheckCall .ab-label,
body.holdem-table-active #btnCheckCall .ab-amount {
  color: #13bffc;
}
body.holdem-table-active #btnRaise .ab-label,
body.holdem-table-active #btnRaise .ab-amount {
  color: #f0c32b;
}
body.holdem-table-active .table-tool-rail {
  left: max(12px, calc((100vw - 590px) / 2 + 12px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 105px);
  z-index: 22;
}
body.holdem-table-active .tool-menu-toggle,
body.holdem-table-active .tool-rail-btn {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #d9d3c9;
  box-shadow: none;
}
body.holdem-table-active .hand-result-modal {
  top: 31%;
  bottom: auto;
  width: min(430px, calc(100vw - 36px));
}
body.holdem-table-active .hand-result-card {
  border-color: rgba(190,150,42,0.72);
  border-radius: 16px;
  background: rgba(25,23,21,0.92);
}

@media (max-width: 480px) {
  body.holdem-table-active #app {
    max-width: 100vw;
  }
  body.holdem-table-active #felt {
    height: calc(100dvh - 132px);
    min-height: 650px;
  }
  body.holdem-table-active #felt::before {
    left: 18%;
    right: 7%;
  }
  body.holdem-table-active #felt::after {
    left: 13%;
    right: 3%;
    border-width: 14px;
  }
  body.holdem-table-active #community {
    left: 52%;
    top: 41%;
    gap: 4px;
  }
  body.holdem-table-active #community .card {
    width: 45px;
    height: 63px;
  }
  body.holdem-table-active #potDisplay {
    top: 25%;
  }
  body.holdem-table-active .seat {
    transform: translate(-50%, -50%) scale(0.92);
  }
  body.holdem-table-active #hero {
    bottom: 105px;
    transform: translateX(-50%) scale(0.94);
    transform-origin: 50% 100%;
  }
  body.holdem-table-active #actionButtons button {
    min-height: 74px;
  }
}

@media (max-width: 480px) and (max-height: 720px) {
  body.holdem-table-active #felt {
    min-height: 590px;
  }
  body.holdem-table-active #community .card {
    width: 40px;
    height: 56px;
  }
  body.holdem-table-active #hero {
    bottom: 98px;
    transform: translateX(-50%) scale(0.86);
  }
  body.holdem-table-active .seat {
    transform: translate(-50%, -50%) scale(0.82);
  }
}

/* WPL responsive safety pass: keep top controls, pot, board, hero, and action
   buttons in separate lanes. This block intentionally comes after the visual
   skin so it wins the cascade on every viewport. */
body.holdem-table-active {
  --wpl-top-safe: 120px;
  --wpl-action-h: clamp(230px, 31dvh, 310px);
  --wpl-felt-h: max(620px, calc(100dvh - 128px));
  --wpl-board-top: 45%;
  --wpl-pot-top: 30%;
  --wpl-hero-bottom: 112px;
}
body.holdem-table-active.holdem-action-panel-visible,
body.holdem-table-active.holdem-action-open {
  --wpl-hero-bottom: calc(var(--wpl-action-h) + 22px);
  --wpl-board-top: 37%;
  --wpl-pot-top: 23%;
}
body.holdem-table-active #felt {
  height: var(--wpl-felt-h) !important;
  min-height: 0 !important;
  padding-top: var(--wpl-top-safe);
}
body.holdem-table-active #felt::before {
  top: 15%;
  left: clamp(86px, 18%, 150px);
  right: clamp(34px, 7%, 82px);
  bottom: calc(13% + env(safe-area-inset-bottom, 0px));
}
body.holdem-table-active #felt::after {
  top: 13%;
  left: clamp(68px, 14%, 126px);
  right: clamp(18px, 4%, 58px);
  bottom: 12%;
}
body.holdem-table-active #community {
  top: var(--wpl-board-top) !important;
  left: 52%;
  width: min-content;
  max-width: min(72vw, 440px);
  justify-content: center;
}
body.holdem-table-active #potDisplay {
  top: var(--wpl-pot-top) !important;
  left: 52%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 210px;
}
body.holdem-table-active #potDisplay .pot-amount {
  min-width: 130px;
}
body.holdem-table-active .gg-topbar {
  display: grid;
  grid-template-columns: minmax(138px, 224px) 1fr;
  gap: 12px;
  align-items: start;
}
body.holdem-table-active .gg-topbar-scroll {
  position: static;
  width: auto;
  max-width: 224px;
}
body.holdem-table-active .gg-topbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 12px);
  max-width: calc(100vw - 190px);
}
body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
  position: relative;
  flex: 0 0 clamp(38px, 7vw, 46px);
  width: clamp(38px, 7vw, 46px);
  height: clamp(38px, 7vw, 46px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0 !important;
  line-height: 1;
}
body.holdem-table-active #chipModeToggle::before {
  content: "P";
  font-size: 16px;
  font-weight: 950;
}
body.holdem-table-active #soundToggle::before {
  content: "🔇";
  font-size: 18px;
}
body.holdem-table-active #sitOutToggle::before {
  content: "Ⅱ";
  font-size: 18px;
  font-weight: 950;
}
body.holdem-table-active #forfeitToggle::before {
  content: "🚪";
  font-size: 18px;
}
body.holdem-table-active .seat {
  pointer-events: auto;
}
body.holdem-table-active .seat .name-pill {
  min-height: 72px;
}
body.holdem-table-active .seat .commit {
  bottom: -38px;
}
body.holdem-table-active #hero {
  bottom: var(--wpl-hero-bottom) !important;
  transition: bottom 160ms ease;
}
body.holdem-table-active.holdem-action-panel-visible #hero,
body.holdem-table-active.holdem-action-open #hero {
  z-index: 18;
}
body.holdem-table-active.holdem-action-panel-visible #actionPanel,
body.holdem-table-active.holdem-action-open #actionPanel {
  min-height: 0;
}
body.holdem-table-active #actionPanel {
  max-height: var(--wpl-action-h);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.holdem-table-active #actionPanel::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body.holdem-table-active #actionButtons {
  position: sticky;
  bottom: 0;
  background: rgba(0,0,0,0.86);
  padding-top: 4px;
}
body.holdem-table-active #actionButtons button {
  min-width: 0;
}

@media (min-width: 700px) {
  body.holdem-table-active {
    --wpl-felt-h: max(760px, calc(100dvh - 132px));
    --wpl-action-h: clamp(250px, 29dvh, 330px);
  }
  body.holdem-table-active #app,
  body.holdem-table-active #topbar,
  body.holdem-table-active #actionPanel {
    max-width: min(100vw, 720px);
    width: min(100vw, 720px);
  }
  body.holdem-table-active #topbar {
    width: min(100vw, 720px);
  }
}

@media (max-width: 520px) {
  body.holdem-table-active {
    --wpl-felt-h: max(590px, calc(100dvh - 118px));
    --wpl-action-h: clamp(214px, 30dvh, 284px);
    --wpl-hero-bottom: 96px;
  }
  body.holdem-table-active.holdem-action-panel-visible,
  body.holdem-table-active.holdem-action-open {
    --wpl-hero-bottom: calc(var(--wpl-action-h) + 14px);
    --wpl-board-top: 35%;
    --wpl-pot-top: 21%;
  }
  body.holdem-table-active #topbar {
    height: 58px;
    padding: 8px 12px;
  }
  body.holdem-table-active #balance {
    left: 68px;
    top: 10px;
    min-width: 82px;
    height: 38px;
  }
  body.holdem-table-active .gg-topbar {
    top: 58px;
    left: 10px;
    right: 10px;
    grid-template-columns: minmax(130px, 42vw) 1fr;
  }
  body.holdem-table-active .gg-topbar-scroll {
    height: 46px;
    padding: 7px 9px;
    font-size: 11px;
  }
  body.holdem-table-active .gg-topbar-actions {
    gap: 5px;
    max-width: calc(100vw - 155px);
  }
  body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
  body.holdem-table-active #community {
    max-width: 82vw;
    gap: 3px;
  }
  body.holdem-table-active #community .card {
    width: clamp(36px, 9.2vw, 45px);
    height: clamp(50px, 12.8vw, 63px);
  }
  body.holdem-table-active #potDisplay .pot-amount {
    min-width: 112px;
    min-height: 28px;
    font-size: 17px;
    padding: 4px 14px;
  }
  body.holdem-table-active .seat {
    transform: translate(-50%, -50%) scale(0.78);
  }
  body.holdem-table-active #hero {
    transform: translateX(-50%) scale(0.78);
    transform-origin: 50% 100%;
  }
  body.holdem-table-active #actionButtons button {
    min-height: 66px;
  }
  body.holdem-table-active #actionButtons button .ab-label {
    font-size: clamp(18px, 6vw, 24px);
  }
}

@media (max-width: 380px) {
  body.holdem-table-active {
    --wpl-action-h: 220px;
  }
  body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
  body.holdem-table-active .gg-topbar-scroll {
    width: 128px;
  }
  body.holdem-table-active .seat {
    transform: translate(-50%, -50%) scale(0.68);
  }
  body.holdem-table-active #hero {
    transform: translateX(-50%) scale(0.7);
  }
}

/* ─── Mobile poker app redesign ─────────────────────────────────────────
   Final table skin. This block owns the game-table visual system while the
   existing JS keeps all table state, turn, pot, and action behavior intact. */
body.holdem-table-active {
  --mp-screen-w: min(100vw, 600px);
  --mp-gold: #f2c228;
  --mp-gold-soft: #e0c75d;
  --mp-felt: #37322b;
  --mp-felt-dark: #231f1a;
  --mp-rail: #6a6257;
  --mp-panel: rgba(10, 9, 8, 0.88);
  --mp-line: rgba(237, 226, 205, 0.22);
  --mp-card-w: clamp(38px, 10vw, 54px);
  --mp-card-h: calc(var(--mp-card-w) * 1.42);
  --mp-hero-card-w: clamp(58px, 15vw, 74px);
  --mp-hero-card-h: calc(var(--mp-hero-card-w) * 1.42);
  --mp-pot-top: 33.5%;
  --mp-board-top: 49%;
  --mp-center-info-top: 59%;
  --mp-hero-bottom: 84px;
  --mp-action-h: clamp(210px, 29dvh, 300px);
  background:
    radial-gradient(ellipse at 50% 16%, rgba(96, 82, 68, 0.22), transparent 36%),
    radial-gradient(ellipse at 50% 64%, rgba(58, 39, 29, 0.36), transparent 58%),
    linear-gradient(180deg, #050504 0%, #17110e 44%, #060504 100%) !important;
  color: #eee6d8;
  overflow-x: hidden;
}
body.holdem-table-active.holdem-action-open,
body.holdem-table-active.holdem-action-panel-visible {
  --mp-hero-bottom: calc(var(--mp-action-h) + 34px);
}
body.holdem-table-active #app {
  width: var(--mp-screen-w) !important;
  max-width: var(--mp-screen-w) !important;
  min-height: 100dvh;
  padding-bottom: 0 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.42), transparent 13%, transparent 87%, rgba(0,0,0,0.42)),
    radial-gradient(ellipse at 50% 48%, rgba(68, 50, 38, 0.28), transparent 62%),
    #120e0b !important;
  box-shadow: 0 0 52px rgba(0,0,0,0.88);
}

body.holdem-table-active #topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--mp-screen-w) !important;
  max-width: var(--mp-screen-w) !important;
  height: 70px;
  padding: 10px 18px;
  border: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.35) 74%, transparent);
  z-index: 60;
}
body.holdem-table-active #title {
  position: absolute;
  left: 20px;
  top: 15px;
  width: 36px;
  height: 36px;
  font-size: 0 !important;
}
body.holdem-table-active #title::before {
  content: "☰";
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #ded7cc;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.92);
}
body.holdem-table-active #balance {
  position: absolute;
  left: 78px;
  top: 8px;
  min-width: 104px;
  height: 48px;
  padding: 4px 18px 7px;
  border: 2px solid rgba(232, 226, 210, 0.68);
  border-radius: 999px;
  background: linear-gradient(180deg, #171512 0%, #070707 100%);
  color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 5px 14px rgba(0,0,0,0.68);
}
body.holdem-table-active #balance::before {
  content: attr(data-hero-cards);
  display: block;
  color: #f7f1e5;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 1.5px;
}
body.holdem-table-active #balance::after {
  content: "";
  display: block;
  width: 54px;
  height: 5px;
  margin: 5px auto 0;
  border-radius: 999px;
  background: var(--mp-gold);
  box-shadow: 0 1px 6px rgba(242, 194, 40, 0.45);
}
body.holdem-table-active #balance b { display: none; }
body.holdem-table-active .text-scale-toggle {
  position: absolute;
  right: 18px;
  top: 13px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  color: transparent;
  font-size: 0 !important;
}
body.holdem-table-active .text-scale-toggle::before {
  content: "🛒";
  color: #ded7cc;
  font-size: 27px;
  line-height: 38px;
  filter: grayscale(1) brightness(1.3);
  opacity: 0.94;
}

body.holdem-table-active #tableView {
  position: relative;
  min-height: 100dvh;
  padding-top: 0 !important;
  overflow: hidden;
}
body.holdem-table-active #multiTableStrip,
body.holdem-table-active .table-snapshot-bar,
body.holdem-table-active #spectatorBadge,
body.holdem-table-active #handInfo,
body.holdem-table-active #potInfo {
  display: none !important;
}
body.holdem-table-active .gg-topbar {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--mp-screen-w);
  height: 72px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  z-index: 50;
  pointer-events: none;
}
body.holdem-table-active #leaveTable {
  position: absolute;
  left: 18px;
  top: 12px;
  width: 54px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(226, 220, 207, 0.22);
  border-radius: 14px;
  background: rgba(30, 27, 24, 0.72) !important;
  color: #ded7cc;
  font-size: 26px;
  line-height: 36px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.46);
  pointer-events: auto;
}
body.holdem-table-active .gg-topbar-scroll {
  position: absolute;
  left: 84px;
  right: 128px;
  top: 10px;
  width: auto !important;
  max-width: none;
  height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(229, 220, 201, 0.24);
  background: rgba(38, 35, 31, 0.76);
  color: #d1c9bb;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
}
body.holdem-table-active .gg-topbar-scroll::before {
  content: "1등 상금 -\A 인머니 순위 -";
  white-space: pre;
}
body.holdem-table-active .gg-topbar-left,
body.holdem-table-active .gg-topbar-right {
  display: none !important;
}
body.holdem-table-active .gg-topbar-actions {
  position: absolute;
  right: 18px;
  top: 10px;
  display: flex;
  gap: 7px;
  pointer-events: auto;
}
body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 50%;
  border: 1px solid rgba(232, 226, 210, 0.24);
  background: rgba(13, 12, 11, 0.78) !important;
  color: #e8ddca !important;
  font-size: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.58);
}
body.holdem-table-active #chipModeToggle::before { content: "P"; font-size: 15px; font-weight: 950; }
body.holdem-table-active #soundToggle::before { content: "♠"; font-size: 19px; color: #d8d0c4; }
body.holdem-table-active #sitOutToggle::before { content: "Ⅱ"; font-size: 17px; font-weight: 950; }
body.holdem-table-active #forfeitToggle::before { content: "▣"; font-size: 16px; color: #efd5a1; }

body.holdem-table-active #felt {
  position: relative;
  height: max(720px, 100dvh) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 48% 48%, rgba(96, 77, 63, 0.32), transparent 58%),
    linear-gradient(180deg, #18110e 0%, #211712 42%, #090706 100%);
}
body.holdem-table-active #felt::before {
  content: "";
  position: absolute;
  top: clamp(150px, 20dvh, 190px);
  left: clamp(68px, 15vw, 112px);
  right: clamp(24px, 6vw, 62px);
  bottom: clamp(116px, 15dvh, 158px);
  border-radius: 43% / 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(104, 96, 84, 0.28) 0%, rgba(66, 60, 52, 0.92) 42%, rgba(42, 37, 32, 0.98) 100%),
    var(--mp-felt);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.035),
    inset 0 0 56px rgba(0,0,0,0.58),
    0 30px 52px rgba(0,0,0,0.78);
  pointer-events: none;
  z-index: 0;
}
body.holdem-table-active #felt::after {
  content: "";
  position: absolute;
  top: clamp(135px, 18.2dvh, 174px);
  left: clamp(48px, 11vw, 92px);
  right: clamp(10px, 3.2vw, 42px);
  bottom: clamp(100px, 13dvh, 142px);
  border: clamp(8px, 2.3vw, 14px) solid rgba(108, 100, 88, 0.76);
  border-radius: 43% / 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 0 38px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.86),
    0 12px 26px rgba(0,0,0,0.72);
  pointer-events: none;
  z-index: 1;
}

body.holdem-table-active #potDisplay {
  top: var(--mp-pot-top) !important;
  left: 52%;
  width: max-content;
  min-width: 148px;
  max-width: 220px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  z-index: 12;
}
body.holdem-table-active #potDisplay .pot-tag {
  display: block;
  margin-bottom: 5px;
  color: var(--mp-gold-soft);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 7px;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}
body.holdem-table-active #potDisplay .pot-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  min-height: 34px;
  padding: 5px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 23, 20, 0.96), rgba(8, 7, 6, 0.98));
  color: #ffe53c;
  font-size: 21px;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.95);
  box-shadow: inset 0 3px 7px rgba(0,0,0,0.72), 0 5px 12px rgba(0,0,0,0.62);
}
body.holdem-table-active #potDisplay .pot-amount::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #8ec7ff 0 18%, #1f89f7 35%, #063f98 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
body.holdem-table-active #potDisplay .pot-breakdown {
  display: none;
}

body.holdem-table-active #community {
  top: var(--mp-board-top) !important;
  left: 52%;
  display: flex;
  justify-content: center;
  gap: clamp(5px, 1.4vw, 8px);
  width: min-content;
  max-width: 88vw;
  transform: translate(-50%, -50%) !important;
  z-index: 13;
  filter: drop-shadow(0 6px 7px rgba(0,0,0,0.62));
}
body.holdem-table-active .card,
body.holdem-table-active #community .card {
  min-width: 0;
  width: var(--mp-card-w);
  height: var(--mp-card-h);
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f2f2 100%);
  color: #161616;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 5px 8px rgba(0,0,0,0.48);
}
body.holdem-table-active .card .rank {
  font-size: calc(var(--mp-card-w) * 0.44);
  line-height: 0.95;
  letter-spacing: 0;
}
body.holdem-table-active .card .suit {
  font-size: calc(var(--mp-card-w) * 0.48);
  line-height: 0.95;
  margin-top: 1px;
}
body.holdem-table-active .card.spade { color: #181818; }
body.holdem-table-active .card.heart { color: #df2428; }
body.holdem-table-active .card.diamond { color: #2365e8; }
body.holdem-table-active .card.club { color: #18a64b; }
body.holdem-table-active .card.hidden-card,
body.holdem-table-active .card.back {
  border: 2px solid #f4e3b2;
  background:
    repeating-linear-gradient(45deg, rgba(250, 220, 160, 0.26) 0 3px, transparent 3px 7px),
    linear-gradient(135deg, #8f1615 0%, #c72925 50%, #7e1412 100%);
}
body.holdem-table-active .card.hidden-card::before,
body.holdem-table-active .card.back::before {
  inset: 5px;
  border-radius: 4px;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 5px);
}
body.holdem-table-active #community .card.placeholder {
  border: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0 8%, transparent 8%),
    linear-gradient(180deg, rgba(204,201,193,0.76), rgba(139,135,127,0.82));
  opacity: 0.7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 5px 8px rgba(0,0,0,0.42);
}
body.holdem-table-active #community .card.placeholder::before {
  content: "";
}

body.holdem-table-active .blind-info-panel {
  position: absolute;
  top: var(--mp-center-info-top);
  left: 52%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 3px;
  width: min(240px, 58vw);
  color: rgba(232, 226, 216, 0.74);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.96);
  z-index: 10;
  pointer-events: none;
}
body.holdem-table-active .blind-info-panel span {
  color: rgba(255,255,255,0.84);
}

body.holdem-table-active .break-overlay {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 32;
  display: grid;
  gap: 4px;
  width: min(280px, 70vw);
  padding: 14px 18px 13px;
  border: 1px solid rgba(251,191,36,0.55);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 29, 42, 0.94), rgba(7, 14, 24, 0.92));
  color: #f8fafc;
  text-align: center;
  box-shadow: 0 16px 36px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
}
body.holdem-table-active .break-overlay.hidden {
  display: none !important;
}
body.holdem-table-active .break-overlay-label {
  color: #fbbf24;
  font-size: 13px;
  font-weight: 900;
}
body.holdem-table-active .break-overlay-clock {
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.holdem-table-active .break-overlay.is-pending .break-overlay-label {
  color: #e2e8f0;
}
body.holdem-table-active .break-overlay.is-pending .break-overlay-clock {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

body.holdem-table-active #seats,
body.holdem-table-active #seatGhosts {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}
body.holdem-table-active .seat {
  width: 78px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 18;
}
body.holdem-table-active .seat .avatar-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 0 auto;
}
body.holdem-table-active .seat .avatar,
body.holdem-table-active .seat .lavatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(19, 17, 15, 0.96);
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,0.22), transparent 24%),
    linear-gradient(145deg, #604832 0%, #2e5675 100%) !important;
  color: #f5f5f4 !important;
  font-size: 24px;
  font-weight: 950;
  display: grid;
  place-items: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.78);
  box-shadow: 0 5px 12px rgba(0,0,0,0.72);
  overflow: hidden;
}
body.holdem-table-active .seat .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.holdem-table-active .seat.toact .avatar,
body.holdem-table-active .seat.toact .lavatar {
  border-color: #f5e63f;
  box-shadow:
    0 0 0 4px rgba(231, 239, 58, 0.28),
    0 0 24px rgba(214, 236, 54, 0.82),
    0 5px 12px rgba(0,0,0,0.78);
}
body.holdem-table-active .timer-ring {
  position: absolute;
  inset: -3px;
  width: 60px;
  height: 60px;
  z-index: 2;
  pointer-events: none;
}
body.holdem-table-active .timer-ring-circle {
  stroke: #23c8d8;
  stroke-width: 4;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(35, 200, 216, 0.7));
}
body.holdem-table-active .seat .name-pill {
  position: relative;
  width: 74px;
  min-height: 57px !important;
  margin: -2px auto 0;
  padding: 16px 5px 6px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(9,9,8,0.96), rgba(0,0,0,0.92));
  box-shadow: 0 5px 10px rgba(0,0,0,0.72);
  backdrop-filter: none;
}
body.holdem-table-active .seat .name-pill::before,
body.holdem-table-active #hero .hero-info::before {
  content: "V";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  min-width: 42px;
  padding: 1px 7px 2px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e13a36, #9f1113);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
body.holdem-table-active .seat .name {
  color: #f0ece4;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.holdem-table-active .seat .chips {
  color: #fff4df;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
body.holdem-table-active .seat .note-line {
  margin-top: 4px;
}
body.holdem-table-active .player-note-btn {
  min-width: 22px;
  min-height: 18px;
  padding: 0 6px;
  border-color: rgba(118, 151, 217, 0.5);
  background: rgba(18, 30, 59, 0.9);
  color: #b5c6ea;
}
body.holdem-table-active .player-note-tag {
  display: none;
}
body.holdem-table-active .seat .holes {
  position: absolute;
  display: flex;
  gap: 4px;
  z-index: 5;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.72));
}
body.holdem-table-active .seat .holes .card {
  width: 30px;
  height: 42px;
  border-radius: 5px;
}
body.holdem-table-active .seat .holes .card .rank { font-size: 13px; }
body.holdem-table-active .seat .holes .card .suit { font-size: 15px; }
body.holdem-table-active .seat-top .holes {
  left: 50%;
  top: -43px;
  transform: translateX(-50%);
}
body.holdem-table-active .seat-left .holes {
  left: 50%;
  top: -39px;
  transform: translateX(-30%);
}
body.holdem-table-active .seat-right .holes {
  right: 50%;
  left: auto;
  top: -39px;
  transform: translateX(30%);
}
body.holdem-table-active .seat-mid .holes {
  left: 50%;
  top: -43px;
  transform: translateX(-50%);
}
body.holdem-table-active .action-badge {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  z-index: 8;
  min-width: 52px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #070707;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,0.62);
}
body.holdem-table-active .seat-left .action-badge,
body.holdem-table-active .seat-right .action-badge {
  top: -12px;
}
body.holdem-table-active .toact-badge,
body.holdem-table-active .action-badge.toact-badge {
  background: linear-gradient(180deg, #26df46, #07a724);
}
body.holdem-table-active .fold-badge {
  background: linear-gradient(180deg, #f2f2ef, #a7a49d);
  color: #12100d;
}
body.holdem-table-active .allin-badge {
  background: linear-gradient(180deg, #ffdf44, #d99100);
}
body.holdem-table-active .wait-badge {
  background: linear-gradient(180deg, #87a0b8, #4c5e73);
  color: #fff;
}
body.holdem-table-active .role-badge {
  position: absolute;
  right: -9px;
  bottom: -7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffc83d, #e99407 72%, #9a4e00);
  color: #7b1800;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 2px 5px rgba(0,0,0,0.62);
  z-index: 7;
}
body.holdem-table-active #dealerBtn {
  display: none !important;
}
body.holdem-table-active .seat .commit {
  position: absolute;
  min-width: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f1eadf;
  font-size: 16px;
  font-weight: 950;
  text-shadow: 0 2px 5px rgba(0,0,0,0.92);
  box-shadow: none;
}
body.holdem-table-active .seat .commit::before {
  content: "";
  display: block;
  width: 22px;
  height: 18px;
  margin: 0 auto -1px;
  border-radius: 8px 8px 5px 5px;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 8%, transparent 9%),
    linear-gradient(90deg, #d92531 0 33%, #f3f3f3 33% 42%, #1b83f6 42% 66%, #f5f5f5 66% 75%, #2bb85f 75%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.65);
}
body.holdem-table-active .seat-top .commit { left: 50%; bottom: -31px; transform: translateX(-50%); }
body.holdem-table-active .seat-left .commit,
body.holdem-table-active .seat-right .commit {
  left: 50%;
  right: auto;
  top: 108px;
  bottom: auto;
  transform: translateX(-50%);
}
body.holdem-table-active .seat.folded {
  opacity: 0.62;
  filter: saturate(0.78) brightness(0.88);
}

body.holdem-table-active #hero {
  position: absolute;
  left: 50%;
  bottom: var(--mp-hero-bottom) !important;
  width: min(285px, 82vw);
  min-height: 132px;
  transform: translateX(-50%) !important;
  z-index: 24;
  transition: bottom 170ms ease;
  pointer-events: auto;
}
body.holdem-table-active #hero .hero-info {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 86px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  backdrop-filter: none;
}
body.holdem-table-active #hero .hero-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto;
}
body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .lavatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid rgba(24, 21, 18, 0.96);
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,0.22), transparent 24%),
    linear-gradient(145deg, #a89533, #604520) !important;
  color: #fff !important;
  display: grid;
  place-items: center;
  font-size: 31px;
  font-weight: 950;
  box-shadow: 0 7px 18px rgba(0,0,0,0.76);
  overflow: hidden;
}
body.holdem-table-active #hero.toact .hero-info .avatar,
body.holdem-table-active #hero.toact .hero-info .lavatar {
  border-color: #fff05b;
  box-shadow:
    0 0 0 6px rgba(238, 240, 75, 0.24),
    0 0 30px rgba(238, 240, 75, 0.88),
    0 7px 18px rgba(0,0,0,0.76);
  animation: none;
}
body.holdem-table-active #hero .hero-info::before {
  top: 65px;
  min-width: 48px;
}
body.holdem-table-active #hero .hero-info .name,
body.holdem-table-active #hero .hero-info .chips {
  width: 78px;
  margin: 0 auto;
  background: rgba(5,5,5,0.9);
  color: #f5efe4;
  text-align: center;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
body.holdem-table-active #hero .hero-info .name {
  margin-top: -1px;
  padding: 16px 4px 0;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  line-height: 1.12;
}
body.holdem-table-active #hero .hero-info .chips {
  padding: 1px 4px 7px;
  border-radius: 0 0 6px 6px;
  font-size: 15px;
  line-height: 1.14;
}
body.holdem-table-active #hero .holes {
  position: absolute;
  left: 118px;
  bottom: 38px;
  display: flex;
  gap: clamp(8px, 2vw, 12px);
  margin: 0;
  filter: drop-shadow(0 7px 9px rgba(0,0,0,0.62));
}
body.holdem-table-active #hero .card.large {
  width: var(--mp-hero-card-w);
  height: var(--mp-hero-card-h);
  border-radius: 8px;
}
body.holdem-table-active #hero .card.large .rank { font-size: calc(var(--mp-hero-card-w) * 0.44); }
body.holdem-table-active #hero .card.large .suit { font-size: calc(var(--mp-hero-card-w) * 0.52); }
body.holdem-table-active #hero .commit {
  position: absolute;
  left: 122px;
  right: 0;
  bottom: 13px;
  margin: 0;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #e6cc52;
  font-size: 18px;
  font-weight: 950;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.96);
}
body.holdem-table-active #hero .action-badge {
  top: -15px;
}
body.holdem-table-active .hero-hand-strength {
  position: absolute;
  left: 96px;
  right: 0;
  bottom: -29px;
  width: auto;
  max-width: none;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e7cf53;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.96);
  box-shadow: none;
}

body.holdem-table-active #actionPanel {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--mp-screen-w) !important;
  max-width: var(--mp-screen-w) !important;
  max-height: var(--mp-action-h);
  padding: 0 5px calc(8px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.82) 18%, #020202 100%);
  gap: 5px;
  z-index: 55;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.holdem-table-active #actionPanel.hidden {
  display: none !important;
}
body.holdem-table-active #actionPanel::-webkit-scrollbar { width: 0; height: 0; }
body.holdem-table-active .action-hint,
body.holdem-table-active .bet-amount-preview,
body.holdem-table-active #quickBets,
body.holdem-table-active #raiseSlider {
  margin: 0;
  border-radius: 0;
  border: 1px solid rgba(236, 229, 211, 0.25);
  background: linear-gradient(180deg, rgba(57,57,55,0.92), rgba(14,14,14,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
body.holdem-table-active .action-hint {
  min-height: 34px;
  padding: 7px 12px;
}
body.holdem-table-active .action-hint strong {
  color: #44cbff;
  font-size: 13px;
}
body.holdem-table-active .action-hint span {
  color: #f6e7ad;
  font-size: 13px;
}
body.holdem-table-active #quickBets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 4px;
}
body.holdem-table-active #quickBets.hidden { display: none !important; }
body.holdem-table-active #quickBets .preset {
  min-height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(94, 125, 181, 0.54);
  background: linear-gradient(180deg, #384457, #171b22);
  color: #ddd8ce;
  font-weight: 900;
}
body.holdem-table-active #raiseSlider {
  display: grid;
  grid-template-columns: 42px 1fr 42px 42px;
  align-items: center;
  gap: 5px;
  padding: 6px;
}
body.holdem-table-active #raiseSlider.hidden { display: none !important; }
body.holdem-table-active #raiseSlider output {
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--mp-gold);
  font-size: 20px;
  font-weight: 950;
}
body.holdem-table-active #actionButtons {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding-top: 5px;
  background: rgba(0,0,0,0.86);
}
body.holdem-table-active #actionButtons.hidden { display: none !important; }
body.holdem-table-active #actionButtons button {
  min-width: 0;
  min-height: 78px;
  border-radius: 0;
  border: 1px solid rgba(235, 229, 214, 0.26);
  background:
    linear-gradient(180deg, rgba(86,86,84,0.92) 0%, rgba(30,30,30,0.98) 48%, rgba(3,3,3,0.98) 100%) !important;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -12px 18px rgba(0,0,0,0.42);
  text-transform: uppercase;
}
body.holdem-table-active #actionButtons button .ab-label {
  font-size: clamp(22px, 6.8vw, 31px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 1px;
  text-shadow: 0 2px 3px rgba(0,0,0,0.95);
}
body.holdem-table-active #actionButtons button .ab-amount {
  margin-top: 2px;
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 950;
  line-height: 1.1;
}
body.holdem-table-active #btnFold .ab-label,
body.holdem-table-active #btnFold .ab-amount { color: #f3eee7; }
body.holdem-table-active #btnCheckCall .ab-label,
body.holdem-table-active #btnCheckCall .ab-amount { color: #18c8ff; }
body.holdem-table-active #btnRaise .ab-label,
body.holdem-table-active #btnRaise .ab-amount { color: var(--mp-gold); }
body.holdem-table-active #preActions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
body.holdem-table-active #preActions.hidden { display: none !important; }
body.holdem-table-active #preActions label {
  min-height: 66px;
  border-radius: 0;
  border: 1px solid rgba(235, 229, 214, 0.24);
  background: linear-gradient(180deg, #4b4b49 0%, #151515 100%);
  color: #f5efe6;
  font-size: 15px;
  font-weight: 950;
}

body.holdem-table-active .table-tool-rail {
  position: fixed;
  left: max(12px, calc((100vw - var(--mp-screen-w)) / 2 + 12px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  z-index: 56;
}
body.holdem-table-active .tool-menu-toggle,
body.holdem-table-active .tool-rail-btn {
  width: 42px;
  height: 42px;
  border: 0;
  background: rgba(25, 22, 18, 0.72);
  color: #e2d9ca;
  border-radius: 10px;
  box-shadow: none;
}
body.holdem-table-active .hand-result-modal {
  top: auto;
  bottom: calc(var(--mp-action-h) + 18px);
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 40px));
  z-index: 58;
}
body.holdem-table-active .hand-result-card {
  border-color: rgba(210, 167, 42, 0.72);
  border-radius: 14px;
  background: rgba(24, 22, 19, 0.94);
  box-shadow: 0 14px 32px rgba(0,0,0,0.72);
}
body.holdem-table-active .seat.is-winner .avatar-wrap,
body.holdem-table-active #hero.is-winner .hero-avatar-wrap {
  filter: drop-shadow(0 0 18px rgba(255, 228, 64, 0.95));
}

@media (min-width: 700px) {
  body.holdem-table-active {
    --mp-screen-w: min(100vw, 720px);
    --mp-card-w: clamp(44px, 7.4vw, 62px);
    --mp-hero-card-w: clamp(66px, 10vw, 82px);
  }
  body.holdem-table-active #felt {
    height: max(760px, 100dvh) !important;
  }
}

@media (max-width: 430px) {
  body.holdem-table-active {
    --mp-card-w: clamp(35px, 9.5vw, 43px);
    --mp-hero-card-w: clamp(54px, 14vw, 64px);
    --mp-hero-bottom: 78px;
  }
  body.holdem-table-active.holdem-action-open,
  body.holdem-table-active.holdem-action-panel-visible {
    --mp-hero-bottom: calc(var(--mp-action-h) + 25px);
  }
  body.holdem-table-active #topbar {
    height: 64px;
    padding: 8px 14px;
  }
  body.holdem-table-active #title { left: 15px; top: 13px; }
  body.holdem-table-active #balance {
    left: 66px;
    top: 7px;
    min-width: 94px;
    height: 45px;
    padding-left: 14px;
    padding-right: 14px;
  }
  body.holdem-table-active #balance::before { font-size: 16px; }
  body.holdem-table-active .text-scale-toggle { right: 14px; top: 11px; }
  body.holdem-table-active .gg-topbar {
    top: 64px;
    height: 66px;
    padding: 0 10px;
  }
  body.holdem-table-active #leaveTable {
    left: 10px;
    width: 42px;
    height: 38px;
  }
  body.holdem-table-active .gg-topbar-scroll {
    left: 60px;
    right: 112px;
    height: 44px;
    padding: 7px 9px;
    font-size: 12px;
  }
  body.holdem-table-active .gg-topbar-actions {
    right: 10px;
    gap: 5px;
  }
  body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }
  body.holdem-table-active #felt::before {
    top: 142px;
    left: 64px;
    right: 28px;
    bottom: 110px;
  }
  body.holdem-table-active #felt::after {
    top: 130px;
    left: 45px;
    right: 16px;
    bottom: 96px;
    border-width: 10px;
  }
  body.holdem-table-active #potDisplay .pot-amount {
    min-width: 126px;
    min-height: 30px;
    font-size: 18px;
  }
  body.holdem-table-active #community {
    gap: 4px;
  }
  body.holdem-table-active .blind-info-panel {
    width: min(225px, 64vw);
    font-size: 11px;
  }
  body.holdem-table-active .seat {
    transform: translate(-50%, -50%) scale(0.86);
  }
  body.holdem-table-active #hero {
    width: min(255px, 86vw);
  }
  body.holdem-table-active #hero .hero-info {
    left: 0;
    transform: scale(0.9);
    transform-origin: 0 100%;
  }
  body.holdem-table-active #hero .holes {
    left: 100px;
    bottom: 43px;
  }
  body.holdem-table-active #hero .commit {
    left: 100px;
    bottom: 21px;
  }
  body.holdem-table-active .hero-hand-strength {
    left: 84px;
    bottom: -16px;
    font-size: 13px;
  }
  body.holdem-table-active #actionButtons button {
    min-height: 70px;
  }
}

@media (max-height: 760px) {
  body.holdem-table-active {
    --mp-pot-top: 32%;
    --mp-board-top: 47%;
    --mp-center-info-top: 57%;
    --mp-action-h: 216px;
  }
  body.holdem-table-active #felt {
    height: max(660px, 100dvh) !important;
  }
  body.holdem-table-active .seat {
    transform: translate(-50%, -50%) scale(0.78);
  }
  body.holdem-table-active #hero {
    transform: translateX(-50%) scale(0.82) !important;
    transform-origin: 50% 100%;
  }
}

/* ─── Reference-style structural pass ────────────────────────────────────
   This final layer replaces the old seat/table composition visually. It keeps
   legacy hook classes only so chip movement, dealer movement, and winner
   animation code can continue to target the same DOM nodes. */
body.holdem-table-active {
  --mp-screen-w: min(100vw, 720px);
  --mp-app-bg: #110d0a;
  --mp-gold: #f3c528;
  --mp-gold-2: #ffe553;
  --mp-cyan: #22c8ee;
  --mp-green: #0ecf36;
  --mp-panel-black: rgba(5, 5, 4, 0.92);
  --mp-ui-line: rgba(232, 226, 211, 0.28);
  --mp-card-w: clamp(42px, 8.2vw, 58px);
  --mp-card-h: calc(var(--mp-card-w) * 1.42);
  --mp-hero-card-w: clamp(58px, 10.4vw, 70px);
  --mp-hero-card-h: calc(var(--mp-hero-card-w) * 1.42);
  --mp-seat-avatar: clamp(45px, 8.8vw, 56px);
  --mp-seat-panel-w: clamp(66px, 12vw, 78px);
  --mp-hero-avatar: clamp(66px, 12vw, 78px);
  --mp-pot-top: 32%;
  --mp-board-top: 47%;
  --mp-center-info-top: 57%;
  --mp-hero-bottom: clamp(48px, 8dvh, 78px);
  --mp-action-h: clamp(190px, 25dvh, 250px);
  --mp-table-top: clamp(168px, 23dvh, 218px);
  --mp-table-side: clamp(44px, 9vw, 82px);
  --mp-table-bottom: clamp(118px, 15dvh, 162px);
  background:
    radial-gradient(ellipse at 52% 17%, rgba(78, 61, 46, 0.28), transparent 38%),
    radial-gradient(ellipse at 50% 66%, rgba(54, 33, 25, 0.42), transparent 62%),
    linear-gradient(180deg, #040302 0%, #1a110d 43%, #050403 100%) !important;
}

body.holdem-table-active.holdem-action-open,
body.holdem-table-active.holdem-action-panel-visible {
  --mp-pot-top: 30%;
  --mp-board-top: 41%;
  --mp-center-info-top: 51%;
  --mp-hero-bottom: calc(var(--mp-action-h) + 16px);
  --mp-hero-card-w: clamp(54px, 9vw, 64px);
}

body.holdem-table-active #app {
  width: var(--mp-screen-w) !important;
  max-width: var(--mp-screen-w) !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.54), transparent 14%, transparent 86%, rgba(0,0,0,0.54)),
    radial-gradient(ellipse at 50% 41%, rgba(68, 50, 38, 0.36), transparent 68%),
    var(--mp-app-bg) !important;
}

body.holdem-table-active #topbar {
  width: var(--mp-screen-w) !important;
  height: 72px;
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(3,3,2,0.98), rgba(5,4,3,0.82) 68%, rgba(5,4,3,0.08));
}

body.holdem-table-active #title {
  left: 23px;
  top: 19px;
  width: 32px;
  height: 32px;
}

body.holdem-table-active #title::before {
  width: 32px;
  height: 32px;
  font-size: 29px;
  color: #ddd7cd;
}

body.holdem-table-active #balance {
  left: 88px;
  top: 8px;
  min-width: 124px;
  height: 52px;
  padding: 5px 21px 8px;
  border: 2px solid rgba(226, 221, 207, 0.72);
  background: linear-gradient(180deg, #171512, #030303);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -10px 18px rgba(0,0,0,0.52),
    0 7px 16px rgba(0,0,0,0.78);
}

body.holdem-table-active #balance::before {
  font-size: 20px;
  letter-spacing: 1px;
}

body.holdem-table-active #balance::after {
  width: 58px;
  height: 5px;
  margin-top: 6px;
}

body.holdem-table-active .text-scale-toggle {
  right: 24px;
  top: 15px;
}

body.holdem-table-active .gg-topbar {
  top: 76px;
  height: 72px;
  padding: 0 22px;
}

body.holdem-table-active #leaveTable {
  left: 22px;
  top: 15px;
  width: 54px;
  height: 42px;
  border-radius: 15px;
  background: rgba(30, 29, 26, 0.82) !important;
}

body.holdem-table-active .gg-topbar-scroll {
  left: 96px;
  right: 152px;
  top: 13px;
  height: 44px;
  padding: 8px 13px;
  border-color: rgba(238, 231, 212, 0.24);
  background: rgba(38, 35, 31, 0.62);
  font-size: 14px;
}

body.holdem-table-active .gg-topbar-actions {
  top: 13px;
  right: 22px;
  gap: 8px;
}

body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
  border-radius: 50%;
  background: rgba(7, 7, 6, 0.82) !important;
}

body.holdem-table-active #felt {
  height: max(760px, 100dvh) !important;
  background:
    radial-gradient(ellipse at 50% 27%, rgba(75, 56, 43, 0.32), transparent 46%),
    linear-gradient(180deg, #090706 0%, #1b120e 38%, #070504 100%) !important;
}

body.holdem-table-active #felt::before {
  top: var(--mp-table-top);
  left: var(--mp-table-side);
  right: var(--mp-table-side);
  bottom: var(--mp-table-bottom);
  border-radius: 46% / 42%;
  border: 1px solid rgba(10, 9, 8, 0.92);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 7%, transparent 93%, rgba(0,0,0,0.24)),
    radial-gradient(ellipse at 50% 42%, rgba(112, 102, 88, 0.72), rgba(69, 63, 54, 0.98) 52%, rgba(42, 37, 31, 1) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.11),
    inset 0 0 28px rgba(0,0,0,0.52),
    0 24px 48px rgba(0,0,0,0.82);
}

body.holdem-table-active #felt::after {
  top: calc(var(--mp-table-top) + clamp(12px, 1.8vw, 18px));
  left: calc(var(--mp-table-side) + clamp(11px, 1.7vw, 17px));
  right: calc(var(--mp-table-side) + clamp(11px, 1.7vw, 17px));
  bottom: calc(var(--mp-table-bottom) + clamp(12px, 1.8vw, 18px));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 45% / 41%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(82, 75, 64, 0.72), transparent 62%),
    radial-gradient(ellipse at 50% 70%, rgba(22, 19, 16, 0.38), transparent 72%),
    linear-gradient(180deg, #403a31 0%, #312d27 48%, #28241f 100%);
  box-shadow:
    inset 0 0 56px rgba(0,0,0,0.52),
    inset 0 0 0 4px rgba(13, 11, 10, 0.72),
    0 0 0 1px rgba(0,0,0,0.82);
}

body.holdem-table-active #potDisplay {
  top: var(--mp-pot-top) !important;
  left: 50%;
  min-width: 150px;
  z-index: 20;
}

body.holdem-table-active #potDisplay .pot-tag {
  margin-bottom: 7px;
  color: #d7bf43;
  font-size: 14px;
  letter-spacing: 8px;
}

body.holdem-table-active #potDisplay .pot-amount {
  min-width: 148px;
  min-height: 38px;
  padding: 4px 24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06), transparent 54%),
    linear-gradient(180deg, #1e1915, #080705);
  color: var(--mp-gold-2);
  font-size: 24px;
  box-shadow:
    inset 0 5px 10px rgba(0,0,0,0.76),
    0 6px 14px rgba(0,0,0,0.72);
}

body.holdem-table-active #potDisplay .pot-amount::before {
  width: 16px;
  height: 16px;
  margin-right: 15px;
}

body.holdem-table-active #community {
  top: var(--mp-board-top) !important;
  left: 50%;
  gap: clamp(5px, 1.2vw, 9px);
  z-index: 19;
}

body.holdem-table-active .card,
body.holdem-table-active #community .card {
  width: var(--mp-card-w);
  height: var(--mp-card-h);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(239,242,245,0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 6px 9px rgba(0,0,0,0.52);
}

body.holdem-table-active .card .rank {
  font-size: calc(var(--mp-card-w) * 0.42);
  font-weight: 950;
}

body.holdem-table-active .card .suit {
  font-size: calc(var(--mp-card-w) * 0.5);
}

body.holdem-table-active .card.hidden-card,
body.holdem-table-active .card.back {
  border: 2px solid #f5dfad;
  background:
    repeating-linear-gradient(45deg, rgba(255,234,186,0.28) 0 3px, transparent 3px 8px),
    linear-gradient(135deg, #841716, #d12b26 52%, #70100e);
}

body.holdem-table-active #community .card.placeholder {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2) 0 10%, transparent 10%),
    linear-gradient(180deg, rgba(196,193,183,0.76), rgba(139,134,123,0.78));
  opacity: 0.72;
}

body.holdem-table-active .blind-info-panel {
  top: var(--mp-center-info-top);
  left: 50%;
  width: min(260px, 62vw);
  color: rgba(231, 225, 214, 0.72);
  font-size: 12px;
  z-index: 11;
}

body.holdem-table-active.holdem-action-open .blind-info-panel,
body.holdem-table-active.holdem-action-panel-visible .blind-info-panel {
  opacity: 0.78;
}

body.holdem-table-active .seat {
  width: 104px;
  min-height: 112px;
  transform: translate(-50%, -50%);
  overflow: visible;
}

body.holdem-table-active .mobile-seat-card {
  position: relative;
  width: 100%;
  min-height: 112px;
}

body.holdem-table-active .seat .avatar-wrap,
body.holdem-table-active .seat-avatar-shell {
  position: relative;
  width: var(--mp-seat-avatar);
  height: var(--mp-seat-avatar);
  margin: 0 auto;
  z-index: 4;
}

body.holdem-table-active .seat .avatar,
body.holdem-table-active .seat .lavatar,
body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .lavatar {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(12, 11, 10, 0.92);
  color: transparent !important;
  text-shadow: none !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.26), transparent 22%),
    radial-gradient(circle at 52% 50%, hsla(var(--avatar-hue, 205), 48%, 48%, 0.9), hsla(var(--avatar-hue, 205), 52%, 22%, 0.98) 72%),
    linear-gradient(145deg, #35455a, #171717) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 6px 14px rgba(0,0,0,0.76);
}

body.holdem-table-active .avatar-fallback::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54%;
  height: 54%;
  transform: translate(-50%, -46%);
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.28), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.18));
  opacity: 0.8;
}

body.holdem-table-active .avatar-letter {
  position: absolute;
  right: 7px;
  bottom: 5px;
  z-index: 2;
  color: rgba(255,255,255,0.78);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

body.holdem-table-active .seat.toact .avatar,
body.holdem-table-active .seat.toact .lavatar,
body.holdem-table-active #hero.toact .hero-info .avatar,
body.holdem-table-active #hero.toact .hero-info .lavatar {
  border-color: #fff45d;
  box-shadow:
    0 0 0 5px rgba(244, 236, 55, 0.26),
    0 0 26px rgba(230, 237, 58, 0.76),
    0 7px 16px rgba(0,0,0,0.82);
}

body.holdem-table-active .timer-ring {
  inset: -7px;
  width: calc(var(--mp-seat-avatar) + 14px);
  height: calc(var(--mp-seat-avatar) + 14px);
  z-index: 6;
}

body.holdem-table-active #hero .timer-ring {
  inset: -8px;
  width: calc(var(--mp-hero-avatar) + 16px);
  height: calc(var(--mp-hero-avatar) + 16px);
}

body.holdem-table-active .timer-ring-circle {
  stroke: var(--mp-cyan);
  stroke-width: 4;
}

body.holdem-table-active .seat-v-badge {
  position: absolute;
  left: 50%;
  bottom: -9px;
  min-width: 42px;
  padding: 1px 8px 2px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #e23a35, #a50f11);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.12;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.55);
  z-index: 8;
}

body.holdem-table-active .seat .name-pill::before,
body.holdem-table-active #hero .hero-info::before {
  content: none !important;
}

body.holdem-table-active .seat .name-pill,
body.holdem-table-active .mobile-player-panel {
  position: relative;
  width: var(--mp-seat-panel-w);
  min-height: 54px !important;
  margin: -2px auto 0;
  padding: 15px 5px 7px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(18,18,16,0.96), rgba(0,0,0,0.95));
  box-shadow: 0 6px 12px rgba(0,0,0,0.72);
  z-index: 3;
}

body.holdem-table-active .seat .name,
body.holdem-table-active .seat .chips,
body.holdem-table-active #hero .hero-info .name,
body.holdem-table-active #hero .hero-info .chips {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #fff7e9;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.holdem-table-active .seat .name,
body.holdem-table-active #hero .hero-info .name {
  font-size: 13px;
  font-weight: 900;
}

body.holdem-table-active .seat .chips,
body.holdem-table-active #hero .hero-info .chips {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 950;
}

body.holdem-table-active .note-line {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  margin: 0;
}

body.holdem-table-active .player-note-btn {
  width: 22px;
  min-width: 22px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 999px;
  font-size: 13px;
  line-height: 16px;
}

body.holdem-table-active .seat-hole-cards,
body.holdem-table-active .seat .holes {
  position: absolute;
  display: flex;
  gap: 4px;
  z-index: 9;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,0.75));
}

body.holdem-table-active .seat .holes .card {
  width: 31px;
  height: 44px;
  border-radius: 5px;
}

body.holdem-table-active .seat .holes .card .rank { font-size: 14px; }
body.holdem-table-active .seat .holes .card .suit { font-size: 16px; }

body.holdem-table-active .seat-top .holes,
body.holdem-table-active .seat-mid .holes {
  left: 50%;
  top: -46px;
  transform: translateX(-50%);
}

body.holdem-table-active .seat-left .holes {
  left: calc(50% + 23px);
  top: 5px;
  transform: none;
}

body.holdem-table-active .seat-right .holes {
  right: calc(50% + 23px);
  left: auto;
  top: 5px;
  transform: none;
}

body.holdem-table-active .player-state-badge,
body.holdem-table-active .action-badge {
  top: -18px;
  min-width: 50px;
  padding: 3px 9px 4px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  z-index: 12;
}

body.holdem-table-active .seat-left .action-badge,
body.holdem-table-active .seat-right .action-badge {
  top: -17px;
}

body.holdem-table-active .toact-badge {
  background: linear-gradient(180deg, #31ef52, #08ad28);
  color: #020602;
}

body.holdem-table-active .fold-badge {
  background: linear-gradient(180deg, #f2efe8, #b2aca2);
  color: #16110c;
}

body.holdem-table-active .allin-badge {
  background: linear-gradient(180deg, #ffe45a, #c77900);
  color: #160b00;
}

body.holdem-table-active .seat-role-stack {
  position: absolute;
  right: -10px;
  bottom: -11px;
  display: grid;
  gap: 2px;
  z-index: 10;
}

body.holdem-table-active .role-badge {
  position: static;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 28%, #ffd146, #e78f04 70%, #8d4700);
  color: #751900;
  font-size: 13px;
  font-weight: 950;
}

body.holdem-table-active .blind-role {
  width: 24px;
  height: 18px;
  border-radius: 999px;
  background: #1d8be7;
  color: #06101c;
  font-size: 9px;
}

body.holdem-table-active .bet-indicator,
body.holdem-table-active .seat .commit {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 54px;
  padding: 0;
  background: transparent;
  color: #f3ecdf;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 950;
  text-shadow: 0 2px 5px rgba(0,0,0,0.95);
  z-index: 6;
}

body.holdem-table-active .bet-indicator::before {
  content: none !important;
}

body.holdem-table-active .bet-indicator strong {
  font: inherit;
}

body.holdem-table-active .bet-chip-stack {
  width: 24px;
  height: 18px;
  border-radius: 8px 8px 5px 5px;
  background:
    radial-gradient(circle at 35% 28%, #fff 0 8%, transparent 9%),
    linear-gradient(90deg, #dd2630 0 30%, #fff 30% 40%, #2386f5 40% 66%, #fff 66% 75%, #24b85d 75%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.68);
}

body.holdem-table-active .seat-top .commit {
  left: 50%;
  top: 104px;
  bottom: auto;
  transform: translateX(-50%);
}

body.holdem-table-active .seat-left .commit {
  left: 72%;
  top: 98px;
  transform: translateX(-50%);
}

body.holdem-table-active .seat-right .commit {
  left: 28%;
  top: 98px;
  transform: translateX(-50%);
}

body.holdem-table-active .seat-mid .commit {
  left: 50%;
  top: 104px;
  transform: translateX(-50%);
}

body.holdem-table-active #hero {
  left: 50%;
  bottom: var(--mp-hero-bottom) !important;
  width: min(340px, 88vw);
  min-height: 126px;
  z-index: 30;
}

body.holdem-table-active #hero .mobile-hero-seat {
  position: relative;
  min-height: 126px;
}

body.holdem-table-active #hero .hero-info {
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 92px;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body.holdem-table-active #hero .hero-avatar-wrap {
  position: relative;
  width: var(--mp-hero-avatar);
  height: var(--mp-hero-avatar);
  margin: 0 auto;
}

body.holdem-table-active #hero .hero-nameplate {
  width: 82px;
  margin: -2px auto 0;
  padding: 16px 5px 7px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(18,18,16,0.97), rgba(0,0,0,0.96));
  box-shadow: 0 7px 14px rgba(0,0,0,0.74);
}

body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .lavatar {
  border-width: 3px;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,0.26), transparent 23%),
    radial-gradient(circle at 52% 50%, #9f8e2f, #58461c 72%),
    linear-gradient(145deg, #8d7c2c, #1a1712) !important;
}

body.holdem-table-active #hero .avatar-letter {
  font-size: 13px;
}

body.holdem-table-active #hero .seat-v-badge {
  min-width: 48px;
  bottom: -9px;
  font-size: 14px;
}

body.holdem-table-active #hero .holes {
  left: 118px;
  bottom: 32px;
  display: flex;
  gap: clamp(8px, 1.8vw, 12px);
  filter: drop-shadow(0 7px 10px rgba(0,0,0,0.68));
  z-index: 8;
}

body.holdem-table-active #hero .card.large {
  width: var(--mp-hero-card-w);
  height: var(--mp-hero-card-h);
  border-radius: 8px;
}

body.holdem-table-active #hero .card.large .rank {
  font-size: calc(var(--mp-hero-card-w) * 0.43);
}

body.holdem-table-active #hero .card.large .suit {
  font-size: calc(var(--mp-hero-card-w) * 0.52);
}

body.holdem-table-active #hero .commit {
  left: 120px;
  right: 0;
  bottom: 6px;
  transform: none;
  color: #e6ce52;
  font-size: 17px;
  text-align: center;
}

body.holdem-table-active #hero .action-badge {
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
}

body.holdem-table-active .hero-hand-strength {
  left: 104px;
  right: 0;
  bottom: -26px;
  color: #e6d159;
  font-size: 15px;
}

body.holdem-table-active #hero.folded {
  opacity: 0.82;
}

body.holdem-table-active #actionPanel {
  width: var(--mp-screen-w) !important;
  max-height: var(--mp-action-h);
  padding: 0 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.82) 18%, #020202 100%);
  gap: 6px;
}

body.holdem-table-active .action-countdown {
  margin: 0;
  padding: 0;
}

body.holdem-table-active .action-hint,
body.holdem-table-active .bet-amount-preview,
body.holdem-table-active #quickBets,
body.holdem-table-active #raiseSlider {
  border-radius: 0;
  border: 1px solid rgba(232, 226, 211, 0.28);
  background:
    linear-gradient(180deg, rgba(56,56,53,0.9), rgba(11,11,10,0.96));
}

body.holdem-table-active .action-hint {
  min-height: 34px;
  padding: 7px 14px;
}

body.holdem-table-active .action-hint strong {
  color: #35cfff;
  font-size: 14px;
}

body.holdem-table-active .action-hint span {
  color: #f6e5a3;
  font-size: 13px;
}

body.holdem-table-active #quickBets {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

body.holdem-table-active #quickBets .preset {
  min-height: 30px;
  border-radius: 6px;
}

body.holdem-table-active .bet-amount-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 5px 14px;
}

body.holdem-table-active .bet-preview-label {
  font-size: 13px;
  font-weight: 900;
  color: #efe8da;
}

body.holdem-table-active #betAmountPreviewVal {
  color: var(--mp-gold);
  font-size: 25px;
  font-weight: 950;
}

body.holdem-table-active #raiseSlider {
  grid-template-columns: 40px 1fr 40px 40px;
  min-height: 42px;
  padding: 5px;
}

body.holdem-table-active #raiseSlider output {
  position: absolute;
  right: 18px;
  top: -43px;
  font-size: 24px;
}

body.holdem-table-active #actionButtons {
  gap: 5px;
  padding-top: 6px;
}

body.holdem-table-active #actionButtons button {
  min-height: 76px;
  border-radius: 0;
}

body.holdem-table-active #actionButtons button .ab-label {
  font-size: clamp(26px, 6.2vw, 34px);
}

body.holdem-table-active #preActions label {
  min-height: 64px;
  border-radius: 0;
}

body.holdem-table-active .hand-result-modal {
  bottom: calc(var(--mp-action-h) + 20px);
  width: min(430px, calc(var(--mp-screen-w) - 36px));
}

body.holdem-table-active .hand-result-card {
  background: rgba(24, 22, 18, 0.94);
  border-color: rgba(220, 175, 35, 0.82);
}

body.holdem-table-active .seat.is-winner .avatar-wrap,
body.holdem-table-active #hero.is-winner .hero-avatar-wrap {
  filter: drop-shadow(0 0 18px rgba(255, 229, 64, 0.92));
}

@media (min-width: 760px) {
  body.holdem-table-active {
    --mp-screen-w: min(100vw, 780px);
    --mp-table-side: clamp(70px, 11vw, 108px);
    --mp-card-w: clamp(46px, 6.6vw, 62px);
    --mp-hero-card-w: clamp(60px, 8vw, 70px);
  }
}

@media (max-width: 430px) {
  body.holdem-table-active {
    --mp-screen-w: 100vw;
    --mp-card-w: clamp(36px, 9.3vw, 43px);
    --mp-hero-card-w: clamp(52px, 13.5vw, 60px);
    --mp-seat-avatar: 46px;
    --mp-seat-panel-w: 66px;
    --mp-hero-avatar: 66px;
    --mp-table-side: 42px;
    --mp-table-top: 146px;
    --mp-table-bottom: 104px;
    --mp-pot-top: 31%;
    --mp-board-top: 46%;
    --mp-center-info-top: 56%;
    --mp-action-h: clamp(184px, 25dvh, 230px);
    --mp-hero-bottom: 58px;
  }

  body.holdem-table-active.holdem-action-open,
  body.holdem-table-active.holdem-action-panel-visible {
    --mp-pot-top: 29%;
    --mp-board-top: 39.5%;
    --mp-center-info-top: 49%;
    --mp-hero-bottom: calc(var(--mp-action-h) + 12px);
  }

  body.holdem-table-active #topbar {
    height: 64px;
    padding: 8px 14px;
  }

  body.holdem-table-active #title {
    left: 17px;
    top: 15px;
  }

  body.holdem-table-active #balance {
    left: 70px;
    top: 6px;
    min-width: 104px;
    height: 48px;
    padding: 5px 16px 7px;
  }

  body.holdem-table-active #balance::before {
    font-size: 17px;
  }

  body.holdem-table-active .gg-topbar {
    top: 66px;
    height: 64px;
    padding: 0 10px;
  }

  body.holdem-table-active #leaveTable {
    left: 10px;
    top: 12px;
    width: 44px;
    height: 40px;
  }

  body.holdem-table-active .gg-topbar-scroll {
    left: 62px;
    right: 110px;
    top: 10px;
    height: 44px;
    font-size: 12px;
  }

  body.holdem-table-active .gg-topbar-actions {
    right: 10px;
    top: 11px;
    gap: 5px;
  }

  body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  body.holdem-table-active #felt {
    height: max(690px, 100dvh) !important;
  }

  body.holdem-table-active .seat {
    transform: translate(-50%, -50%) scale(0.78);
  }

  body.holdem-table-active .seat-left .holes {
    left: calc(50% + 19px);
  }

  body.holdem-table-active .seat-right .holes {
    right: calc(50% + 19px);
  }

  body.holdem-table-active #hero {
    width: min(300px, 92vw);
    min-height: 116px;
  }

  body.holdem-table-active #hero .hero-info {
    left: 4px;
  }

  body.holdem-table-active #hero .holes {
    left: 100px;
    bottom: 34px;
  }

  body.holdem-table-active #hero .commit {
    left: 100px;
    bottom: 10px;
  }

  body.holdem-table-active .hero-hand-strength {
    left: 92px;
    bottom: -21px;
    font-size: 13px;
  }

  body.holdem-table-active #actionButtons button {
    min-height: 68px;
  }
}

@media (max-height: 760px) {
  body.holdem-table-active {
    --mp-table-top: 132px;
    --mp-table-bottom: 92px;
    --mp-pot-top: 29%;
    --mp-board-top: 43%;
    --mp-center-info-top: 53%;
    --mp-action-h: 198px;
    --mp-hero-bottom: 50px;
  }

  body.holdem-table-active.holdem-action-open,
  body.holdem-table-active.holdem-action-panel-visible {
    --mp-pot-top: 27%;
    --mp-board-top: 37%;
    --mp-center-info-top: 47%;
    --mp-hero-bottom: calc(var(--mp-action-h) + 8px);
  }

  body.holdem-table-active .seat {
    transform: translate(-50%, -50%) scale(0.78);
  }

  body.holdem-table-active #hero {
    transform: translateX(-50%) scale(0.88) !important;
    transform-origin: 50% 100%;
  }
}

/* ─── Mobile density pass v2: 8-seat portrait table ───────────────────────
   This layer is deliberately last. It keeps the current visual direction but
   reallocates space: narrower/taller table, smaller seats/cards, and a shorter
   action dock so 8-seat tables stay readable on 390-440px portrait screens. */
body.holdem-table-active {
  --mp-screen-w: min(100vw, 560px);
  --mp-table-top: clamp(138px, 17dvh, 170px);
  --mp-table-side: clamp(66px, 18vw, 118px);
  --mp-table-bottom: clamp(72px, 9dvh, 104px);
  --mp-card-w: clamp(34px, 8.6vw, 44px);
  --mp-card-h: calc(var(--mp-card-w) * 1.38);
  --mp-hero-card-w: clamp(48px, 12vw, 58px);
  --mp-hero-card-h: calc(var(--mp-hero-card-w) * 1.38);
  --mp-seat-avatar: clamp(36px, 9.3vw, 44px);
  --mp-seat-panel-w: clamp(54px, 13.8vw, 64px);
  --mp-hero-avatar: clamp(52px, 13.4vw, 64px);
  --mp-seat-box-w: clamp(72px, 18.2vw, 86px);
  --mp-seat-box-h: clamp(82px, 20vw, 96px);
  --mp-seat-card-w: clamp(24px, 6.2vw, 29px);
  --mp-seat-card-h: calc(var(--mp-seat-card-w) * 1.36);
  --mp-pot-top: 36%;
  --mp-board-top: 50%;
  --mp-center-info-top: 59.5%;
  --mp-hero-bottom: clamp(54px, 6.8dvh, 72px);
  --mp-action-h: clamp(132px, 18.5dvh, 174px);
}

body.holdem-table-active.holdem-action-open,
body.holdem-table-active.holdem-action-panel-visible {
  --mp-table-top: clamp(126px, 15dvh, 154px);
  --mp-table-bottom: calc(var(--mp-action-h) + clamp(58px, 7dvh, 76px));
  --mp-pot-top: 33.5%;
  --mp-board-top: 45.5%;
  --mp-center-info-top: 55%;
  --mp-hero-bottom: calc(var(--mp-action-h) + 30px);
  --mp-hero-card-w: clamp(44px, 11vw, 54px);
}

body.holdem-table-active #app,
body.holdem-table-active #topbar,
body.holdem-table-active #actionPanel {
  width: var(--mp-screen-w) !important;
  max-width: var(--mp-screen-w) !important;
}

body.holdem-table-active #topbar {
  height: clamp(54px, 7.2dvh, 64px);
  padding: 7px clamp(12px, 3.5vw, 18px);
}

body.holdem-table-active #title {
  left: clamp(13px, 3.8vw, 20px);
  top: clamp(10px, 1.7dvh, 15px);
  width: 32px;
  height: 32px;
}

body.holdem-table-active #title::before {
  width: 32px;
  height: 32px;
  font-size: 26px;
}

body.holdem-table-active #balance {
  left: clamp(62px, 16vw, 84px);
  top: 6px;
  min-width: clamp(92px, 24vw, 118px);
  height: 44px;
  padding: 4px 15px 6px;
}

body.holdem-table-active #balance::before {
  font-size: clamp(15px, 4.2vw, 18px);
}

body.holdem-table-active #balance::after {
  width: clamp(42px, 12vw, 56px);
  height: 4px;
  margin-top: 4px;
}

body.holdem-table-active .text-scale-toggle {
  right: clamp(12px, 3.8vw, 18px);
  top: 9px;
  width: 34px;
  height: 34px;
  min-height: 34px;
}

body.holdem-table-active .text-scale-toggle::before {
  font-size: 24px;
  line-height: 34px;
}

body.holdem-table-active .gg-topbar {
  top: clamp(56px, 7.6dvh, 68px);
  height: clamp(48px, 6.4dvh, 58px);
  padding: 0 clamp(10px, 3vw, 16px);
}

body.holdem-table-active #leaveTable {
  left: clamp(8px, 2.4vw, 14px);
  top: 8px;
  width: clamp(38px, 10vw, 46px);
  height: clamp(36px, 9vw, 42px);
  border-radius: 13px;
}

body.holdem-table-active .gg-topbar-scroll {
  left: clamp(54px, 14vw, 74px);
  right: clamp(118px, 30vw, 156px);
  top: 7px;
  height: clamp(38px, 9.8vw, 44px);
  padding: 6px 10px;
  font-size: clamp(10px, 2.8vw, 12px);
}

body.holdem-table-active .gg-topbar-actions {
  right: clamp(8px, 2.4vw, 14px);
  top: 8px;
  gap: 5px;
}

body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
  width: clamp(32px, 8.4vw, 38px) !important;
  height: clamp(32px, 8.4vw, 38px) !important;
  flex-basis: clamp(32px, 8.4vw, 38px) !important;
}

body.holdem-table-active #felt {
  height: max(650px, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden;
}

body.holdem-table-active #felt::before {
  top: var(--mp-table-top);
  left: var(--mp-table-side);
  right: var(--mp-table-side);
  bottom: var(--mp-table-bottom);
  border-radius: 48% / 44%;
  border-width: 1px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06), transparent 9%, transparent 91%, rgba(0,0,0,0.28)),
    radial-gradient(ellipse at 50% 38%, rgba(116, 107, 92, 0.66), rgba(61, 55, 47, 0.98) 54%, rgba(37, 32, 27, 1) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 24px rgba(0,0,0,0.54),
    0 18px 38px rgba(0,0,0,0.78);
}

body.holdem-table-active #felt::after {
  top: calc(var(--mp-table-top) + clamp(10px, 2.5vw, 16px));
  left: calc(var(--mp-table-side) + clamp(10px, 2.4vw, 16px));
  right: calc(var(--mp-table-side) + clamp(10px, 2.4vw, 16px));
  bottom: calc(var(--mp-table-bottom) + clamp(10px, 2.4vw, 16px));
  border-radius: 47% / 43%;
  box-shadow:
    inset 0 0 44px rgba(0,0,0,0.5),
    inset 0 0 0 3px rgba(15, 13, 11, 0.62),
    0 0 0 1px rgba(0,0,0,0.78);
}

body.holdem-table-active #potDisplay {
  top: var(--mp-pot-top) !important;
  min-width: 112px;
  max-width: 170px;
  z-index: 18;
}

body.holdem-table-active #potDisplay .pot-tag {
  margin-bottom: 4px;
  font-size: clamp(10px, 2.7vw, 12px);
  letter-spacing: 6px;
}

body.holdem-table-active #potDisplay .pot-amount {
  min-width: clamp(108px, 29vw, 132px);
  min-height: clamp(28px, 7.2vw, 34px);
  padding: 3px 16px;
  font-size: clamp(17px, 5vw, 22px);
}

body.holdem-table-active #potDisplay .pot-amount::before {
  width: 13px;
  height: 13px;
  margin-right: 10px;
}

body.holdem-table-active #community {
  top: var(--mp-board-top) !important;
  gap: clamp(3px, 0.9vw, 6px);
}

body.holdem-table-active .card,
body.holdem-table-active #community .card {
  width: var(--mp-card-w);
  height: var(--mp-card-h);
  border-radius: 6px;
}

body.holdem-table-active .card .rank {
  font-size: calc(var(--mp-card-w) * 0.4);
}

body.holdem-table-active .card .suit {
  font-size: calc(var(--mp-card-w) * 0.47);
}

body.holdem-table-active .blind-info-panel {
  top: var(--mp-center-info-top);
  width: min(218px, 56vw);
  font-size: clamp(9px, 2.55vw, 11px);
  line-height: 1.28;
}

body.holdem-table-active .seat {
  width: var(--mp-seat-box-w);
  min-height: var(--mp-seat-box-h);
  transform: translate(-50%, -50%);
}

body.holdem-table-active .mobile-seat-card {
  min-height: var(--mp-seat-box-h);
}

body.holdem-table-active .seat .avatar-wrap,
body.holdem-table-active .seat-avatar-shell {
  width: var(--mp-seat-avatar);
  height: var(--mp-seat-avatar);
}

body.holdem-table-active .seat .avatar,
body.holdem-table-active .seat .lavatar,
body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .lavatar {
  border-width: 1.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    0 4px 10px rgba(0,0,0,0.7);
}

body.holdem-table-active .seat.toact .avatar,
body.holdem-table-active .seat.toact .lavatar,
body.holdem-table-active #hero.toact .hero-info .avatar,
body.holdem-table-active #hero.toact .hero-info .lavatar {
  box-shadow:
    0 0 0 3px rgba(244, 236, 55, 0.25),
    0 0 16px rgba(230, 237, 58, 0.64),
    0 5px 12px rgba(0,0,0,0.8);
}

body.holdem-table-active .timer-ring {
  inset: -5px;
  width: calc(var(--mp-seat-avatar) + 10px);
  height: calc(var(--mp-seat-avatar) + 10px);
}

body.holdem-table-active #hero .timer-ring {
  inset: -6px;
  width: calc(var(--mp-hero-avatar) + 12px);
  height: calc(var(--mp-hero-avatar) + 12px);
}

body.holdem-table-active .timer-ring-circle {
  stroke-width: 3;
}

body.holdem-table-active .seat-v-badge {
  bottom: -7px;
  min-width: 34px;
  padding: 1px 6px 2px;
  border-radius: 4px;
  font-size: 10px;
}

body.holdem-table-active .seat .name-pill,
body.holdem-table-active .mobile-player-panel {
  width: var(--mp-seat-panel-w);
  min-height: 43px !important;
  padding: 12px 4px 5px;
  border-radius: 5px;
}

body.holdem-table-active .seat .name,
body.holdem-table-active #hero .hero-info .name {
  font-size: clamp(10px, 2.9vw, 12px);
}

body.holdem-table-active .seat .chips,
body.holdem-table-active #hero .hero-info .chips {
  margin-top: 1px;
  font-size: clamp(12px, 3.5vw, 15px);
}

body.holdem-table-active .seat-hole-cards,
body.holdem-table-active .seat .holes {
  gap: 3px;
}

body.holdem-table-active .seat .holes .card {
  width: var(--mp-seat-card-w);
  height: var(--mp-seat-card-h);
  border-radius: 4px;
}

body.holdem-table-active .seat .holes .card .rank {
  font-size: calc(var(--mp-seat-card-w) * 0.44);
}

body.holdem-table-active .seat .holes .card .suit {
  font-size: calc(var(--mp-seat-card-w) * 0.5);
}

body.holdem-table-active .seat-top .holes,
body.holdem-table-active .seat-mid .holes {
  top: calc(-1 * var(--mp-seat-card-h) - 4px);
}

body.holdem-table-active .seat-left .holes,
body.holdem-table-active .seat-right .holes {
  left: 50%;
  right: auto;
  top: calc(-1 * var(--mp-seat-card-h) - 4px);
  transform: translateX(-50%);
}

body.holdem-table-active .player-state-badge,
body.holdem-table-active .action-badge {
  top: -15px;
  min-width: 42px;
  padding: 2px 7px 3px;
  font-size: clamp(9px, 2.6vw, 11px);
}

body.holdem-table-active .seat-left .player-state-badge,
body.holdem-table-active .seat-right .player-state-badge {
  top: -30px;
}

body.holdem-table-active .seat-role-stack {
  right: -8px;
  bottom: -9px;
}

body.holdem-table-active .role-badge {
  width: 19px;
  height: 19px;
  font-size: 10px;
}

body.holdem-table-active .blind-role {
  width: 22px;
  height: 15px;
  font-size: 8px;
}

body.holdem-table-active .bet-indicator,
body.holdem-table-active .seat .commit {
  min-width: 42px;
  font-size: clamp(11px, 3.1vw, 13px);
}

body.holdem-table-active .bet-chip-stack {
  width: 19px;
  height: 14px;
}

body.holdem-table-active .seat-top .commit,
body.holdem-table-active .seat-mid .commit {
  top: calc(var(--mp-seat-box-h) - 2px);
}

body.holdem-table-active .seat-left .commit,
body.holdem-table-active .seat-right .commit {
  top: calc(var(--mp-seat-box-h) - 6px);
}

body.holdem-table-active .seat-empty {
  display: none !important;
  pointer-events: none;
  opacity: 0;
  filter: saturate(0.6);
}

body.holdem-table-active .seat-empty .mobile-seat-card {
  min-height: 42px;
}

body.holdem-table-active .seat-empty .vacant-avatar {
  width: calc(var(--mp-seat-avatar) * 0.74);
  height: calc(var(--mp-seat-avatar) * 0.74);
}

body.holdem-table-active .seat-empty .avatar {
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.11), rgba(255,255,255,0.03) 64%, rgba(0,0,0,0.1));
}

body.holdem-table-active .seat-empty .avatar-letter {
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.38);
  font-size: 15px;
}

body.holdem-table-active #hero {
  bottom: var(--mp-hero-bottom) !important;
  width: min(286px, 86vw);
  min-height: 106px;
}

body.holdem-table-active #hero .mobile-hero-seat {
  min-height: 106px;
}

body.holdem-table-active #hero .hero-info {
  left: 3px;
  width: 76px;
}

body.holdem-table-active #hero .hero-avatar-wrap {
  width: var(--mp-hero-avatar);
  height: var(--mp-hero-avatar);
}

body.holdem-table-active #hero .hero-nameplate {
  width: clamp(66px, 17vw, 76px);
  padding: 13px 4px 5px;
}

body.holdem-table-active #hero .seat-v-badge {
  min-width: 40px;
  bottom: -7px;
  font-size: 11px;
}

body.holdem-table-active #hero .holes {
  left: clamp(88px, 24vw, 108px);
  bottom: clamp(28px, 7.3vw, 34px);
  gap: clamp(5px, 1.4vw, 8px);
}

body.holdem-table-active #hero .card.large {
  width: var(--mp-hero-card-w);
  height: var(--mp-hero-card-h);
  border-radius: 7px;
}

body.holdem-table-active #hero .card.large .rank {
  font-size: calc(var(--mp-hero-card-w) * 0.42);
}

body.holdem-table-active #hero .card.large .suit {
  font-size: calc(var(--mp-hero-card-w) * 0.5);
}

body.holdem-table-active #hero .commit {
  left: clamp(88px, 24vw, 108px);
  bottom: 6px;
  font-size: clamp(13px, 3.7vw, 15px);
}

body.holdem-table-active #hero .action-badge {
  top: 4px;
}

body.holdem-table-active .hero-hand-strength {
  left: clamp(82px, 22vw, 102px);
  bottom: -12px;
  font-size: clamp(11px, 3.1vw, 13px);
}

body.holdem-table-active #actionPanel {
  max-height: var(--mp-action-h);
  padding: 0 5px calc(5px + env(safe-area-inset-bottom, 0px));
  gap: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.holdem-table-active #actionPanel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body.holdem-table-active .action-hint {
  min-height: 27px;
  padding: 5px 10px;
}

body.holdem-table-active .action-hint strong {
  font-size: 12px;
}

body.holdem-table-active .action-hint span {
  font-size: 11px;
}

body.holdem-table-active #quickBets {
  gap: 3px;
}

body.holdem-table-active #quickBets .preset {
  min-height: 23px;
  padding: 2px 4px;
  border-radius: 5px;
  font-size: 11px;
}

body.holdem-table-active .bet-amount-preview {
  min-height: 31px;
  padding: 3px 10px;
}

body.holdem-table-active .bet-preview-label {
  font-size: 11px;
}

body.holdem-table-active #betAmountPreviewVal {
  font-size: clamp(18px, 5vw, 22px);
}

body.holdem-table-active #raiseSlider {
  grid-template-columns: 34px 1fr 34px 34px;
  min-height: 32px;
  padding: 3px;
}

body.holdem-table-active #raiseSlider output {
  right: 14px;
  top: -31px;
  font-size: clamp(17px, 4.8vw, 21px);
}

body.holdem-table-active #actionButtons {
  gap: 4px;
  padding-top: 3px;
  position: sticky;
  bottom: 0;
  background: rgba(0,0,0,0.88);
}

body.holdem-table-active #actionButtons button {
  min-height: clamp(50px, 13vw, 60px);
  padding: 4px 0;
}

body.holdem-table-active #actionButtons button .ab-label {
  font-size: clamp(18px, 5.4vw, 24px);
  line-height: 1;
}

body.holdem-table-active #actionButtons button .ab-amount {
  font-size: clamp(12px, 3.4vw, 15px);
  line-height: 1.05;
}

body.holdem-table-active #preActions label {
  min-height: 42px;
  padding: 5px 4px;
  font-size: 12px;
}

body.holdem-table-active .hand-result-modal {
  bottom: calc(var(--mp-action-h) + 10px);
  width: min(390px, calc(var(--mp-screen-w) - 24px));
}

@media (max-width: 440px) {
  body.holdem-table-active {
    --mp-table-side: clamp(58px, 16.5vw, 74px);
    --mp-table-top: clamp(124px, 15.6dvh, 148px);
    --mp-table-bottom: clamp(68px, 8.5dvh, 92px);
    --mp-card-w: clamp(32px, 8.2vw, 38px);
    --mp-hero-card-w: clamp(46px, 11.7vw, 53px);
    --mp-seat-avatar: clamp(34px, 8.8vw, 40px);
    --mp-seat-panel-w: clamp(50px, 13vw, 58px);
    --mp-hero-avatar: clamp(50px, 12.8vw, 58px);
    --mp-seat-box-w: clamp(66px, 17vw, 76px);
    --mp-seat-box-h: clamp(76px, 19vw, 88px);
    --mp-seat-card-w: clamp(22px, 5.9vw, 26px);
    --mp-pot-top: 35%;
    --mp-board-top: 49.5%;
    --mp-center-info-top: 59%;
    --mp-action-h: clamp(126px, 17.5dvh, 160px);
    --mp-hero-bottom: clamp(50px, 6.5dvh, 66px);
  }

  body.holdem-table-active.holdem-action-open,
  body.holdem-table-active.holdem-action-panel-visible {
    --mp-pot-top: 33%;
    --mp-board-top: 45%;
    --mp-center-info-top: 54.5%;
    --mp-table-bottom: calc(var(--mp-action-h) + 50px);
    --mp-hero-bottom: calc(var(--mp-action-h) + 28px);
  }

  body.holdem-table-active .seat-left .holes {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  body.holdem-table-active .seat-right .holes {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (max-height: 760px) {
  body.holdem-table-active {
    --mp-table-top: 114px;
    --mp-table-bottom: 62px;
    --mp-pot-top: 34%;
    --mp-board-top: 48%;
    --mp-center-info-top: 57.5%;
    --mp-action-h: 138px;
    --mp-hero-bottom: 44px;
  }

  body.holdem-table-active.holdem-action-open,
  body.holdem-table-active.holdem-action-panel-visible {
    --mp-table-bottom: 188px;
    --mp-pot-top: 32%;
    --mp-board-top: 43.5%;
    --mp-center-info-top: 53%;
    --mp-hero-bottom: 166px;
  }

  body.holdem-table-active #hero {
    transform: translateX(-50%) scale(0.82) !important;
  }
}

/* ─── Mobile overlap guard v3 ────────────────────────────────────────────
   Final guardrails for active play: empty seats are layout-only, hero content
   clears the action dock, and default note "+" affordances do not clutter
   occupied/empty seat regions. */
body.holdem-table-active .seat-empty {
  display: none !important;
}

body.holdem-table-active .player-note-btn:not(.has-note) {
  display: none !important;
}

body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  bottom: calc(var(--mp-action-h) + clamp(28px, 4.2dvh, 42px)) !important;
  transform: translateX(-50%) scale(0.78) !important;
  z-index: 32;
}

body.holdem-table-active.holdem-action-open #hero .action-badge,
body.holdem-table-active.holdem-action-panel-visible #hero .action-badge {
  top: -12px;
}

body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  left: clamp(104px, 28vw, 120px);
  bottom: clamp(42px, 9.6vw, 50px);
  z-index: 48;
}

body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: clamp(44px, 11vw, 52px);
  height: calc(clamp(44px, 11vw, 52px) * 1.38);
}

body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  bottom: -4px;
}

body.holdem-table-active.holdem-action-open .hand-result-modal,
body.holdem-table-active.holdem-action-panel-visible .hand-result-modal {
  bottom: calc(var(--mp-action-h) + 18px);
}

body.holdem-table-active #sitInCta {
  top: 63% !important;
  z-index: 22 !important;
}

/* ─── Mobile clock layout v4: avatar timer, compact seats, clean hero stack ─ */
body.holdem-table-active {
  --mp-seat-avatar: clamp(31px, 8vw, 37px);
  --mp-seat-panel-w: clamp(46px, 12vw, 54px);
  --mp-seat-box-w: clamp(58px, 15.5vw, 70px);
  --mp-seat-box-h: clamp(66px, 17vw, 78px);
  --mp-seat-card-w: clamp(20px, 5.4vw, 24px);
  --mp-hero-avatar: clamp(44px, 11.4vw, 54px);
  --mp-hero-card-w: clamp(42px, 10.8vw, 52px);
  --mp-hero-bottom: clamp(36px, 5dvh, 54px);
}

body.holdem-table-active #potDisplay,
body.holdem-table-active #community,
body.holdem-table-active .blind-info-panel {
  z-index: 5;
}

body.holdem-table-active .seat {
  z-index: 10;
}

body.holdem-table-active .seat .holes,
body.holdem-table-active .seat .commit,
body.holdem-table-active #hero .holes,
body.holdem-table-active #hero .commit {
  z-index: 12;
}

body.holdem-table-active .seat-role-stack,
body.holdem-table-active .role-badge,
body.holdem-table-active .action-badge {
  z-index: 18;
}

body.holdem-table-active #topbar,
body.holdem-table-active .gg-topbar {
  z-index: 30;
}

body.holdem-table-active #actionPanel {
  z-index: 40;
}

body.holdem-table-active .table-tool-rail {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  z-index: 45;
}

body.holdem-table-active.holdem-action-open .table-tool-rail,
body.holdem-table-active.holdem-action-panel-visible .table-tool-rail {
  bottom: calc(var(--mp-action-h) + env(safe-area-inset-bottom, 0px) + 16px) !important;
}

body.holdem-table-active .seat .name-pill,
body.holdem-table-active .mobile-player-panel {
  width: var(--mp-seat-panel-w);
  min-height: 36px !important;
  padding: 9px 3px 4px;
  border-radius: 5px;
}

body.holdem-table-active .seat .name,
body.holdem-table-active #hero .hero-info .name {
  font-size: clamp(9px, 2.45vw, 11px);
  font-weight: 800;
  line-height: 1.05;
}

body.holdem-table-active .seat .chips,
body.holdem-table-active #hero .hero-info .chips {
  margin-top: 1px;
  font-size: clamp(10px, 2.9vw, 13px);
  font-weight: 850;
  line-height: 1.05;
}

body.holdem-table-active #hero .hero-nameplate {
  width: clamp(58px, 15.5vw, 68px);
  padding: 10px 3px 4px;
}

body.holdem-table-active #hero .hero-info {
  left: clamp(14px, 4vw, 22px);
  width: clamp(62px, 16vw, 72px);
}

body.holdem-table-active .seat-v-badge {
  bottom: -6px;
  min-width: 28px;
  padding: 1px 5px 2px;
  font-size: 9px;
}

body.holdem-table-active #hero .seat-v-badge {
  min-width: 34px;
  bottom: -6px;
  font-size: 10px;
}

body.holdem-table-active .timer-ring {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: calc(var(--mp-seat-avatar) + 8px) !important;
  height: calc(var(--mp-seat-avatar) + 8px) !important;
  overflow: visible;
  z-index: 18;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.58));
}

body.holdem-table-active #hero .timer-ring {
  width: calc(var(--mp-hero-avatar) + 9px) !important;
  height: calc(var(--mp-hero-avatar) + 9px) !important;
}

body.holdem-table-active .timer-ring-circle {
  stroke-width: 3.2;
}

body.holdem-table-active .seat.toact .avatar,
body.holdem-table-active .seat.toact .lavatar,
body.holdem-table-active #hero.toact .hero-info .avatar,
body.holdem-table-active #hero.toact .hero-info .lavatar {
  box-shadow:
    0 0 0 2px rgba(244, 236, 55, 0.2),
    0 0 11px rgba(230, 237, 58, 0.44),
    0 4px 10px rgba(0,0,0,0.78);
}

body.holdem-table-active .player-state-badge,
body.holdem-table-active .action-badge {
  top: -22px;
  min-width: 38px;
  padding: 2px 7px 3px;
  font-size: clamp(8px, 2.35vw, 10px);
}

body.holdem-table-active .seat-left .player-state-badge,
body.holdem-table-active .seat-right .player-state-badge,
body.holdem-table-active .seat-clock-730 .player-state-badge,
body.holdem-table-active .seat-clock-430 .player-state-badge {
  top: -26px;
}

body.holdem-table-active .seat-role-stack {
  right: auto;
  bottom: auto;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

body.holdem-table-active .role-badge {
  width: 16px;
  height: 16px;
  font-size: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}

body.holdem-table-active .blind-role {
  width: 20px;
  height: 14px;
  font-size: 7px;
}

body.holdem-table-active .seat-clock-12 .seat-role-stack {
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
}

body.holdem-table-active .seat-clock-130 .seat-role-stack,
body.holdem-table-active .seat-clock-3 .seat-role-stack,
body.holdem-table-active .seat-clock-430 .seat-role-stack {
  left: -11px;
  top: 32px;
  transform: none;
}

body.holdem-table-active .seat-clock-1030 .seat-role-stack,
body.holdem-table-active .seat-clock-9 .seat-role-stack,
body.holdem-table-active .seat-clock-730 .seat-role-stack {
  right: -11px;
  top: 32px;
  transform: none;
}

body.holdem-table-active #hero .hero-avatar-wrap .seat-role-stack {
  right: -18px;
  top: 8px;
  left: auto;
  bottom: auto;
  transform: none;
}

body.holdem-table-active #hero {
  --hero-card-left: calc(50% + clamp(43px, 11.8vw, 54px));
  --hero-card-bottom: clamp(30px, 7.2vw, 38px);
  bottom: var(--mp-hero-bottom) !important;
  width: min(340px, 92vw);
  min-height: 118px;
}

body.holdem-table-active #hero .mobile-hero-seat {
  min-height: 118px;
}

body.holdem-table-active #hero .hero-info {
  left: 50%;
  transform: translateX(-50%);
  width: clamp(62px, 16vw, 72px);
}

body.holdem-table-active #hero .holes {
  left: var(--hero-card-left);
  bottom: var(--hero-card-bottom);
  gap: clamp(5px, 1.2vw, 7px);
}

body.holdem-table-active #hero .commit {
  left: calc(var(--hero-card-left) + var(--mp-hero-card-w) + 4px);
  bottom: calc(var(--hero-card-bottom) + var(--mp-hero-card-h) + 7px);
  transform: translateX(-50%);
  min-width: 34px;
  font-size: clamp(10px, 2.8vw, 12px);
  color: #ffe58a;
}

body.holdem-table-active #hero .hero-pending-amount {
  position: absolute;
  left: calc(var(--hero-card-left) + var(--mp-hero-card-w) + 4px);
  bottom: calc(var(--hero-card-bottom) + var(--mp-hero-card-h) + 7px);
  transform: translateX(-50%);
  z-index: 16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 38px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30,24,17,0.95), rgba(12,10,8,0.96));
  border: 1px solid rgba(245, 197, 24, 0.58);
  color: #ffe58a;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.86);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  pointer-events: none;
}

body.holdem-table-active #hero .hero-pending-amount .bet-chip-stack {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}

body.holdem-table-active .hero-hand-strength {
  left: calc(var(--hero-card-left) + var(--mp-hero-card-w) + 4px);
  bottom: 2px;
  transform: translateX(-50%);
  max-width: clamp(112px, 35vw, 150px);
  min-height: 18px;
  padding: 2px 7px;
  border: 0;
  background: transparent;
  color: #f5d845;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  font-size: clamp(9px, 2.45vw, 11px);
  white-space: nowrap;
  z-index: 14;
}

body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  bottom: calc(var(--mp-action-h) + clamp(16px, 2.6dvh, 28px)) !important;
  transform: translateX(-50%) scale(0.82) !important;
  z-index: 32;
}

body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  left: var(--hero-card-left);
  bottom: var(--hero-card-bottom);
}

body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  bottom: 2px;
}

body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit {
  bottom: calc(var(--hero-card-bottom) + var(--mp-hero-card-h) + 7px);
}

body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  bottom: calc(var(--hero-card-bottom) + var(--mp-hero-card-h) + 7px);
}

@media (max-width: 440px) {
  body.holdem-table-active {
    --mp-hero-bottom: clamp(34px, 4.7dvh, 48px);
  }
}

/* ─── Final fixed anchors v5: hero 6:30, board slots, inward roles ─────── */
body.holdem-table-active {
  --mp-board-gap: clamp(4px, 1.05vw, 6px);
  --mp-board-width: calc((var(--mp-card-w) * 5) + (var(--mp-board-gap) * 4));
  --hero-profile-x: calc(50% + clamp(88px, 24vw, 112px));
  --hero-cards-x: 50%;
  --hero-cards-bottom: clamp(37px, 8.6vw, 47px);
}

body.holdem-table-active #community {
  left: 50% !important;
  top: var(--mp-board-top) !important;
  width: var(--mp-board-width);
  display: grid !important;
  grid-template-columns: repeat(5, var(--mp-card-w));
  grid-auto-rows: var(--mp-card-h);
  gap: var(--mp-board-gap);
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active #community .card,
body.holdem-table-active #community .community-slot {
  width: var(--mp-card-w) !important;
  height: var(--mp-card-h) !important;
  min-width: var(--mp-card-w);
  min-height: var(--mp-card-h);
  flex: 0 0 var(--mp-card-w);
  margin: 0 !important;
}

body.holdem-table-active .card.spade,
body.holdem-table-active .card.spade .rank,
body.holdem-table-active .card.spade .suit {
  color: #151515 !important;
}

body.holdem-table-active .card.heart,
body.holdem-table-active .card.heart .rank,
body.holdem-table-active .card.heart .suit {
  color: #df2428 !important;
}

body.holdem-table-active .card.diamond,
body.holdem-table-active .card.diamond .rank,
body.holdem-table-active .card.diamond .suit {
  color: #2365e8 !important;
}

body.holdem-table-active .card.club,
body.holdem-table-active .card.club .rank,
body.holdem-table-active .card.club .suit {
  color: #18a64b !important;
}

body.holdem-table-active #hero {
  width: min(360px, 94vw);
  min-height: 124px;
}

body.holdem-table-active #hero .mobile-hero-seat {
  min-height: 124px;
}

body.holdem-table-active #hero .hero-info {
  left: var(--hero-profile-x) !important;
  bottom: -2px;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .holes {
  left: var(--hero-cards-x) !important;
  bottom: var(--hero-cards-bottom) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount {
  left: var(--hero-cards-x) !important;
  bottom: calc(var(--hero-cards-bottom) + var(--mp-hero-card-h) + 7px) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .hero-hand-strength {
  left: var(--hero-cards-x) !important;
  bottom: 2px !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  left: var(--hero-cards-x) !important;
  bottom: var(--hero-cards-bottom) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  left: var(--hero-cards-x) !important;
  bottom: calc(var(--hero-cards-bottom) + var(--mp-hero-card-h) + 7px) !important;
}

body.holdem-table-active .seat-clock-12 .seat-role-stack {
  left: calc(50% + 18px) !important;
  right: auto !important;
  top: auto !important;
  bottom: -15px !important;
  transform: none !important;
}

body.holdem-table-active .seat-clock-130 .seat-role-stack,
body.holdem-table-active .seat-clock-3 .seat-role-stack,
body.holdem-table-active .seat-clock-430 .seat-role-stack {
  left: -13px !important;
  right: auto !important;
  top: 18px !important;
  bottom: auto !important;
  transform: none !important;
}

body.holdem-table-active .seat-clock-1030 .seat-role-stack,
body.holdem-table-active .seat-clock-9 .seat-role-stack,
body.holdem-table-active .seat-clock-730 .seat-role-stack {
  left: auto !important;
  right: -13px !important;
  top: 18px !important;
  bottom: auto !important;
  transform: none !important;
}

body.holdem-table-active #hero .hero-avatar-wrap .seat-role-stack {
  left: -20px !important;
  right: auto !important;
  top: 12px !important;
  bottom: auto !important;
  transform: none !important;
}

@media (max-width: 440px) {
  body.holdem-table-active {
    --hero-profile-x: calc(50% + clamp(84px, 24vw, 102px));
    --hero-cards-bottom: clamp(36px, 8.5vw, 44px);
  }
}

/* ─── Layout correction v6: no top preview/prize, stack toggle, inner anchors ─ */
body.holdem-table-active {
  --mp-hero-avatar: var(--mp-seat-avatar);
  --mp-hero-card-w: var(--mp-seat-card-w);
  --mp-hero-card-h: var(--mp-seat-card-h);
  --hero-profile-x: calc(50% - clamp(34px, 9.2vw, 44px));
  --hero-cards-x: calc(50% + clamp(30px, 8vw, 42px));
  --hero-cards-bottom: clamp(15px, 3.7vw, 22px);
  --hero-action-gap: clamp(8px, 1.35dvh, 14px);
}

body.holdem-table-active #balance,
body.holdem-table-active #balance::before,
body.holdem-table-active #balance::after {
  display: none !important;
  content: none !important;
}

body.holdem-table-active .gg-topbar-scroll,
body.holdem-table-active .gg-topbar-scroll::before {
  display: none !important;
  content: none !important;
}

body.holdem-table-active .gg-topbar {
  top: clamp(52px, 7.5dvh, 68px) !important;
  left: clamp(18px, 4vw, 26px) !important;
  right: clamp(16px, 4vw, 24px) !important;
  height: 42px !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
}

body.holdem-table-active .gg-topbar .back-btn,
body.holdem-table-active .gg-topbar-actions {
  pointer-events: auto;
}

body.holdem-table-active .gg-topbar-actions {
  top: 0 !important;
  right: 0 !important;
}

body.holdem-table-active .stack-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.holdem-table-active .mobile-seat-card,
body.holdem-table-active .mobile-hero-seat {
  position: relative;
}

body.holdem-table-active .seat-role-stack {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 19 !important;
  pointer-events: none;
}

body.holdem-table-active .role-badge {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  font-size: 8px !important;
  line-height: 15px !important;
}

body.holdem-table-active .blind-role {
  width: 20px !important;
  height: 14px !important;
  min-width: 20px !important;
  font-size: 7px !important;
  line-height: 14px !important;
}

body.holdem-table-active .seat-clock-12 .seat-role-stack {
  left: 50% !important;
  top: calc(100% + 9px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .seat-clock-130 .seat-role-stack,
body.holdem-table-active .seat-clock-3 .seat-role-stack,
body.holdem-table-active .seat-clock-430 .seat-role-stack {
  left: -18px !important;
  top: 52% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-1030 .seat-role-stack,
body.holdem-table-active .seat-clock-9 .seat-role-stack,
body.holdem-table-active .seat-clock-730 .seat-role-stack {
  left: auto !important;
  right: -18px !important;
  top: 52% !important;
  bottom: auto !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active #hero {
  width: min(218px, 74vw) !important;
  min-height: clamp(76px, 18vw, 90px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(64px, 8dvh, 84px)) !important;
  transform: translateX(-50%) !important;
  z-index: 32;
}

body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  bottom: calc(var(--mp-action-h) + env(safe-area-inset-bottom, 0px) + var(--hero-action-gap)) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .mobile-hero-seat {
  min-height: clamp(76px, 18vw, 90px) !important;
}

body.holdem-table-active #hero .hero-info {
  left: var(--hero-profile-x) !important;
  bottom: 0 !important;
  width: var(--mp-seat-panel-w) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .hero-avatar-wrap {
  width: var(--mp-seat-avatar) !important;
  height: var(--mp-seat-avatar) !important;
}

body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .lavatar {
  width: var(--mp-seat-avatar) !important;
  height: var(--mp-seat-avatar) !important;
}

body.holdem-table-active #hero .hero-nameplate {
  width: var(--mp-seat-panel-w) !important;
  min-height: 36px !important;
  padding: 9px 3px 4px !important;
  border-radius: 5px !important;
}

body.holdem-table-active #hero .seat-v-badge {
  min-width: 28px !important;
  bottom: -6px !important;
  padding: 1px 5px 2px !important;
  font-size: 9px !important;
}

body.holdem-table-active #hero .timer-ring {
  width: calc(var(--mp-seat-avatar) + 8px) !important;
  height: calc(var(--mp-seat-avatar) + 8px) !important;
}

body.holdem-table-active #hero .holes,
body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  left: var(--hero-cards-x) !important;
  bottom: var(--hero-cards-bottom) !important;
  gap: clamp(3px, 0.9vw, 5px) !important;
  transform: translateX(-50%) !important;
  z-index: 14 !important;
}

body.holdem-table-active #hero .card.large,
body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: var(--mp-seat-card-w) !important;
  height: var(--mp-seat-card-h) !important;
  border-radius: 4px !important;
}

body.holdem-table-active #hero .card.large .rank {
  font-size: calc(var(--mp-seat-card-w) * 0.48) !important;
}

body.holdem-table-active #hero .card.large .suit {
  font-size: calc(var(--mp-seat-card-w) * 0.56) !important;
}

body.holdem-table-active #hero .seat-role-stack {
  left: calc(var(--hero-profile-x) + clamp(24px, 6vw, 31px)) !important;
  bottom: calc(var(--mp-seat-avatar) + 17px) !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  left: var(--hero-cards-x) !important;
  bottom: calc(var(--hero-cards-bottom) + var(--mp-seat-card-h) + 5px) !important;
  transform: translateX(-50%) !important;
  z-index: 17 !important;
}

body.holdem-table-active #hero .action-badge,
body.holdem-table-active.holdem-action-open #hero .action-badge,
body.holdem-table-active.holdem-action-panel-visible #hero .action-badge {
  left: var(--hero-cards-x) !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--hero-cards-bottom) + var(--mp-seat-card-h) + 22px) !important;
  transform: translateX(-50%) !important;
  z-index: 18 !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  left: var(--hero-cards-x) !important;
  bottom: 0 !important;
  max-width: clamp(82px, 27vw, 118px) !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  font-size: clamp(8px, 2.25vw, 10px) !important;
  white-space: nowrap !important;
  z-index: 15 !important;
}

body.holdem-table-active .seat .commit,
body.holdem-table-active .seat .bet-indicator {
  position: absolute !important;
  display: inline-grid !important;
  justify-items: center !important;
  gap: 1px !important;
  min-width: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f3ecdf !important;
  font-size: clamp(9px, 2.55vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.95) !important;
  z-index: 17 !important;
  pointer-events: none !important;
}

body.holdem-table-active .seat .commit .bet-chip-stack {
  width: 18px !important;
  height: 13px !important;
  border-radius: 7px 7px 4px 4px !important;
}

body.holdem-table-active .seat-clock-12 .commit {
  left: 50% !important;
  top: calc(100% + 26px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .seat-clock-130 .commit,
body.holdem-table-active .seat-clock-3 .commit,
body.holdem-table-active .seat-clock-430 .commit {
  left: -36px !important;
  right: auto !important;
  top: 58% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-1030 .commit,
body.holdem-table-active .seat-clock-9 .commit,
body.holdem-table-active .seat-clock-730 .commit {
  left: auto !important;
  right: -36px !important;
  top: 58% !important;
  bottom: auto !important;
  transform: translate(50%, -50%) !important;
}

@media (max-width: 440px) {
  body.holdem-table-active {
    --hero-profile-x: calc(50% - clamp(31px, 8.3vw, 39px));
    --hero-cards-x: calc(50% + clamp(28px, 7.4vw, 37px));
    --hero-cards-bottom: clamp(14px, 3.55vw, 20px);
  }
}

/* v6.1: separate table-inner role badges from betting spots. */
body.holdem-table-active .seat-clock-12 .seat-role-stack {
  left: calc(50% + 18px) !important;
  top: calc(100% + 7px) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .seat-clock-12 .commit {
  left: 50% !important;
  top: calc(100% + 33px) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .seat-clock-130 .seat-role-stack,
body.holdem-table-active .seat-clock-3 .seat-role-stack,
body.holdem-table-active .seat-clock-430 .seat-role-stack {
  left: -14px !important;
  top: 28% !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-130 .commit,
body.holdem-table-active .seat-clock-3 .commit,
body.holdem-table-active .seat-clock-430 .commit {
  left: -44px !important;
  top: 72% !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-1030 .seat-role-stack,
body.holdem-table-active .seat-clock-9 .seat-role-stack,
body.holdem-table-active .seat-clock-730 .seat-role-stack {
  right: -14px !important;
  top: 28% !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active .seat-clock-1030 .commit,
body.holdem-table-active .seat-clock-9 .commit,
body.holdem-table-active .seat-clock-730 .commit {
  right: -44px !important;
  top: 72% !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active .seat .player-state-badge:not(.toact-badge) {
  left: 50% !important;
  right: auto !important;
  top: calc(-1 * var(--mp-seat-card-h) - 22px) !important;
  transform: translateX(-50%) !important;
}

/* Targeted partial fix: only requested bet spots + hero card/label spacing. */
body.holdem-table-active {
  --mp-hero-card-scale-v7: 1.12;
  --mp-hero-card-w-v7: calc(var(--mp-seat-card-w) * var(--mp-hero-card-scale-v7));
  --mp-hero-card-h-v7: calc(var(--mp-seat-card-h) * var(--mp-hero-card-scale-v7));
}

body.holdem-table-active .seat-clock-12 .commit {
  top: calc(100% - 14px) !important;
}

body.holdem-table-active .seat-clock-430 .commit {
  left: -56px !important;
  top: -18% !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-730 .commit {
  right: -56px !important;
  top: -18% !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active #hero {
  width: min(260px, 82vw) !important;
}

body.holdem-table-active #hero .card.large,
body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: var(--mp-hero-card-w-v7) !important;
  height: var(--mp-hero-card-h-v7) !important;
}

body.holdem-table-active #hero .card.large .rank {
  font-size: calc(var(--mp-hero-card-w-v7) * 0.48) !important;
}

body.holdem-table-active #hero .card.large .suit {
  font-size: calc(var(--mp-hero-card-w-v7) * 0.56) !important;
}

body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  left: var(--hero-profile-x) !important;
  bottom: calc(var(--mp-seat-avatar) + 58px) !important;
}

body.holdem-table-active #hero .action-badge,
body.holdem-table-active.holdem-action-open #hero .action-badge,
body.holdem-table-active.holdem-action-panel-visible #hero .action-badge {
  bottom: calc(var(--hero-cards-bottom) + var(--mp-hero-card-h-v7) + 20px) !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  width: max-content !important;
  max-width: min(190px, 52vw) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Pixel-grid anchor adjustment: only hero profile/cards + requested bet spots. */
body.holdem-table-active {
  --hero-profile-x: calc(50% - clamp(38px, 10vw, 54px));
  --hero-cards-x: calc(50% + clamp(34px, 8.8vw, 46px));
}

body.holdem-table-active .seat-clock-430 .commit {
  left: -32px !important;
  top: -122% !important;
}

body.holdem-table-active .seat-clock-730 .commit {
  right: -62px !important;
  top: -122% !important;
}

body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  left: 50% !important;
  bottom: calc(var(--mp-seat-avatar) + 78px) !important;
}

/* 2026-05-28 targeted patch: requested bet-chip offsets + hero-only scale. */
body.holdem-table-active {
  --mp-hero-scale-v8: 1.5;
  --mp-hero-avatar-v8: calc(var(--mp-seat-avatar) * var(--mp-hero-scale-v8));
  --mp-hero-card-w-v8: calc(var(--mp-seat-card-w) * var(--mp-hero-scale-v8));
  --mp-hero-card-h-v8: calc(var(--mp-seat-card-h) * var(--mp-hero-scale-v8));
}

/* AI Bot 2 in the current top slot: keep its bet chip off the stack text. */
body.holdem-table-active .seat-clock-12 .commit {
  left: 50% !important;
  top: calc(100% + 26px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

/* AI Bot 5 / lower-right slot: pull the bet chip down toward 5 o'clock. */
body.holdem-table-active .seat-clock-430 .commit {
  left: -30px !important;
  top: 42% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* AI Bot 6 / lower-left slot: pull the bet chip down toward 7 o'clock. */
body.holdem-table-active .seat-clock-730 .commit {
  left: auto !important;
  right: -30px !important;
  top: 42% !important;
  bottom: auto !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active #hero {
  width: min(360px, 90vw) !important;
}

body.holdem-table-active #hero .hero-avatar-wrap {
  cursor: pointer;
}

body.holdem-table-active #hero .hero-avatar-wrap,
body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .lavatar {
  width: var(--mp-hero-avatar-v8) !important;
  height: var(--mp-hero-avatar-v8) !important;
}

body.holdem-table-active #hero .hero-avatar-wrap .timer-ring {
  width: calc(var(--mp-hero-avatar-v8) + 10px) !important;
  height: calc(var(--mp-hero-avatar-v8) + 10px) !important;
}

body.holdem-table-active #hero .hero-nameplate {
  width: calc(var(--mp-seat-panel-w) * 1.34) !important;
  background:
    linear-gradient(180deg, rgba(42, 53, 67, 0.96), rgba(16, 20, 27, 0.97)) !important;
  border: 1px solid rgba(164, 190, 232, 0.34) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.holdem-table-active #hero .hero-nameplate .name {
  font-size: clamp(13px, 3.4vw, 17px) !important;
}

body.holdem-table-active #hero .hero-nameplate .chips {
  font-size: clamp(16px, 4.2vw, 22px) !important;
}

body.holdem-table-active #hero .seat-v-badge {
  display: none !important;
}

body.holdem-table-active #hero .card.large,
body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: var(--mp-hero-card-w-v8) !important;
  height: var(--mp-hero-card-h-v8) !important;
}

body.holdem-table-active #hero .card.large .rank {
  font-size: calc(var(--mp-hero-card-w-v8) * 0.48) !important;
}

body.holdem-table-active #hero .card.large .suit {
  font-size: calc(var(--mp-hero-card-w-v8) * 0.56) !important;
}

body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  bottom: calc(var(--hero-cards-bottom) + var(--mp-hero-card-h-v8) + 8px) !important;
}

/* 2026-05-28 targeted v9: only requested chip spots, hero V, stack line, hero card scale. */
body.holdem-table-active {
  --mp-hero-scale-v9: 2;
  --mp-hero-card-w-v9: calc(var(--mp-seat-card-w) * var(--mp-hero-scale-v9));
  --mp-hero-card-h-v9: calc(var(--mp-seat-card-h) * var(--mp-hero-scale-v9));
  --hero-cards-x: calc(var(--hero-profile-x) + (var(--mp-seat-panel-w) * 0.61) + var(--mp-hero-card-w-v9) + clamp(6px, 1.4vw, 10px));
}

body.holdem-table-active .seat-clock-12 .commit {
  left: 50% !important;
  top: calc(100% + 6px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .seat-clock-430 .commit {
  left: -48px !important;
  top: 8% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-730 .commit {
  left: auto !important;
  right: -48px !important;
  top: 8% !important;
  bottom: auto !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  left: calc(var(--hero-profile-x) + 64px) !important;
  bottom: calc(var(--hero-cards-bottom) + var(--mp-hero-card-h-v9) + 12px) !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  z-index: 19 !important;
}

body.holdem-table-active #hero .hero-info::before,
body.holdem-table-active #hero .seat-v-badge {
  display: none !important;
  content: none !important;
}

body.holdem-table-active .stack-toggle,
body.holdem-table-active .mobile-player-panel .chips,
body.holdem-table-active #hero .hero-nameplate .name,
body.holdem-table-active #hero .hero-nameplate .chips {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

body.holdem-table-active #hero .hero-nameplate {
  width: calc(var(--mp-seat-panel-w) * 1.22) !important;
  padding: 5px 7px 6px !important;
  min-height: auto !important;
}

body.holdem-table-active #hero .hero-nameplate .name {
  font-size: clamp(11px, 2.8vw, 14px) !important;
  line-height: 1.05 !important;
}

body.holdem-table-active #hero .hero-nameplate .chips {
  font-size: clamp(13px, 3.35vw, 17px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

body.holdem-table-active #hero .card.large,
body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: var(--mp-hero-card-w-v9) !important;
  height: var(--mp-hero-card-h-v9) !important;
}

body.holdem-table-active #hero .card.large .rank {
  font-size: calc(var(--mp-hero-card-w-v9) * 0.46) !important;
}

body.holdem-table-active #hero .card.large .suit {
  font-size: calc(var(--mp-hero-card-w-v9) * 0.54) !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* 2026-05-28 targeted v10: cart removal + hero nameplate nudge + role badge separation. */
body.holdem-table-active .text-scale-toggle {
  display: none !important;
}

body.holdem-table-active #hero .hero-nameplate {
  transform: translateX(-14px) !important;
}

body.holdem-table-active .seat-clock-12 .seat-role-stack {
  left: calc(50% + 48px) !important;
  top: calc(100% + 14px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .seat-clock-130 .seat-role-stack,
body.holdem-table-active .seat-clock-3 .seat-role-stack,
body.holdem-table-active .seat-clock-430 .seat-role-stack {
  left: -42px !important;
  top: 68% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-1030 .seat-role-stack,
body.holdem-table-active .seat-clock-9 .seat-role-stack,
body.holdem-table-active .seat-clock-730 .seat-role-stack {
  left: auto !important;
  right: -42px !important;
  top: 68% !important;
  bottom: auto !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active #hero .seat-role-stack {
  left: calc(var(--hero-profile-x) + 58px) !important;
  bottom: calc(var(--mp-hero-avatar-v8) + 24px) !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
}

/* 2026-05-28 targeted v11: stronger cart hide + fine role/nameplate separation. */
body.holdem-table-active #textScaleToggle,
body.holdem-table-active .text-scale-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.holdem-table-active #textScaleToggle::before,
body.holdem-table-active .text-scale-toggle::before {
  content: none !important;
  display: none !important;
}

body.holdem-table-active #hero .hero-nameplate {
  transform: translateX(-26px) !important;
}

body.holdem-table-active .seat-clock-12 .seat-role-stack {
  left: calc(50% + 72px) !important;
  top: calc(100% + 12px) !important;
}

body.holdem-table-active .seat-clock-130 .seat-role-stack,
body.holdem-table-active .seat-clock-3 .seat-role-stack,
body.holdem-table-active .seat-clock-430 .seat-role-stack {
  left: -24px !important;
  top: 30% !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-1030 .seat-role-stack,
body.holdem-table-active .seat-clock-9 .seat-role-stack,
body.holdem-table-active .seat-clock-730 .seat-role-stack {
  right: -24px !important;
  top: 30% !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active #hero .seat-role-stack {
  left: calc(var(--hero-profile-x) + 42px) !important;
  bottom: calc(var(--mp-hero-avatar-v8) + 38px) !important;
}

/* 2026-05-28 targeted v12: center player profile stacks and remove V badge. */
body.holdem-table-active .seat-v-badge {
  display: none !important;
  visibility: hidden !important;
  content: none !important;
}

body.holdem-table-active .mobile-player-panel,
body.holdem-table-active #hero .hero-nameplate {
  box-sizing: border-box !important;
  text-align: center !important;
}

body.holdem-table-active .mobile-player-panel .name,
body.holdem-table-active .mobile-player-panel .chips,
body.holdem-table-active #hero .hero-nameplate .name,
body.holdem-table-active #hero .hero-nameplate .chips {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.holdem-table-active #hero .hero-info {
  width: max(var(--mp-hero-avatar-v8), calc(var(--mp-seat-panel-w) * 1.22)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body.holdem-table-active #hero .hero-avatar-wrap,
body.holdem-table-active #hero .hero-nameplate {
  margin-left: auto !important;
  margin-right: auto !important;
}

body.holdem-table-active #hero .hero-nameplate {
  transform: none !important;
}

/* 2026-05-28 targeted v13: move table actions behind the top-left menu. */
body.holdem-table-active #title {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}

body.holdem-table-active .gg-topbar-actions {
  display: none !important;
  left: clamp(12px, 3.2vw, 22px) !important;
  right: auto !important;
  top: clamp(50px, 7dvh, 62px) !important;
  gap: 7px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(5, 4, 3, 0.7) !important;
  pointer-events: auto !important;
  z-index: 82 !important;
}

body.holdem-table-active.table-actions-open .gg-topbar-actions {
  display: flex !important;
}

body.holdem-table-active .table-tool-rail {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2026-05-28 targeted v14: tournament info trigger + bottom sheet. */
body.holdem-table-active .tournament-info-trigger {
  position: fixed;
  left: max(12px, calc((100vw - var(--mp-screen-w, 390px)) / 2 + 12px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 76;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  min-height: 58px;
  padding: 7px 8px 8px;
  border: 1px solid rgba(245, 158, 11, 0.58);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.94), rgba(127, 29, 29, 0.82));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff7ed;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

body.holdem-table-active .tournament-info-trigger.hidden {
  display: none !important;
}

body.holdem-table-active.holdem-action-open .tournament-info-trigger {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mp-action-h, 156px) + 12px);
}

.tournament-info-trigger span {
  display: block;
  max-width: 100%;
  color: #fff7ed;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tournament-info-trigger strong {
  display: block;
  max-width: 100%;
  margin-top: 5px;
  color: #facc15;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tournament-info-sheet.hidden {
  display: none !important;
}

.tournament-info-sheet {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: auto;
}

body.tournament-info-open {
  overflow: hidden;
}

.tis-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
}

.tis-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100vw, 620px);
  height: min(70dvh, 650px);
  max-height: calc(100dvh - 76px);
  display: flex;
  flex-direction: column;
  color: #f8fafc;
  background: #050505;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tis-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 10px;
  padding: 14px 14px 10px;
  background: #000;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.tis-title-wrap {
  min-width: 0;
}

.tis-title {
  max-width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tis-meta {
  margin-top: 5px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tis-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f8fafc;
  font-size: 34px;
  font-weight: 350;
  line-height: 36px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tis-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #050505;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.tis-tab {
  min-width: 0;
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #e5e7eb;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}

.tis-tab.is-active {
  color: #38bdf8;
  border-bottom-color: #0ea5e9;
}

.tis-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #030303;
}

.tis-state {
  padding: 32px 16px;
  color: #94a3b8;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.tis-info-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: #171717;
}

.tis-info-strip > div {
  min-width: 0;
  padding: 8px 12px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tis-level-hero {
  padding: 24px 16px 20px;
  text-align: center;
  background:
    linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.08), transparent),
    #090909;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.tis-level-label {
  color: #e5e7eb;
  font-size: 15px;
  font-weight: 850;
}

.tis-level-clock {
  margin-top: 8px;
  color: #fff;
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tis-level-sub {
  margin-top: 10px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 650;
}

.tis-my-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.tis-my-grid > div {
  min-width: 0;
  padding: 12px 10px;
  background: #060606;
}

.tis-my-grid span,
.tis-kv span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.tis-my-grid strong {
  display: block;
  margin-top: 5px;
  color: #f8fafc;
  font-size: 18px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tis-my-grid strong.is-gold,
.tis-kv strong.is-gold {
  color: #facc15;
}

.tis-section {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.tis-kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 34px;
}

.tis-kv strong {
  min-width: 0;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tis-prize-card {
  padding: 28px 16px;
  text-align: center;
  background: #181818;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.tis-prize-card span {
  display: block;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 750;
}

.tis-prize-card strong {
  display: block;
  margin-top: 10px;
  color: #f8fafc;
  font-size: 26px;
  font-weight: 950;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.tis-prize-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 10px 0;
}

.tis-prize-split div {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
}

.tis-prize-split span,
.tis-prize-split strong {
  display: block;
  text-align: center;
}

.tis-prize-split span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.tis-prize-split strong {
  margin-top: 6px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tis-reward-block {
  margin: 12px 10px 18px;
  padding: 14px 14px;
  background: #070707;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
}

.tis-reward-block span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 750;
}

.tis-reward-block strong {
  display: block;
  margin-top: 8px;
  color: #f8fafc;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
}

.tis-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tis-table th,
.tis-table td {
  min-width: 0;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.17);
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.2;
  vertical-align: middle;
}

.tis-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #202020;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.tis-table td {
  font-weight: 650;
}

.tis-table .num,
.tis-table .stack {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tis-table .rank {
  width: 54px;
  text-align: center;
  color: #f8fafc;
}

.tis-table .name-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tis-table tr.is-hero td,
.tis-table tr.is-current td {
  color: #facc15;
  background: rgba(250, 204, 21, 0.08);
}

.tis-table tr.is-past td {
  color: #777;
}

.tis-table tr.is-note td {
  text-align: center;
  color: #cbd5e1;
  background: #080808;
}

.tis-table-caption {
  padding: 22px 14px 14px;
  color: #facc15;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.tis-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  color: #111827;
  background: #e5e7eb;
  font-size: 12px;
  font-weight: 950;
}

.tis-medal.rank-1 { background: #facc15; }
.tis-medal.rank-2 { background: #cbd5e1; }
.tis-medal.rank-3 { background: #fca5a5; }

@media (min-width: 720px) {
  .tis-panel {
    bottom: 22px;
    height: min(68dvh, 680px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  .tis-panel {
    width: 100vw;
    height: 68dvh;
  }
  .tis-title {
    font-size: 17px;
  }
  .tis-tab {
    font-size: 14px;
  }
  .tis-table th,
  .tis-table td {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
  }
  .tis-level-clock {
    font-size: 40px;
  }
}

/* PokerGameViewport v15: a single 390x844 poker stage scaled to the real viewport. */
:root {
  --app-width: 100vw;
  --app-height: 100vh;
  --poker-design-width: 390px;
  --poker-design-height: 844px;
  --poker-felt-height: 702px;
  --poker-action-panel-height: 142px;
  --poker-stage-scale: 1;
  --poker-frame-width: 390px;
  --poker-frame-height: 844px;
  --poker-stage-top: 0px;
  --table-stage-offset-y: 0px;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

body.holdem-table-active {
  width: 100%;
  height: var(--app-height);
  min-height: var(--app-height);
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: radial-gradient(ellipse at 50% 24%, rgba(78, 57, 43, 0.36), transparent 52%), #070504 !important;
}

body.holdem-table-active #app,
body.holdem-table-active #tableView {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--app-height) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.holdem-table-active #tableView.hidden {
  display: none !important;
}

#pokerGameViewport {
  position: fixed;
  left: 50%;
  top: var(--poker-stage-top);
  width: var(--poker-frame-width);
  height: var(--poker-frame-height);
  transform: translateX(-50%) translateY(var(--table-stage-offset-y));
  transform-origin: top center;
  overflow: visible;
  contain: layout size;
  z-index: 20;
}

body.holdem-table-active.is-ios,
body.holdem-table-active.ios,
body.holdem-table-active[data-platform="ios"],
body.holdem-table-active[data-telegram-platform="ios"],
body.holdem-table-active[data-telegram-platform="iphone"],
body.holdem-table-active[data-telegram-platform="ipad"] {
  --table-stage-offset-y: clamp(18px, 3dvh, 30px);
}

@media (max-height: 760px) {
  body.holdem-table-active.is-ios,
  body.holdem-table-active.ios,
  body.holdem-table-active[data-platform="ios"],
  body.holdem-table-active[data-telegram-platform="ios"],
  body.holdem-table-active[data-telegram-platform="iphone"],
  body.holdem-table-active[data-telegram-platform="ipad"] {
    --table-stage-offset-y: 18px;
  }
}

#pokerStageCanvas {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--poker-design-width);
  height: var(--poker-design-height);
  transform: scale(var(--poker-stage-scale));
  transform-origin: top left;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55), transparent 13%, transparent 87%, rgba(0,0,0,0.55)),
    radial-gradient(ellipse at 50% 40%, rgba(78, 57, 43, 0.38), transparent 68%),
    linear-gradient(180deg, #070504 0%, #1c120e 45%, #050403 100%);
}

body.holdem-table-active #topbar {
  position: fixed !important;
  left: 50% !important;
  top: var(--poker-stage-top) !important;
  width: var(--poker-design-width) !important;
  max-width: var(--poker-design-width) !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(4,4,3,0.96), rgba(4,4,3,0.44) 72%, transparent) !important;
  transform: translateX(-50%) scale(var(--poker-stage-scale)) !important;
  transform-origin: top center !important;
  z-index: 80 !important;
}

body.holdem-table-active #title {
  position: absolute !important;
  left: 16px !important;
  top: 12px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  pointer-events: auto !important;
}

body.holdem-table-active #title::before {
  content: "\2630";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #ddd6ca;
  font-size: 27px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.92);
}

body.holdem-table-active #balance,
body.holdem-table-active #textScaleToggle,
body.holdem-table-active .text-scale-toggle,
body.holdem-table-active #multiTableStrip,
body.holdem-table-active .gg-topbar-scroll,
body.holdem-table-active #handInfo,
body.holdem-table-active #potInfo,
body.holdem-table-active #spectatorBadge,
body.holdem-table-active .table-snapshot-bar,
body.holdem-table-active .table-tool-rail {
  display: none !important;
}

body.holdem-table-active #pokerStageCanvas #tableHeader.gg-topbar {
  position: absolute !important;
  left: 0 !important;
  top: 54px !important;
  width: var(--poker-design-width) !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  z-index: 42 !important;
  pointer-events: none;
}

body.holdem-table-active #leaveTable {
  position: absolute !important;
  left: 14px !important;
  top: 3px !important;
  width: 42px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(229, 220, 201, 0.24) !important;
  border-radius: 13px !important;
  background: rgba(22, 20, 18, 0.78) !important;
  color: #e3d8c9 !important;
  font-size: 25px !important;
  line-height: 35px !important;
  pointer-events: auto;
}

body.holdem-table-active .gg-topbar-actions {
  position: absolute !important;
  left: 62px !important;
  right: auto !important;
  top: 3px !important;
  display: none !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(5, 4, 3, 0.72) !important;
  transform: none !important;
  pointer-events: auto;
}

body.holdem-table-active.table-actions-open .gg-topbar-actions {
  display: flex !important;
}

body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

body.holdem-table-active #felt {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--poker-design-width) !important;
  height: var(--poker-felt-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  background:
    radial-gradient(ellipse at 50% 27%, rgba(76, 58, 45, 0.35), transparent 48%),
    linear-gradient(180deg, #090706 0%, #1d130f 44%, #070504 100%) !important;
}

body.holdem-table-active #felt::before {
  content: "";
  position: absolute;
  left: 53px !important;
  right: 53px !important;
  top: 112px !important;
  bottom: 70px !important;
  border: 1px solid rgba(10, 9, 8, 0.92) !important;
  border-radius: 48% / 43% !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06), transparent 9%, transparent 91%, rgba(0,0,0,0.28)),
    radial-gradient(ellipse at 50% 38%, rgba(116,107,92,0.66), rgba(61,55,47,0.98) 54%, rgba(37,32,27,1) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 26px rgba(0,0,0,0.54), 0 18px 38px rgba(0,0,0,0.78) !important;
  z-index: 0;
  pointer-events: none;
}

body.holdem-table-active #felt::after {
  content: "";
  position: absolute;
  left: 67px !important;
  right: 67px !important;
  top: 126px !important;
  bottom: 86px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 47% / 42% !important;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(82,75,64,0.72), transparent 62%),
    radial-gradient(ellipse at 50% 70%, rgba(22,19,16,0.38), transparent 72%),
    linear-gradient(180deg, #403a31 0%, #312d27 48%, #28241f 100%) !important;
  box-shadow: inset 0 0 48px rgba(0,0,0,0.5), inset 0 0 0 4px rgba(15,13,11,0.62), 0 0 0 1px rgba(0,0,0,0.78) !important;
  z-index: 1;
  pointer-events: none;
}

body.holdem-table-active #potDisplay {
  position: absolute !important;
  left: 50% !important;
  top: 246px !important;
  min-width: 122px !important;
  max-width: 164px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  z-index: 18 !important;
  pointer-events: none;
}

body.holdem-table-active #potDisplay .pot-tag {
  display: block !important;
  margin-bottom: 5px !important;
  color: #d7bf43 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 6px !important;
  text-align: center !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9) !important;
}

body.holdem-table-active #potDisplay .pot-amount {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 122px !important;
  min-height: 32px !important;
  padding: 3px 17px !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06), transparent 54%), linear-gradient(180deg, #1e1915, #080705) !important;
  color: #ffe553 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: inset 0 5px 10px rgba(0,0,0,0.76), 0 6px 14px rgba(0,0,0,0.72) !important;
}

body.holdem-table-active #potDisplay .pot-amount::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #8ec7ff 0 18%, #1f89f7 35%, #063f98 100%);
}

body.holdem-table-active #potDisplay .pot-breakdown {
  display: none !important;
}

body.holdem-table-active #community {
  position: absolute !important;
  left: 50% !important;
  top: 356px !important;
  width: 207px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 37px) !important;
  grid-auto-rows: 51px !important;
  gap: 5px !important;
  transform: translate(-50%, -50%) !important;
  z-index: 17 !important;
  filter: drop-shadow(0 6px 7px rgba(0,0,0,0.62)) !important;
}

body.holdem-table-active #community .card,
body.holdem-table-active #community .community-slot {
  width: 37px !important;
  min-width: 37px !important;
  height: 51px !important;
  min-height: 51px !important;
  margin: 0 !important;
  border-radius: 6px !important;
}

body.holdem-table-active .card {
  width: 37px;
  height: 51px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(239,242,245,0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 9px rgba(0,0,0,0.52);
}

body.holdem-table-active .card .rank { font-size: 15px !important; letter-spacing: 0 !important; }
body.holdem-table-active .card .suit { font-size: 17px !important; }

body.holdem-table-active .card.hidden-card,
body.holdem-table-active .card.back {
  border: 2px solid #f5dfad !important;
  background: repeating-linear-gradient(45deg, rgba(255,234,186,0.28) 0 3px, transparent 3px 8px), linear-gradient(135deg, #841716, #d12b26 52%, #70100e) !important;
}

body.holdem-table-active #community .card.placeholder {
  border: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0 10%, transparent 10%), linear-gradient(180deg, rgba(196,193,183,0.76), rgba(139,134,123,0.78)) !important;
  opacity: 0.72 !important;
}

body.holdem-table-active .blind-info-panel {
  position: absolute !important;
  left: 50% !important;
  top: 442px !important;
  width: 222px !important;
  display: grid;
  gap: 2px;
  color: rgba(231,225,214,0.72) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  text-align: center !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.96) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 14 !important;
  pointer-events: none;
}

body.holdem-table-active #seats,
body.holdem-table-active #seatGhosts {
  position: absolute !important;
  inset: 0 !important;
  z-index: 22 !important;
  pointer-events: none;
}

body.holdem-table-active .seat {
  position: absolute !important;
  width: 66px !important;
  min-height: 74px !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  overflow: visible !important;
  pointer-events: auto;
  z-index: 22 !important;
}

body.holdem-table-active .mobile-seat-card {
  position: relative !important;
  min-height: 74px !important;
}

body.holdem-table-active .seat .avatar-wrap,
body.holdem-table-active .seat-avatar-shell {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
  z-index: 5 !important;
}

body.holdem-table-active .seat .avatar,
body.holdem-table-active .seat .lavatar,
body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .lavatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(12, 11, 10, 0.92) !important;
  color: transparent !important;
  text-shadow: none !important;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.26), transparent 22%), radial-gradient(circle at 52% 50%, hsla(var(--avatar-hue, 205), 48%, 48%, 0.9), hsla(var(--avatar-hue, 205), 52%, 22%, 0.98) 72%), linear-gradient(145deg, #35455a, #171717) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 4px 10px rgba(0,0,0,0.7) !important;
}

body.holdem-table-active .avatar-letter {
  position: absolute;
  right: 6px;
  bottom: 4px;
  color: rgba(255,255,255,0.8);
  font-size: 10px;
  font-weight: 900;
}

body.holdem-table-active .seat.toact .avatar,
body.holdem-table-active .seat.toact .lavatar,
body.holdem-table-active #hero.toact .hero-info .avatar,
body.holdem-table-active #hero.toact .hero-info .lavatar {
  border-color: #fff45d !important;
  box-shadow: 0 0 0 3px rgba(244,236,55,0.25), 0 0 16px rgba(230,237,58,0.64), 0 5px 12px rgba(0,0,0,0.8) !important;
  animation: none !important;
}

body.holdem-table-active .timer-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transform: translate(-50%, -50%) !important;
  z-index: 8 !important;
  pointer-events: none;
}

body.holdem-table-active .timer-ring-circle {
  stroke: #22c8ee;
  stroke-width: 3.2;
  fill: none;
}

body.holdem-table-active .seat .name-pill,
body.holdem-table-active .mobile-player-panel {
  position: relative !important;
  width: 52px !important;
  min-height: 34px !important;
  margin: -2px auto 0 !important;
  padding: 8px 3px 4px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(18,18,16,0.96), rgba(0,0,0,0.95)) !important;
  box-shadow: 0 5px 10px rgba(0,0,0,0.72) !important;
  z-index: 4 !important;
}

body.holdem-table-active .seat .name,
body.holdem-table-active .seat .chips {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff7e9 !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.holdem-table-active .seat .chips {
  margin-top: 1px !important;
  font-size: 12px !important;
}

body.holdem-table-active .stack-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: center;
}

body.holdem-table-active .player-note-btn:not(.has-note),
body.holdem-table-active .player-note-tag,
body.holdem-table-active .seat-v-badge,
body.holdem-table-active .seat .name-pill::before,
body.holdem-table-active #hero .hero-info::before {
  display: none !important;
  content: none !important;
}

body.holdem-table-active .seat .holes {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: -30px !important;
  display: flex !important;
  gap: 3px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.72)) !important;
}

body.holdem-table-active .seat .holes .card {
  width: 22px !important;
  height: 30px !important;
  border-radius: 4px !important;
}

body.holdem-table-active .seat .holes .card .rank { font-size: 10px !important; }
body.holdem-table-active .seat .holes .card .suit { font-size: 11px !important; }

body.holdem-table-active .action-badge,
body.holdem-table-active .player-state-badge {
  position: absolute !important;
  left: 50% !important;
  top: -23px !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 38px !important;
  padding: 2px 7px 3px !important;
  border-radius: 999px !important;
  color: #030402 !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
  z-index: 18 !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.62) !important;
}

body.holdem-table-active .toact-badge { background: linear-gradient(180deg, #31ef52, #08ad28) !important; }
body.holdem-table-active .fold-badge { background: linear-gradient(180deg, #f2efe8, #b2aca2) !important; color: #16110c !important; }
body.holdem-table-active .allin-badge { background: linear-gradient(180deg, #ffe45a, #c77900) !important; color: #160b00 !important; }
body.holdem-table-active .wait-badge { background: linear-gradient(180deg, #87a0b8, #4c5e73) !important; color: #fff !important; }

body.holdem-table-active .seat-role-stack {
  position: absolute !important;
  display: inline-flex !important;
  gap: 2px !important;
  left: 50% !important;
  top: 39px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 12 !important;
  pointer-events: none;
}

body.holdem-table-active .role-badge {
  position: static !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 28%, #ffd146, #e78f04 70%, #8d4700) !important;
  color: #751900 !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  line-height: 15px !important;
}

body.holdem-table-active .blind-role {
  width: 20px !important;
  height: 14px !important;
  min-width: 20px !important;
  border-radius: 999px !important;
  background: #1d8be7 !important;
  color: #06101c !important;
  font-size: 7px !important;
  line-height: 14px !important;
}

body.holdem-table-active .seat .commit,
body.holdem-table-active .seat .bet-indicator {
  position: absolute !important;
  left: 50% !important;
  top: 75px !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-grid !important;
  justify-items: center !important;
  gap: 1px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f3ecdf !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.95) !important;
  transform: translateX(-50%) !important;
  z-index: 16 !important;
  pointer-events: none !important;
}

body.holdem-table-active .bet-indicator::before,
body.holdem-table-active .seat .commit::before {
  content: none !important;
}

body.holdem-table-active .bet-chip-stack {
  display: block;
  width: 18px !important;
  height: 13px !important;
  border-radius: 7px 7px 4px 4px !important;
  background: radial-gradient(circle at 35% 28%, #fff 0 8%, transparent 9%), linear-gradient(90deg, #dd2630 0 30%, #fff 30% 40%, #2386f5 40% 66%, #fff 66% 75%, #24b85d 75%) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.68) !important;
}

body.holdem-table-active #hero,
body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  position: absolute !important;
  left: 50% !important;
  bottom: 28px !important;
  width: 258px !important;
  min-height: 104px !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  transform-origin: center bottom !important;
  z-index: 32 !important;
  pointer-events: auto;
}

body.holdem-table-active #hero .mobile-hero-seat {
  position: relative !important;
  min-height: 104px !important;
}

body.holdem-table-active #hero .hero-info {
  position: absolute !important;
  left: 56px !important;
  bottom: 0 !important;
  width: 66px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .hero-avatar-wrap {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto !important;
  cursor: pointer;
}

body.holdem-table-active #hero .timer-ring {
  width: 62px !important;
  height: 62px !important;
}

body.holdem-table-active #hero .hero-nameplate {
  width: 66px !important;
  margin: -2px auto 0 !important;
  padding: 8px 4px 5px !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(42,53,67,0.96), rgba(16,20,27,0.97)) !important;
  border: 1px solid rgba(164,190,232,0.34) !important;
  box-shadow: 0 8px 14px rgba(0,0,0,0.5) !important;
}

body.holdem-table-active #hero .hero-info > .name {
  width: 66px !important;
  margin-top: -2px !important;
  padding: 8px 4px 0 !important;
  border-radius: 5px 5px 0 0 !important;
  background: linear-gradient(180deg, rgba(42,53,67,0.96), rgba(16,20,27,0.97)) !important;
  box-sizing: border-box !important;
}

body.holdem-table-active #hero .hero-info > .chips {
  width: 66px !important;
  padding: 1px 4px 5px !important;
  border-radius: 0 0 5px 5px !important;
  background: linear-gradient(180deg, rgba(16,20,27,0.97), rgba(16,20,27,0.98)) !important;
  box-sizing: border-box !important;
}

body.holdem-table-active #hero .hero-info .name,
body.holdem-table-active #hero .hero-info .chips,
body.holdem-table-active #hero .hero-nameplate .name,
body.holdem-table-active #hero .hero-nameplate .chips {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #fff7e9 !important;
  background: transparent !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.holdem-table-active #hero .hero-info .name,
body.holdem-table-active #hero .hero-nameplate .name { font-size: 11px !important; }
body.holdem-table-active #hero .hero-info .chips,
body.holdem-table-active #hero .hero-nameplate .chips { margin-top: 2px !important; font-size: 14px !important; }

body.holdem-table-active #hero .holes,
body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  position: absolute !important;
  left: 162px !important;
  bottom: 33px !important;
  display: flex !important;
  gap: 7px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 14 !important;
  filter: drop-shadow(0 6px 9px rgba(0,0,0,0.68)) !important;
}

body.holdem-table-active #hero .card.large,
body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: 49px !important;
  height: 68px !important;
  border-radius: 7px !important;
}

body.holdem-table-active #hero .card.large .rank { font-size: 23px !important; }
body.holdem-table-active #hero .card.large .suit { font-size: 26px !important; }

body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  position: absolute !important;
  left: 162px !important;
  top: auto !important;
  bottom: 104px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 40px !important;
  height: 18px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(245,197,24,0.58) !important;
  background: linear-gradient(180deg, rgba(30,24,17,0.95), rgba(12,10,8,0.96)) !important;
  color: #ffe58a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.86) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
  transform: translateX(-50%) !important;
  z-index: 17 !important;
}

body.holdem-table-active #hero .action-badge,
body.holdem-table-active.holdem-action-open #hero .action-badge,
body.holdem-table-active.holdem-action-panel-visible #hero .action-badge {
  left: 162px !important;
  top: auto !important;
  bottom: 122px !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  position: absolute !important;
  left: 162px !important;
  right: auto !important;
  bottom: 6px !important;
  width: max-content !important;
  max-width: 142px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f5d845 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
}

body.holdem-table-active #actionPanel {
  /* The panel lives OUTSIDE #pokerStageCanvas (it is NOT in the reparent list
     in ensurePokerGameViewport), so it has no transformed ancestor and
     position:fixed resolves against the real viewport. Pin it to the viewport
     bottom as a full-width bar that grows upward over the felt. This fixes the
     clip where the scaled 844-tall canvas pushed its bottom (sizing tools +
     slider) below the visible area on wide/short screens. */
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: 480px !important;
  height: auto !important;
  max-height: none !important;
  min-height: var(--poker-action-panel-height) !important;
  margin: 0 auto !important;
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.88) 16%, #020202 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  transform: none !important;
  overflow: visible !important;
  overscroll-behavior: contain;
  z-index: 45 !important;
}

body.holdem-table-active #actionPanel.hidden {
  display: flex !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.holdem-table-active .action-hint,
body.holdem-table-active .bet-amount-preview,
body.holdem-table-active #quickBets,
body.holdem-table-active #raiseSlider {
  flex: 0 0 auto;
  margin: 0 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(232,226,211,0.24) !important;
  background: linear-gradient(180deg, rgba(56,56,53,0.9), rgba(11,11,10,0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

body.holdem-table-active .action-hint {
  min-height: 23px !important;
  padding: 3px 8px !important;
}

body.holdem-table-active .action-hint strong { color: #35cfff !important; font-size: 11px !important; }
body.holdem-table-active .action-hint span { color: #f6e5a3 !important; font-size: 10px !important; }

body.holdem-table-active #quickBets {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px !important;
  padding: 3px !important;
  min-height: 23px !important;
}

body.holdem-table-active #quickBets.hidden,
body.holdem-table-active #raiseSlider.hidden,
body.holdem-table-active #actionButtons.hidden,
body.holdem-table-active #preActions.hidden {
  display: none !important;
}

body.holdem-table-active #quickBets .preset,
body.holdem-table-active #quickBets button {
  min-width: 0 !important;
  min-height: 19px !important;
  padding: 1px 2px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(94,125,181,0.54) !important;
  background: linear-gradient(180deg, #384457, #171b22) !important;
  color: #ddd8ce !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.holdem-table-active .bet-amount-preview {
  min-height: 25px !important;
  padding: 2px 8px !important;
  align-items: center !important;
}

body.holdem-table-active .bet-preview-label { font-size: 10px !important; }
body.holdem-table-active #betAmountPreviewVal { color: #f3c528 !important; font-size: 17px !important; }

body.holdem-table-active #raiseSlider {
  display: grid !important;
  grid-template-columns: 29px minmax(0, 1fr) 29px 29px !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 28px !important;
  padding: 2px !important;
}

body.holdem-table-active #raiseSlider .step-btn,
body.holdem-table-active #raiseSlider .manual-bet-btn {
  width: 29px !important;
  height: 23px !important;
  min-width: 0 !important;
  border-radius: 7px !important;
}

body.holdem-table-active #raiseSlider input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
}

body.holdem-table-active #raiseSlider output {
  display: none !important;
}

body.holdem-table-active #actionButtons {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin-top: auto !important;
  padding: 0 !important;
  background: transparent !important;
  position: static !important;
}

body.holdem-table-active #actionButtons button {
  min-width: 0 !important;
  min-height: 45px !important;
  padding: 3px 0 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(235,229,214,0.26) !important;
  background: linear-gradient(180deg, rgba(86,86,84,0.92) 0%, rgba(30,30,30,0.98) 48%, rgba(3,3,3,0.98) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -12px 18px rgba(0,0,0,0.42) !important;
}

body.holdem-table-active #actionButtons button .ab-label {
  max-width: 100% !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

body.holdem-table-active #actionButtons button .ab-amount {
  max-width: 100% !important;
  margin-top: 2px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body.holdem-table-active #btnFold .ab-label,
body.holdem-table-active #btnFold .ab-amount { color: #f3eee7 !important; }
body.holdem-table-active #btnCheckCall .ab-label,
body.holdem-table-active #btnCheckCall .ab-amount { color: #18c8ff !important; }
body.holdem-table-active #btnRaise .ab-label,
body.holdem-table-active #btnRaise .ab-amount { color: #f3c528 !important; }

body.holdem-table-active #preActions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin-top: auto !important;
}

body.holdem-table-active #preActions label {
  min-width: 0 !important;
  min-height: 45px !important;
  padding: 4px 3px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(235,229,214,0.24) !important;
  background: linear-gradient(180deg, #4b4b49 0%, #151515 100%) !important;
  color: #f5efe6 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

@keyframes preActionGlow {
  0% {
    border-color: rgba(255, 216, 74, 0.45);
    box-shadow: 0 0 4px rgba(255, 216, 74, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  50% {
    border-color: rgba(255, 216, 74, 1);
    box-shadow: 0 0 14px rgba(255, 216, 74, 0.82), inset 0 1px 0 rgba(255,255,255,0.24);
  }
  100% {
    border-color: rgba(255, 216, 74, 0.45);
    box-shadow: 0 0 4px rgba(255, 216, 74, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  }
}

body.holdem-table-active #preActions label.selected,
body.holdem-table-active #preActions label.pre-action-selected,
body.holdem-table-active #preActions label.pa-on {
  border-color: #ffd84a !important;
  background: linear-gradient(180deg, #5a4f28 0%, #17130a 100%) !important;
  color: #ffd84a !important;
  animation: preActionGlow 1.1s ease-in-out infinite;
}

body[data-reduce-motion="1"].holdem-table-active #preActions label.selected,
body[data-reduce-motion="1"].holdem-table-active #preActions label.pre-action-selected,
body[data-reduce-motion="1"].holdem-table-active #preActions label.pa-on {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  body.holdem-table-active #preActions label.selected,
  body.holdem-table-active #preActions label.pre-action-selected,
  body.holdem-table-active #preActions label.pa-on {
    animation: none;
  }
}

body.holdem-table-active .tournament-info-trigger {
  position: absolute !important;
  left: 10px !important;
  bottom: calc(var(--poker-action-panel-height) + 10px) !important;
  width: 78px !important;
  min-height: 48px !important;
  padding: 6px !important;
  z-index: 50 !important;
  transform: none !important;
}

body.holdem-table-active.holdem-action-open .tournament-info-trigger,
body.holdem-table-active.holdem-action-panel-visible .tournament-info-trigger {
  bottom: calc(var(--poker-action-panel-height) + 10px) !important;
}

body.holdem-table-active .hand-result-modal {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: calc(var(--poker-action-panel-height) + 10px) !important;
  width: 336px !important;
  transform: translateX(-50%) !important;
  z-index: 58 !important;
}

body.holdem-table-active #sitInCta {
  left: 50% !important;
  top: 506px !important;
  min-width: 104px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 35 !important;
}

body.debug-layout #pokerStageCanvas {
  outline: 2px solid rgba(56,189,248,0.9);
  outline-offset: -2px;
}

#layoutDebugOverlay {
  display: none;
}

body.debug-layout #layoutDebugOverlay {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 999;
  background-image:
    repeating-linear-gradient(to right, rgba(56,189,248,0.24) 0 1px, transparent 1px 5%),
    repeating-linear-gradient(to bottom, rgba(56,189,248,0.24) 0 1px, transparent 1px 5%),
    repeating-linear-gradient(to right, rgba(251,191,36,0.55) 0 2px, transparent 2px 10%),
    repeating-linear-gradient(to bottom, rgba(251,191,36,0.55) 0 2px, transparent 2px 10%);
}

body.debug-layout .layout-debug-label {
  position: absolute;
  color: #67e8f9;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(103,232,249,0.55);
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.1;
  transform: translate(2px, 2px);
  white-space: nowrap;
}

body.debug-layout .layout-debug-label-y {
  color: #fde68a;
  border-color: rgba(253,230,138,0.55);
}

body.debug-layout #felt {
  outline: 2px solid rgba(34,197,94,0.9);
  outline-offset: -2px;
}

body.debug-layout #felt::before {
  outline: 2px dashed rgba(244,114,182,0.9);
  outline-offset: 2px;
}

body.debug-layout #hero {
  outline: 2px solid rgba(168,85,247,0.95);
}

body.debug-layout #actionPanel {
  outline: 2px solid rgba(239,68,68,0.95);
  outline-offset: -2px;
}

body.debug-layout .seat {
  outline: 1px solid rgba(59,130,246,0.95);
}

body.debug-layout .seat .commit,
body.debug-layout #hero .commit,
body.debug-layout #hero .hero-pending-amount {
  outline: 1px solid rgba(250,204,21,0.95);
}

/* Requested local UI adjustments: top menu/rank placement and player readability. */
body.holdem-table-active #title {
  left: 16px !important;
  top: 102px !important;
  width: 38px !important;
  height: 38px !important;
  z-index: 84 !important;
}

body.holdem-table-active #title::before {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(8, 8, 7, 0.48) !important;
  color: #e8dfd1 !important;
  font-size: 25px !important;
}

body.holdem-table-active .gg-topbar-actions {
  position: absolute !important;
  left: 14px !important;
  top: 146px !important;
  right: auto !important;
  bottom: auto !important;
  display: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  min-width: 104px !important;
  padding: 8px !important;
  border: 1px solid rgba(232, 226, 211, 0.2) !important;
  border-radius: 12px !important;
  background: rgba(6, 6, 5, 0.9) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.56) !important;
  backdrop-filter: blur(10px) !important;
  pointer-events: auto !important;
  z-index: 83 !important;
}

body.holdem-table-active.table-actions-open .gg-topbar-actions {
  display: flex !important;
}

body.holdem-table-active .gg-topbar-actions .chip-mode-toggle {
  width: 100% !important;
  min-width: 88px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

body.holdem-table-active .tournament-info-trigger,
body.holdem-table-active.holdem-action-open .tournament-info-trigger,
body.holdem-table-active.holdem-action-panel-visible .tournament-info-trigger {
  position: absolute !important;
  left: auto !important;
  right: 8px !important;
  top: 64px !important;
  bottom: auto !important;
  width: 86px !important;
  min-height: 46px !important;
  padding: 6px 7px !important;
  border-radius: 8px !important;
  z-index: 76 !important;
  transform: none !important;
}

body.holdem-table-active .tournament-info-trigger span {
  font-size: 11px !important;
}

body.holdem-table-active .tournament-info-trigger strong {
  margin-top: 4px !important;
  font-size: 15px !important;
}

body.holdem-table-active .mobile-player-panel,
body.holdem-table-active .seat .name-pill {
  min-width: 58px !important;
  min-height: 38px !important;
  border: 1px solid rgba(226, 232, 240, 0.22) !important;
  background: linear-gradient(180deg, rgba(24, 29, 35, 0.98), rgba(3, 5, 8, 0.98)) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

body.holdem-table-active .seat .avatar,
body.holdem-table-active .seat .lavatar,
body.holdem-table-active #hero .hero-info .avatar,
body.holdem-table-active #hero .hero-info .lavatar {
  border: 2px solid rgba(232, 226, 211, 0.34) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,0.66) !important;
}

body.holdem-table-active .seat .name,
body.holdem-table-active .seat .chips,
body.holdem-table-active #hero .hero-nameplate .name,
body.holdem-table-active #hero .hero-nameplate .chips {
  color: #fff9ec !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.86) !important;
}

body.holdem-table-active .seat .chips,
body.holdem-table-active #hero .hero-nameplate .chips {
  color: #ffe266 !important;
  font-weight: 950 !important;
}

body.holdem-table-active {
  --hero-cards-bottom: clamp(8px, 2.3vw, 14px);
  --hero-action-gap: clamp(5px, 0.9dvh, 9px);
}

body.holdem-table-active #hero .hero-nameplate {
  min-width: 78px !important;
  border-color: rgba(255, 226, 102, 0.42) !important;
  background: linear-gradient(180deg, rgba(43, 54, 68, 0.98), rgba(9, 12, 16, 0.99)) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.62), 0 0 18px rgba(34, 211, 238, 0.18) !important;
}

body.holdem-table-active #hero .hero-avatar-wrap {
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.26)) !important;
}

body.holdem-table-active #hero .holes,
body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  bottom: var(--hero-cards-bottom) !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  bottom: calc(var(--hero-cards-bottom) - 13px) !important;
  max-width: min(202px, 54vw) !important;
  color: #ffe266 !important;
}

body.holdem-table-active .role-badge {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  font-size: 9px !important;
  line-height: 18px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.68), 0 0 0 1px rgba(255,255,255,0.16) inset !important;
}

body.holdem-table-active .blind-role {
  width: 24px !important;
  height: 16px !important;
  min-width: 24px !important;
  font-size: 8px !important;
  line-height: 16px !important;
}

body.holdem-table-active .seat-clock-12 .seat-role-stack {
  left: 50% !important;
  top: calc(100% + 16px) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .seat-clock-130 .seat-role-stack,
body.holdem-table-active .seat-clock-3 .seat-role-stack,
body.holdem-table-active .seat-clock-430 .seat-role-stack {
  left: -14px !important;
  top: 44% !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active .seat-clock-1030 .seat-role-stack,
body.holdem-table-active .seat-clock-9 .seat-role-stack,
body.holdem-table-active .seat-clock-730 .seat-role-stack {
  right: -14px !important;
  top: 44% !important;
  transform: translate(50%, -50%) !important;
}

/* Multi tournament switcher: compact top-safe-area slots for active tables. */
.multi-tournament-switcher {
  display: none;
}

body.holdem-table-active .multi-tournament-switcher {
  position: fixed !important;
  left: 50% !important;
  top: calc(var(--poker-stage-top) + env(safe-area-inset-top, 0px) + 10px) !important;
  width: min(222px, calc(100vw - 180px));
  min-width: 148px;
  min-height: 42px;
  max-height: 42px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid rgba(232, 226, 211, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 18, 16, 0.92), rgba(5, 5, 4, 0.78));
  box-shadow: 0 12px 24px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateX(-50%) scale(var(--poker-stage-scale));
  transform-origin: top center;
  z-index: 96;
  pointer-events: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.holdem-table-active .multi-tournament-switcher::-webkit-scrollbar {
  display: none;
}

body.holdem-table-active .multi-tournament-switcher.hidden {
  display: none !important;
}

body.holdem-switching-table .multi-tournament-switcher {
  opacity: 0.66;
  pointer-events: none;
}

body.holdem-table-active .mts-slot {
  position: relative;
  flex: 0 0 auto;
  min-width: 46px;
  height: 32px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 226, 211, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(46, 43, 38, 0.92), rgba(13, 12, 11, 0.96));
  color: #f8f2e6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.28);
  cursor: pointer;
  font: 900 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

body.holdem-table-active .mts-slot.is-active {
  border-color: rgba(255, 226, 102, 0.82);
  background: linear-gradient(180deg, rgba(91, 75, 34, 0.98), rgba(32, 24, 11, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 2px rgba(255, 226, 102, 0.2), 0 6px 14px rgba(0,0,0,0.34);
}

body.holdem-table-active .mts-slot.needs-action:not(.is-active) {
  border-color: rgba(248, 113, 113, 0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 2px rgba(248, 113, 113, 0.18), 0 4px 10px rgba(0,0,0,0.28);
}

body.holdem-table-active .mts-alert {
  position: absolute;
  right: -4px;
  top: -5px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  animation: mtsAlertPulse 1s ease-in-out infinite alternate;
}

body.holdem-table-active .mts-cards {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

body.holdem-table-active .mts-card {
  width: 17px;
  height: 24px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.22);
  border-radius: 4px;
  background: linear-gradient(180deg, #fffdf6, #e7dfd0);
  color: #111827;
  box-shadow: 0 2px 4px rgba(0,0,0,0.28);
  font-weight: 950;
  line-height: 1;
}

body.holdem-table-active .mts-card.is-heart,
body.holdem-table-active .mts-card.is-diamond {
  color: #dc2626;
}

body.holdem-table-active .mts-rank {
  font-size: 9px;
  letter-spacing: 0;
}

body.holdem-table-active .mts-suit {
  font-size: 8px;
  letter-spacing: 0;
}

body.holdem-table-active .mts-number,
body.holdem-table-active .mts-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 72px;
  min-width: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fef3c7;
  letter-spacing: 0;
}

body.holdem-table-active .mts-state {
  color: #93c5fd;
}

body.holdem-table-active .mts-fallback {
  color: #cbd5e1;
}

@keyframes mtsAlertPulse {
  from { transform: scale(0.92); opacity: 0.82; }
  to { transform: scale(1.08); opacity: 1; }
}

body.holdem-table-active #hero .seat-role-stack {
  left: calc(var(--hero-profile-x) + 46px) !important;
  bottom: calc(var(--mp-hero-avatar-v8) + 26px) !important;
}

/* 2026-05-31 table readability pass: push seats to the rail, separate role
   chips from avatars/cards, and use a compact two-line name/chip plate. */
body.holdem-table-active .seat {
  width: 62px !important;
}

body.holdem-table-active .seat .name-pill,
body.holdem-table-active .mobile-player-panel,
body.holdem-table-active #hero .hero-nameplate {
  width: 62px !important;
  min-width: 62px !important;
  min-height: 34px !important;
  padding: 5px 3px 4px !important;
  border: 1px solid rgba(64, 92, 91, 0.52) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(4, 12, 14, 0.97), rgba(1, 5, 8, 0.99)) !important;
  box-shadow: 0 6px 13px rgba(0,0,0,0.66), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

body.holdem-table-active .seat .name,
body.holdem-table-active #hero .hero-info .name,
body.holdem-table-active #hero .hero-nameplate .name {
  color: #f6a91a !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
}

body.holdem-table-active .seat .chips,
body.holdem-table-active #hero .hero-info .chips,
body.holdem-table-active #hero .hero-nameplate .chips {
  margin-top: 3px !important;
  padding-top: 3px !important;
  border-top: 1px solid rgba(67, 111, 116, 0.46) !important;
  color: #19c7ff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 5px rgba(0, 177, 255, 0.22), 0 1px 2px rgba(0,0,0,0.9) !important;
}

body.holdem-table-active #hero .hero-nameplate {
  width: 72px !important;
  min-width: 72px !important;
}

body.holdem-table-active #hero .hero-info > .name,
body.holdem-table-active #hero .hero-info > .chips {
  width: 72px !important;
  background: transparent !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

body.holdem-table-active .seat-role-stack {
  gap: 3px !important;
  z-index: 28 !important;
}

body.holdem-table-active .role-badge {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  font-size: 8px !important;
  line-height: 16px !important;
}

body.holdem-table-active .blind-role {
  width: 23px !important;
  height: 15px !important;
  min-width: 23px !important;
  font-size: 7px !important;
  line-height: 15px !important;
}

body.holdem-table-active .seat-clock-12 .seat-role-stack {
  left: 50% !important;
  top: calc(100% + 6px) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .seat-clock-130 .seat-role-stack,
body.holdem-table-active .seat-clock-3 .seat-role-stack,
body.holdem-table-active .seat-clock-430 .seat-role-stack {
  left: auto !important;
  right: -25px !important;
  top: 32% !important;
  transform: translate(50%, -50%) !important;
}

body.holdem-table-active .seat-clock-1030 .seat-role-stack,
body.holdem-table-active .seat-clock-9 .seat-role-stack,
body.holdem-table-active .seat-clock-730 .seat-role-stack {
  right: auto !important;
  left: -25px !important;
  top: 32% !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-table-active #hero .seat-role-stack {
  left: 26px !important;
  right: auto !important;
  bottom: 68px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #seats .seat .mobile-player-panel .name,
body.holdem-table-active #hero .hero-nameplate .name,
body.holdem-table-active #hero .hero-info > .name {
  color: #f6a91a !important;
}

body.holdem-table-active #seats .seat .mobile-player-panel .chips.stack-toggle,
body.holdem-table-active #hero .hero-nameplate .chips.stack-toggle,
body.holdem-table-active #hero .hero-info > .chips.stack-toggle {
  color: #19c7ff !important;
}

/* Bet chips live on the table surface, not inside player/nameplate DOM. */
body.holdem-table-active #betChipLayer,
body.holdem-table-active .bet-chip-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 29 !important;
  pointer-events: none !important;
}

body.holdem-table-active #seats .seat .commit,
body.holdem-table-active #seats .seat .bet-indicator,
body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount {
  display: none !important;
}

body.holdem-table-active #betChipLayer .table-bet-chip {
  position: absolute !important;
  left: 50%;
  top: 50%;
  display: inline-grid !important;
  justify-items: center !important;
  gap: 1px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f3ecdf !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.95) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

body.holdem-table-active #betChipLayer .table-bet-chip.hero-bet-indicator,
body.holdem-table-active #betChipLayer .table-bet-chip.hero-pending-amount {
  display: inline-grid !important;
  height: auto !important;
  min-width: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.holdem-table-active #betChipLayer .table-bet-chip .bet-chip-stack {
  position: relative !important;
  display: block !important;
  width: 35px !important;
  height: 28px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.holdem-table-active #betChipLayer .table-bet-chip strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  min-height: 16px !important;
  padding: 2px 6px 3px !important;
  border: 1px solid rgba(255,255,255,0.17) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(21,24,29,0.94), rgba(5,7,10,0.96)) !important;
  color: var(--bet-chip-label, #f3ecdf) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.96) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

body.holdem-table-active #betChipLayer .bet-chip-unit {
  --chip-face: #f8fafc;
  --chip-rim: #cbd5e1;
  --chip-stripe: #ef4444;
  --chip-core: #ffffff;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background:
    radial-gradient(circle at 50% 50%, var(--chip-core) 0 21%, transparent 22%),
    conic-gradient(from 12deg,
      var(--chip-stripe) 0deg 18deg,
      var(--chip-face) 18deg 47deg,
      var(--chip-stripe) 47deg 65deg,
      var(--chip-face) 65deg 112deg,
      var(--chip-stripe) 112deg 130deg,
      var(--chip-face) 130deg 177deg,
      var(--chip-stripe) 177deg 195deg,
      var(--chip-face) 195deg 242deg,
      var(--chip-stripe) 242deg 260deg,
      var(--chip-face) 260deg 307deg,
      var(--chip-stripe) 307deg 325deg,
      var(--chip-face) 325deg 360deg),
    radial-gradient(circle at 50% 50%, var(--chip-face) 0 58%, var(--chip-rim) 59% 100%) !important;
  box-shadow:
    0 2px 0 rgba(0,0,0,0.48),
    0 5px 8px rgba(0,0,0,0.58),
    inset 0 1px 1px rgba(255,255,255,0.62),
    inset 0 -2px 3px rgba(0,0,0,0.24) !important;
}

body.holdem-table-active #betChipLayer .bet-chip-unit::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid var(--chip-stripe);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.45);
}

body.holdem-table-active #betChipLayer .bet-chip-unit:nth-child(1) {
  z-index: 4 !important;
}

body.holdem-table-active #betChipLayer .bet-chip-unit:nth-child(2) {
  bottom: 4px !important;
  left: calc(50% - 5px) !important;
  z-index: 3 !important;
}

body.holdem-table-active #betChipLayer .bet-chip-unit:nth-child(3) {
  bottom: 8px !important;
  left: calc(50% + 4px) !important;
  z-index: 2 !important;
}

body.holdem-table-active #betChipLayer .bet-chip-unit:nth-child(4) {
  bottom: 12px !important;
  left: calc(50% - 1px) !important;
  z-index: 1 !important;
}

body.holdem-table-active #betChipLayer .central-bet-pool {
  z-index: 4 !important;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,0.68)) !important;
}

body.holdem-table-active #betChipLayer .central-bet-pool .bet-chip-stack {
  width: 38px !important;
  height: 30px !important;
}

body.holdem-table-active #betChipLayer .central-bet-pool strong {
  color: #ffe553 !important;
  border-color: rgba(251, 191, 36, 0.24) !important;
}

body.holdem-table-active #betChipLayer .chip-tier-white {
  --chip-face: #f8fafc;
  --chip-rim: #cbd5e1;
  --chip-stripe: #e11d48;
  --chip-core: #ffffff;
  --bet-chip-label: #f8fafc;
}

body.holdem-table-active #betChipLayer .chip-tier-blue {
  --chip-face: #2563eb;
  --chip-rim: #1e3a8a;
  --chip-stripe: #dbeafe;
  --chip-core: #eff6ff;
  --bet-chip-label: #93c5fd;
}

body.holdem-table-active #betChipLayer .chip-tier-green {
  --chip-face: #16a34a;
  --chip-rim: #14532d;
  --chip-stripe: #dcfce7;
  --chip-core: #f0fdf4;
  --bet-chip-label: #86efac;
}

body.holdem-table-active #betChipLayer .chip-tier-red {
  --chip-face: #dc2626;
  --chip-rim: #7f1d1d;
  --chip-stripe: #fee2e2;
  --chip-core: #fff1f2;
  --bet-chip-label: #fca5a5;
}

body.holdem-table-active #betChipLayer .chip-tier-purple {
  --chip-face: #7c3aed;
  --chip-rim: #4c1d95;
  --chip-stripe: #ede9fe;
  --chip-core: #faf5ff;
  --bet-chip-label: #c4b5fd;
}

body.holdem-table-active #betChipLayer .chip-tier-yellow {
  --chip-face: #facc15;
  --chip-rim: #a16207;
  --chip-stripe: #422006;
  --chip-core: #fef9c3;
  --bet-chip-label: #fde047;
}

body.holdem-table-active #betChipLayer .chip-tier-orange {
  --chip-face: #f97316;
  --chip-rim: #9a3412;
  --chip-stripe: #ffedd5;
  --chip-core: #fff7ed;
  --bet-chip-label: #fdba74;
}

body.holdem-table-active #betChipLayer .chip-tier-black {
  --chip-face: #18181b;
  --chip-rim: #030712;
  --chip-stripe: #f59e0b;
  --chip-core: #fef3c7;
  --bet-chip-label: #fbbf24;
}

/* FINAL OVERRIDE — never clip the action panel. The desktop/mobile @media
   rules cap #actionPanel with max-height (--mp-action-h / --wpl-action-h) +
   overflow, which clips the bottom rows (raise-amount + slider) even though
   FOLD/CALL/RAISE now show. These selectors match the highest-specificity
   capping rules (.holdem-action-panel-visible / .holdem-action-open) and, being
   last in the file with !important, win — so the panel sizes to its full
   content (it is bottom-anchored and grows upward over the felt when acting). */
body.holdem-table-active.holdem-action-panel-visible #actionPanel,
body.holdem-table-active.holdem-action-open #actionPanel {
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* FINAL OVERRIDE — mobile multi-table layout + table theme colors. */
body.holdem-table-active {
  --holdem-theme-accent: #facc15;
  --holdem-theme-accent-soft: rgba(250, 204, 21, 0.28);
  --holdem-theme-bg-top: #1b1304;
  --holdem-theme-bg-mid: #302006;
  --holdem-theme-bg-bottom: #080501;
  --holdem-theme-felt-hi: #8a650f;
  --holdem-theme-felt-mid: #4b3508;
  --holdem-theme-felt-low: #1b1304;
  --holdem-theme-rail: #201604;
  --hero-action-gap: clamp(-20px, -2.8dvh, -16px);
  --hero-card-lane-bottom: calc(var(--hero-action-gap) + 18px);
  /* 상한 150px: 고정 슬롯(v76) 기준 스케일 ≤0.8 기기(SE 등)에서 필요값이
     135-142px 라 132px 캡이 히어로-패널 간격을 4px대까지 깎았음. */
  --hero-anchor-bottom: clamp(16px, var(--game-hero-bottom-safe, 28px), 150px);
  background:
    radial-gradient(ellipse at 50% 22%, var(--holdem-theme-accent-soft), transparent 48%),
    linear-gradient(180deg, var(--holdem-theme-bg-top), var(--holdem-theme-bg-bottom)) !important;
}

body[data-holdem-table-theme="standard"].holdem-table-active {
  --holdem-theme-accent: #facc15;
  --holdem-theme-accent-soft: rgba(250, 204, 21, 0.30);
  --holdem-theme-bg-top: #1b1304;
  --holdem-theme-bg-mid: #302006;
  --holdem-theme-bg-bottom: #080501;
  --holdem-theme-felt-hi: #8a650f;
  --holdem-theme-felt-mid: #4b3508;
  --holdem-theme-felt-low: #1b1304;
  --holdem-theme-rail: #201604;
}

body[data-holdem-table-theme="turbo"].holdem-table-active {
  --holdem-theme-accent: #fb923c;
  --holdem-theme-accent-soft: rgba(251, 146, 60, 0.32);
  --holdem-theme-bg-top: #241005;
  --holdem-theme-bg-mid: #45210a;
  --holdem-theme-bg-bottom: #090401;
  --holdem-theme-felt-hi: #b65a13;
  --holdem-theme-felt-mid: #64310c;
  --holdem-theme-felt-low: #241005;
  --holdem-theme-rail: #291304;
}

body[data-holdem-table-theme="hyper"].holdem-table-active {
  --holdem-theme-accent: #f43f5e;
  --holdem-theme-accent-soft: rgba(244, 63, 94, 0.32);
  --holdem-theme-bg-top: #21060b;
  --holdem-theme-bg-mid: #3b0a12;
  --holdem-theme-bg-bottom: #090205;
  --holdem-theme-felt-hi: #9f1d36;
  --holdem-theme-felt-mid: #5a1020;
  --holdem-theme-felt-low: #21060b;
  --holdem-theme-rail: #25070d;
}

body[data-holdem-table-theme="deepstack"].holdem-table-active {
  --holdem-theme-accent: #34d399;
  --holdem-theme-accent-soft: rgba(52, 211, 153, 0.32);
  --holdem-theme-bg-top: #06150f;
  --holdem-theme-bg-mid: #0b2b20;
  --holdem-theme-bg-bottom: #020806;
  --holdem-theme-felt-hi: #1f8a62;
  --holdem-theme-felt-mid: #10533a;
  --holdem-theme-felt-low: #06150f;
  --holdem-theme-rail: #071b13;
}

body[data-holdem-table-theme="big"].holdem-table-active {
  --holdem-theme-accent: #38bdf8;
  --holdem-theme-accent-soft: rgba(56, 189, 248, 0.32);
  --holdem-theme-bg-top: #061426;
  --holdem-theme-bg-mid: #0b2846;
  --holdem-theme-bg-bottom: #020714;
  --holdem-theme-felt-hi: #1d5f9d;
  --holdem-theme-felt-mid: #10385f;
  --holdem-theme-felt-low: #061426;
  --holdem-theme-rail: #07172a;
}

body[data-holdem-table-theme="bounty"].holdem-table-active {
  --holdem-theme-accent: #a855f7;
  --holdem-theme-accent-soft: rgba(168, 85, 247, 0.34);
  --holdem-theme-bg-top: #160a27;
  --holdem-theme-bg-mid: #2b1450;
  --holdem-theme-bg-bottom: #07030f;
  --holdem-theme-felt-hi: #6d28a8;
  --holdem-theme-felt-mid: #3b1b64;
  --holdem-theme-felt-low: #170b2a;
  --holdem-theme-rail: #1c0b32;
}

body[data-holdem-table-theme="satellite"].holdem-table-active {
  --holdem-theme-accent: #f59e0b;
  --holdem-theme-accent-soft: rgba(245, 158, 11, 0.34);
  --holdem-theme-bg-top: #211005;
  --holdem-theme-bg-mid: #3a1b07;
  --holdem-theme-bg-bottom: #090401;
  --holdem-theme-felt-hi: #a8550b;
  --holdem-theme-felt-mid: #61300a;
  --holdem-theme-felt-low: #211005;
  --holdem-theme-rail: #261305;
}

body[data-holdem-table-theme="fallback"].holdem-table-active {
  --holdem-theme-accent: #facc15;
  --holdem-theme-accent-soft: rgba(250, 204, 21, 0.28);
  --holdem-theme-bg-top: #111316;
  --holdem-theme-bg-mid: #20242a;
  --holdem-theme-bg-bottom: #050608;
  --holdem-theme-felt-hi: #5b6068;
  --holdem-theme-felt-mid: #343941;
  --holdem-theme-felt-low: #15181d;
  --holdem-theme-rail: #111418;
}

body.holdem-table-active #pokerStageCanvas {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.58), transparent 14%, transparent 86%, rgba(0,0,0,0.58)),
    radial-gradient(ellipse at 50% 35%, var(--holdem-theme-accent-soft), transparent 64%),
    linear-gradient(180deg, var(--holdem-theme-bg-top) 0%, var(--holdem-theme-bg-mid) 48%, var(--holdem-theme-bg-bottom) 100%) !important;
}

body.holdem-table-active #felt {
  background:
    radial-gradient(ellipse at 50% 27%, var(--holdem-theme-accent-soft), transparent 48%),
    linear-gradient(180deg, var(--holdem-theme-bg-top) 0%, var(--holdem-theme-bg-mid) 44%, var(--holdem-theme-bg-bottom) 100%) !important;
}

body.holdem-table-active #felt::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 9%, transparent 91%, rgba(0,0,0,0.30)),
    radial-gradient(ellipse at 50% 38%, var(--holdem-theme-felt-hi), var(--holdem-theme-felt-mid) 54%, var(--holdem-theme-felt-low) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 28px rgba(0,0,0,0.56),
    0 0 30px var(--holdem-theme-accent-soft),
    0 18px 38px rgba(0,0,0,0.78) !important;
}

body.holdem-table-active #felt::after {
  border-color: var(--holdem-theme-accent) !important;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255,255,255,0.12), transparent 62%),
    radial-gradient(ellipse at 50% 70%, rgba(0,0,0,0.42), transparent 72%),
    linear-gradient(180deg, var(--holdem-theme-felt-hi) 0%, var(--holdem-theme-felt-mid) 48%, var(--holdem-theme-rail) 100%) !important;
  box-shadow:
    inset 0 0 48px rgba(0,0,0,0.52),
    inset 0 0 0 4px rgba(0,0,0,0.56),
    0 0 0 1px rgba(0,0,0,0.78),
    0 0 22px var(--holdem-theme-accent-soft) !important;
}

/* Final table atmosphere override.
   Keep it in the late theme section so it wins over themed !important felt
   backgrounds without moving any foreground UI. */
body.holdem-table-active.holdem-final-table-bg {
  background:
    radial-gradient(ellipse 76% 34% at 50% 2%, rgba(238,178,70,0.14), transparent 44%),
    radial-gradient(ellipse 115% 70% at 50% 46%, rgba(73,28,92,0.28), transparent 64%),
    linear-gradient(180deg, #0b0712 0%, #170c18 45%, #080608 100%) !important;
}

body.holdem-table-active.holdem-final-table-bg #app {
  background:
    radial-gradient(ellipse 88% 42% at 50% 10%, rgba(244,185,78,0.11), transparent 42%),
    linear-gradient(90deg, rgba(0,0,0,0.36), transparent 14%, transparent 86%, rgba(0,0,0,0.36)),
    #120a14 !important;
}

body.holdem-table-active.holdem-final-table-bg #felt {
  background:
    radial-gradient(ellipse at 50% 27%, rgba(255,207,102,0.16), transparent 48%),
    radial-gradient(ellipse at 50% 54%, rgba(117,47,145,0.30), transparent 62%),
    linear-gradient(180deg, #160b1e 0%, #24102b 46%, #09070b 100%) !important;
  box-shadow:
    inset 0 0 96px rgba(0,0,0,0.44),
    inset 0 0 120px rgba(238,178,70,0.08) !important;
}

body.holdem-table-active.holdem-final-table-bg #felt::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 9%, transparent 91%, rgba(0,0,0,0.30)),
    radial-gradient(ellipse at 50% 38%, rgba(168,84,191,0.22), rgba(59,41,74,0.95) 54%, rgba(37,29,48,0.98) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 58px rgba(0,0,0,0.58),
    0 0 34px rgba(216,159,55,0.16),
    0 18px 38px rgba(0,0,0,0.78) !important;
}

body.holdem-table-active.holdem-final-table-bg #felt::after {
  border-color: rgba(173,122,47,0.56) !important;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255,238,187,0.13), transparent 62%),
    radial-gradient(ellipse at 50% 70%, rgba(0,0,0,0.42), transparent 72%),
    linear-gradient(180deg, rgba(59,41,74,0.95) 0%, rgba(37,29,48,0.98) 48%, rgba(19,15,25,1) 100%) !important;
  box-shadow:
    inset 0 0 48px rgba(0,0,0,0.52),
    inset 0 0 0 4px rgba(0,0,0,0.56),
    0 0 0 1px rgba(0,0,0,0.78),
    0 0 28px rgba(223,166,62,0.18) !important;
}

body.holdem-table-active #hero,
body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  bottom: var(--hero-anchor-bottom) !important;
  min-height: 122px !important;
  transition: bottom 120ms ease-out !important;
}

body.holdem-table-active #hero .mobile-hero-seat {
  min-height: 122px !important;
}

body.holdem-table-active #hero .holes,
body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  bottom: var(--hero-card-lane-bottom) !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  bottom: var(--hero-action-gap) !important;
  max-width: min(210px, 56vw) !important;
}

body.holdem-table-active[data-telegram-platform="android"] {
  --hero-action-gap: clamp(-8px, -1.2dvh, -6px);
}

body.holdem-table-active[data-telegram-sheet-header="1"] {
  --hero-action-gap: clamp(-8px, -1.2dvh, -6px);
}

body.holdem-table-active #actionPanel {
  z-index: 60 !important;
  border-top: 1px solid var(--holdem-theme-accent) !important;
  box-shadow:
    0 -12px 26px rgba(0,0,0,0.70),
    0 -2px 16px var(--holdem-theme-accent-soft),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
}

body.holdem-local-switching-table #actionPanel,
body.holdem-auto-switching-table #actionPanel {
  pointer-events: none !important;
}

body.holdem-table-active .tournament-info-trigger,
body.holdem-table-active.holdem-action-open .tournament-info-trigger,
body.holdem-table-active.holdem-action-panel-visible .tournament-info-trigger {
  position: fixed !important;
  left: auto !important;
  right: max(10px, calc(env(safe-area-inset-right, 0px) + 10px)) !important;
  top: auto !important;
  bottom: calc(var(--poker-action-panel-height, 188px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + 12px) !important;
  width: 78px !important;
  min-height: 42px !important;
  padding: 5px 6px !important;
  border-color: var(--holdem-theme-accent) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.48), 0 0 14px var(--holdem-theme-accent-soft) !important;
  transform: none !important;
  z-index: 55 !important;
}

body.holdem-table-active .tournament-info-trigger span {
  font-size: 10px !important;
  line-height: 1.05 !important;
}

body.holdem-table-active .tournament-info-trigger strong {
  margin-top: 3px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body.holdem-table-active .multi-tournament-switcher {
  left: max(96px, calc(env(safe-area-inset-left, 0px) + 86px)) !important;
  right: max(10px, calc(env(safe-area-inset-right, 0px) + 10px)) !important;
  top: calc(var(--poker-stage-top, 0px) + max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + 6px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 42px !important;
  gap: 5px !important;
  transform: none !important;
  border-color: rgba(232, 226, 211, 0.16) !important;
  background: linear-gradient(180deg, rgba(8, 10, 13, 0.82), rgba(2, 4, 7, 0.72)) !important;
  z-index: 50 !important;
}

body.holdem-table-active .mts-slot {
  --mts-accent: var(--holdem-theme-accent);
  --mts-border: rgba(232, 226, 211, 0.20);
  --mts-bg-a: rgba(38, 40, 45, 0.94);
  --mts-bg-b: rgba(10, 11, 14, 0.96);
  --mts-glow: var(--holdem-theme-accent-soft);
  min-width: 44px !important;
  height: 32px !important;
  padding: 0 6px !important;
  border-color: var(--mts-border) !important;
  background: linear-gradient(180deg, var(--mts-bg-a), var(--mts-bg-b)) !important;
}

body.holdem-table-active .mts-slot.theme-standard {
  --mts-accent: #facc15;
  --mts-border: rgba(250, 204, 21, 0.48);
  --mts-bg-a: rgba(105, 76, 20, 0.94);
  --mts-bg-b: rgba(35, 24, 7, 0.96);
  --mts-glow: rgba(250, 204, 21, 0.28);
}

body.holdem-table-active .mts-slot.theme-turbo {
  --mts-accent: #fb923c;
  --mts-border: rgba(251, 146, 60, 0.48);
  --mts-bg-a: rgba(137, 67, 16, 0.94);
  --mts-bg-b: rgba(45, 19, 4, 0.96);
  --mts-glow: rgba(251, 146, 60, 0.30);
}

body.holdem-table-active .mts-slot.theme-hyper {
  --mts-accent: #f43f5e;
  --mts-border: rgba(244, 63, 94, 0.50);
  --mts-bg-a: rgba(129, 27, 47, 0.94);
  --mts-bg-b: rgba(45, 7, 15, 0.96);
  --mts-glow: rgba(244, 63, 94, 0.30);
}

body.holdem-table-active .mts-slot.theme-deepstack {
  --mts-accent: #34d399;
  --mts-border: rgba(52, 211, 153, 0.48);
  --mts-bg-a: rgba(17, 100, 73, 0.94);
  --mts-bg-b: rgba(5, 36, 25, 0.96);
  --mts-glow: rgba(52, 211, 153, 0.30);
}

body.holdem-table-active .mts-slot.theme-big {
  --mts-accent: #38bdf8;
  --mts-border: rgba(56, 189, 248, 0.48);
  --mts-bg-a: rgba(20, 84, 138, 0.94);
  --mts-bg-b: rgba(6, 28, 50, 0.96);
  --mts-glow: rgba(56, 189, 248, 0.30);
}

body.holdem-table-active .mts-slot.theme-bounty {
  --mts-accent: #a855f7;
  --mts-border: rgba(168, 85, 247, 0.50);
  --mts-bg-a: rgba(95, 47, 158, 0.94);
  --mts-bg-b: rgba(35, 14, 62, 0.96);
  --mts-glow: rgba(168, 85, 247, 0.32);
}

body.holdem-table-active .mts-slot.theme-satellite {
  --mts-accent: #f59e0b;
  --mts-border: rgba(245, 158, 11, 0.52);
  --mts-bg-a: rgba(141, 78, 13, 0.94);
  --mts-bg-b: rgba(49, 25, 5, 0.96);
  --mts-glow: rgba(245, 158, 11, 0.32);
}

body.holdem-table-active .mts-slot.theme-fallback {
  --mts-accent: #facc15;
  --mts-border: rgba(250, 204, 21, 0.44);
  --mts-bg-a: rgba(61, 65, 73, 0.94);
  --mts-bg-b: rgba(17, 19, 23, 0.96);
  --mts-glow: rgba(250, 204, 21, 0.26);
}

body.holdem-table-active .mts-slot.is-active {
  border-color: var(--mts-accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 2px var(--mts-glow),
    0 0 14px var(--mts-glow),
    0 6px 14px rgba(0,0,0,0.34) !important;
}

body.holdem-table-active .mts-slot.needs-action:not(.is-active) {
  border-color: #f87171 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 2px rgba(248, 113, 113, 0.20),
    0 0 14px rgba(248, 113, 113, 0.34),
    0 4px 10px rgba(0,0,0,0.28) !important;
}

@media (max-width: 370px) {
  body.holdem-table-active .multi-tournament-switcher {
    left: max(86px, calc(env(safe-area-inset-left, 0px) + 80px)) !important;
    right: max(8px, calc(env(safe-area-inset-right, 0px) + 8px)) !important;
    gap: 4px !important;
    padding: 4px 3px !important;
  }

  body.holdem-table-active .mts-slot {
    min-width: 39px !important;
    padding: 0 4px !important;
  }
}

/* 2026-06-07 v54: mobile table controls, rank visibility, and tap layers. */
body.holdem-table-active #myInfoTopBtn,
body.holdem-table-active #leaveTable {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.holdem-table-active #title {
  display: grid !important;
  left: max(14px, calc(env(safe-area-inset-left, 0px) + 14px)) !important;
  top: calc(var(--poker-stage-top, 0px) + max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + 72px) !important;
  width: 40px !important;
  height: 40px !important;
  z-index: 145 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.holdem-table-active #title::before {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

body.holdem-table-active .gg-topbar-actions {
  left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
  top: calc(var(--poker-stage-top, 0px) + max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + 118px) !important;
  z-index: 146 !important;
  pointer-events: auto !important;
}

body.holdem-table-active.table-actions-open .gg-topbar-actions {
  display: flex !important;
}

body.holdem-table-active .gg-topbar-actions .table-lobby-menu {
  color: #fef3c7 !important;
  border-color: rgba(250, 204, 21, 0.54) !important;
  background: linear-gradient(180deg, rgba(105, 76, 20, 0.98), rgba(35, 24, 7, 0.98)) !important;
}

body.holdem-table-active .multi-tournament-switcher {
  top: calc(var(--poker-stage-top, 0px) + max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px))) !important;
  z-index: 140 !important;
  pointer-events: auto !important;
  touch-action: pan-x !important;
}

body.holdem-table-active .multi-tournament-switcher .mts-slot {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.holdem-table-active .time-bank-pill {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.holdem-table-active.holdem-hand-result-open .tournament-info-trigger {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2026-06-07 v56: stable header mini-board strip with clipped 4-up viewport. */
body.holdem-table-active #topbar,
body.holdem-table-active #tableHeader.gg-topbar {
  pointer-events: none !important;
}

body.holdem-table-active #title,
body.holdem-table-active .gg-topbar-actions,
body.holdem-table-active .multi-tournament-switcher {
  pointer-events: auto !important;
}

body.holdem-table-active .multi-tournament-switcher {
  --mts-item-w: clamp(46px, 12.8vw, 54px);
  --mts-gap: 5px;
  position: fixed !important;
  left: max(78px, calc(env(safe-area-inset-left, 0px) + 78px)) !important;
  right: max(66px, calc(env(safe-area-inset-right, 0px) + 66px)) !important;
  top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + 8px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 220 !important;
  touch-action: pan-x !important;
}

body.holdem-table-active .multi-tournament-switcher.hidden {
  display: none !important;
}

body.holdem-table-active .multi-tournament-switcher .mts-viewport {
  width: min(100%, calc(var(--mts-item-w) + var(--mts-item-w) + var(--mts-item-w) + var(--mts-item-w) + var(--mts-gap) + var(--mts-gap) + var(--mts-gap) + 10px)) !important;
  height: 48px !important;
  margin: 0 auto !important;
  padding: 4px !important;
  display: block !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(232, 226, 211, 0.16) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(8, 10, 13, 0.86), rgba(2, 4, 7, 0.74)) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  pointer-events: auto !important;
  touch-action: pan-x !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

body.holdem-table-active .multi-tournament-switcher .mts-viewport::-webkit-scrollbar {
  display: none !important;
}

body.holdem-table-active .multi-tournament-switcher .mts-track {
  width: max-content !important;
  min-width: 100% !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--mts-gap) !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.holdem-table-active .multi-tournament-switcher .mts-slot {
  flex: 0 0 var(--mts-item-w) !important;
  width: var(--mts-item-w) !important;
  min-width: var(--mts-item-w) !important;
  height: 38px !important;
  min-height: 40px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.holdem-switching-table .multi-tournament-switcher,
body.holdem-local-switching-table .multi-tournament-switcher,
body.holdem-auto-switching-table .multi-tournament-switcher {
  opacity: 0.76 !important;
  pointer-events: auto !important;
}

body.holdem-table-active .mts-alert,
body.holdem-table-active .mts-timer-badge {
  pointer-events: none !important;
}

body.holdem-table-active .mts-timer-badge {
  right: -6px !important;
  top: -7px !important;
  width: auto !important;
  min-width: 25px !important;
  height: 16px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.66) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  color: #041016 !important;
  text-shadow: none !important;
  animation: none !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.42) !important;
}

body.holdem-table-active .mts-timer-badge.timer-ok {
  background: linear-gradient(180deg, #67e8f9, #22d3ee) !important;
}

body.holdem-table-active .mts-timer-badge.timer-warn {
  background: linear-gradient(180deg, #fde68a, #f59e0b) !important;
  color: #241306 !important;
}

body.holdem-table-active .mts-timer-badge.timer-danger {
  background: linear-gradient(180deg, #fecaca, #ef4444) !important;
  color: #fff7ed !important;
  border-color: rgba(254, 202, 202, 0.86) !important;
  animation: mtsTimerDangerPulse 0.62s ease-in-out infinite alternate !important;
}

body.holdem-table-active .mts-slot.needs-action.timer-ok:not(.is-active) {
  border-color: rgba(34, 211, 238, 0.74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 2px rgba(34, 211, 238, 0.18), 0 0 14px rgba(34, 211, 238, 0.28), 0 4px 10px rgba(0,0,0,0.28) !important;
}

body.holdem-table-active .mts-slot.needs-action.timer-warn:not(.is-active) {
  border-color: rgba(250, 204, 21, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 2px rgba(250, 204, 21, 0.20), 0 0 14px rgba(250, 204, 21, 0.32), 0 4px 10px rgba(0,0,0,0.28) !important;
}

body.holdem-table-active .mts-slot.needs-action.timer-danger:not(.is-active) {
  border-color: rgba(248, 113, 113, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 2px rgba(248, 113, 113, 0.24), 0 0 18px rgba(248, 113, 113, 0.42), 0 4px 10px rgba(0,0,0,0.28) !important;
}

@keyframes mtsTimerDangerPulse {
  from { transform: scale(0.95); opacity: 0.88; }
  to { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 380px) {
  body.holdem-table-active .multi-tournament-switcher {
    left: max(72px, calc(env(safe-area-inset-left, 0px) + 72px)) !important;
    right: max(60px, calc(env(safe-area-inset-right, 0px) + 60px)) !important;
    --mts-item-w: 46px;
  }
}

/* 2026-06-07 v58: route-invariant table header and active-break rendering. */
:root {
  --holdem-table-header-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + 8px);
}

body.holdem-table-active .multi-tournament-switcher {
  top: var(--holdem-table-header-top) !important;
}

body.holdem-table-active .mini-board-header-strip {
  top: var(--holdem-table-header-top) !important;
}

body.holdem-break-active #potDisplay {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.holdem-break-active #community .card.placeholder {
  opacity: 0.34 !important;
}

body.holdem-break-active .break-overlay {
  width: min(260px, 68vw) !important;
  padding: 16px 18px 15px !important;
  gap: 5px !important;
  border-color: rgba(251,191,36,0.68) !important;
  background:
    linear-gradient(180deg, rgba(14, 19, 29, 0.98), rgba(4, 9, 17, 0.96)) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.58),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 30px rgba(251,191,36,0.12) !important;
}

body.holdem-break-active .break-overlay-title {
  color: #facc15 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
}

body.holdem-break-active .break-overlay-label {
  color: #e5e7eb !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.holdem-break-active .break-overlay-clock {
  margin-top: 3px !important;
  color: #ffffff !important;
  font-size: 36px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.holdem-break-active .break-overlay-sub {
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

/* 2026-06-08 v59: compact hero action dock after removing raise slider. */
:root {
  --poker-felt-height: 702px;
  --poker-action-panel-height: 142px;
}

body.holdem-table-active {
  --mp-action-h: clamp(118px, 15.8dvh, 142px);
  --mp-table-top: clamp(122px, 15dvh, 148px);
  --mp-table-bottom: clamp(58px, 7dvh, 88px);
  --mp-card-w: clamp(35px, 8.9vw, 41px);
  --mp-hero-card-w: clamp(49px, 12.6vw, 59px);
  --mp-seat-avatar: clamp(33px, 8.5vw, 39px);
  --mp-seat-panel-w: clamp(49px, 12.6vw, 58px);
  --mp-hero-avatar: clamp(51px, 13vw, 61px);
  --mp-seat-box-w: clamp(64px, 16.5vw, 76px);
  --mp-seat-box-h: clamp(74px, 18.5vw, 88px);
  --mp-seat-card-w: clamp(22px, 5.8vw, 27px);
  --mp-pot-top: 34.5%;
  --mp-board-top: 48%;
  --mp-center-info-top: 57%;
  --mp-hero-bottom: clamp(42px, 5.5dvh, 58px);
}

body.holdem-table-active.holdem-action-open,
body.holdem-table-active.holdem-action-panel-visible {
  --mp-action-h: clamp(118px, 15.8dvh, 142px);
  --mp-table-top: clamp(116px, 14dvh, 140px);
  --mp-table-bottom: calc(var(--mp-action-h) + clamp(30px, 4.8dvh, 44px));
  --mp-pot-top: 32.5%;
  --mp-board-top: 44.5%;
  --mp-center-info-top: 53.5%;
  --mp-hero-bottom: calc(var(--mp-action-h) + clamp(16px, 2.8dvh, 26px));
  --mp-card-w: clamp(35px, 9vw, 42px);
  --mp-hero-card-w: clamp(50px, 12.8vw, 60px);
  --mp-hero-avatar: clamp(52px, 13.2vw, 62px);
}

body.holdem-table-active #actionPanel,
body.holdem-table-active.holdem-action-panel-visible #actionPanel,
body.holdem-table-active.holdem-action-open #actionPanel {
  width: min(100vw, 560px) !important;
  max-width: min(100vw, 560px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 6px 8px calc(7px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))) !important;
  gap: 5px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.84) 20%, #020202 100%) !important;
}

/* v74: restored bet slider + preview pill — JS toggles .hidden per turn/mode. */
body.holdem-table-active #betAmountPreview.hidden,
body.holdem-table-active .bet-amount-preview.hidden,
body.holdem-table-active #raiseSlider.hidden {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

body.holdem-table-active .action-hint {
  min-height: 25px !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
}

body.holdem-table-active .action-hint strong {
  font-size: 12px !important;
}

body.holdem-table-active .action-hint span {
  font-size: 11px !important;
}

body.holdem-table-active #actionButtons {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.holdem-table-active #actionButtons button {
  min-height: clamp(53px, 13.8vw, 63px) !important;
  padding: 5px 0 !important;
  border-radius: 4px !important;
}

body.holdem-table-active #actionButtons button .ab-label {
  font-size: clamp(19px, 5.6vw, 25px) !important;
  line-height: 1 !important;
}

body.holdem-table-active #actionButtons button .ab-amount {
  margin-top: 3px !important;
  font-size: clamp(12px, 3.5vw, 15px) !important;
  line-height: 1.05 !important;
}

body.holdem-table-active #quickBets {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 4px !important;
  border-radius: 7px !important;
}

body.holdem-table-active #quickBets.hidden {
  display: none !important;
}

body.holdem-table-active #quickBets .preset,
body.holdem-table-active #quickBets button {
  min-height: 28px !important;
  padding: 2px 3px !important;
  border-radius: 6px !important;
  font-size: clamp(11px, 3.2vw, 14px) !important;
  line-height: 1 !important;
}

body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  bottom: var(--mp-hero-bottom) !important;
  width: min(306px, 90vw) !important;
  min-height: 118px !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active.holdem-action-open #hero .mobile-hero-seat,
body.holdem-table-active.holdem-action-panel-visible #hero .mobile-hero-seat {
  min-height: 118px !important;
}

body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  left: clamp(98px, 25.5vw, 118px) !important;
  bottom: clamp(34px, 8.3vw, 43px) !important;
  gap: clamp(6px, 1.7vw, 9px) !important;
}

body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: var(--mp-hero-card-w) !important;
  height: var(--mp-hero-card-h) !important;
}

body.holdem-table-active.holdem-action-open #hero .hero-info,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info {
  left: 3px !important;
  width: clamp(76px, 20vw, 88px) !important;
}

body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit {
  left: clamp(100px, 26vw, 120px) !important;
  bottom: 5px !important;
  font-size: clamp(14px, 3.7vw, 16px) !important;
}

body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  left: clamp(94px, 24vw, 114px) !important;
  bottom: -9px !important;
  width: min(168px, 44vw) !important;
  max-width: min(168px, 44vw) !important;
  font-size: clamp(12px, 3.2vw, 14px) !important;
}

body.holdem-table-active .tournament-info-trigger,
body.holdem-table-active.holdem-action-open .tournament-info-trigger,
body.holdem-table-active.holdem-action-panel-visible .tournament-info-trigger {
  bottom: calc(var(--mp-action-h) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + 12px) !important;
}

@media (max-width: 440px) {
  body.holdem-table-active {
    --mp-action-h: clamp(116px, 15.2dvh, 136px);
    --mp-card-w: clamp(34px, 8.7vw, 39px);
    --mp-hero-card-w: clamp(48px, 12.4vw, 57px);
    --mp-table-side: clamp(56px, 15.8vw, 72px);
  }

  body.holdem-table-active.holdem-action-open,
  body.holdem-table-active.holdem-action-panel-visible {
    --mp-table-bottom: calc(var(--mp-action-h) + clamp(28px, 4.3dvh, 40px));
    --mp-hero-bottom: calc(var(--mp-action-h) + clamp(14px, 2.4dvh, 23px));
  }
}

@media (max-height: 760px) {
  body.holdem-table-active {
    --mp-action-h: 122px;
    --mp-table-top: 110px;
    --mp-table-bottom: 58px;
    --mp-pot-top: 33.5%;
    --mp-board-top: 46.5%;
    --mp-center-info-top: 56%;
  }

  body.holdem-table-active.holdem-action-open,
  body.holdem-table-active.holdem-action-panel-visible {
    --mp-table-bottom: 156px;
    --mp-hero-bottom: 142px;
    --mp-board-top: 42.5%;
    --mp-center-info-top: 52%;
  }

  body.holdem-table-active.holdem-action-open #hero,
  body.holdem-table-active.holdem-action-panel-visible #hero {
    transform: translateX(-50%) !important;
  }
}

/* 2026-06-08 v60: restore hero seat lane, add all-in preset room, and harden menu taps. */
body.holdem-table-active #tableMenuHitTarget {
  position: fixed !important;
  display: block !important;
  z-index: 520 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: transparent !important;
  opacity: 0.01 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.holdem-table-active #tableMenuHitTarget.hidden,
body:not(.holdem-table-active) #tableMenuHitTarget {
  display: none !important;
  pointer-events: none !important;
}

body.holdem-table-active #title {
  width: 48px !important;
  height: 48px !important;
  z-index: 510 !important;
  place-items: center !important;
}

body.holdem-table-active #title::before {
  width: 40px !important;
  height: 40px !important;
}

/* 2026-06-10 v79: 기본 = 빌트인 5개 + ⚙ 한 줄(6칸). 자동 시드 프리셋
   (⅓/¾/2BB/3BB) 제거로 둘째 줄이 사라짐 — 유저가 ⚙로 직접 추가한
   커스텀만 둘째 줄로 래핑된다 (테스터: "한줄 없애고 올인·설정만 유지"). */
body.holdem-table-active #quickBets {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 4px !important;
}

body.holdem-table-active #quickBets .preset,
body.holdem-table-active #quickBets button {
  min-width: 0 !important;
  font-size: clamp(10px, 2.8vw, 13px) !important;
  letter-spacing: 0 !important;
}

body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  bottom: calc(var(--mp-action-h) + clamp(18px, 2.8dvh, 28px)) !important;
  width: 272px !important;
  min-height: 124px !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active.holdem-action-open #hero .mobile-hero-seat,
body.holdem-table-active.holdem-action-panel-visible #hero .mobile-hero-seat {
  min-height: 124px !important;
  overflow: visible !important;
}

body.holdem-table-active.holdem-action-open #hero .hero-info,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info {
  left: 56px !important;
  bottom: 0 !important;
  width: 72px !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active.holdem-action-open #hero .hero-avatar-wrap,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-avatar-wrap {
  width: 54px !important;
  height: 54px !important;
}

body.holdem-table-active.holdem-action-open #hero .hero-nameplate,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-nameplate,
body.holdem-table-active.holdem-action-open #hero .hero-info > .name,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info > .name,
body.holdem-table-active.holdem-action-open #hero .hero-info > .chips,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info > .chips {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  left: 166px !important;
  bottom: 34px !important;
  gap: 7px !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: clamp(49px, 12.2vw, 54px) !important;
  height: clamp(68px, 16.8vw, 74px) !important;
  border-radius: 7px !important;
}

body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  left: 166px !important;
  bottom: 106px !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active.holdem-action-open #hero .action-badge,
body.holdem-table-active.holdem-action-panel-visible #hero .action-badge {
  left: 166px !important;
  bottom: 123px !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  left: 166px !important;
  bottom: 9px !important;
  width: max-content !important;
  max-width: 156px !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 380px) {
  body.holdem-table-active.holdem-action-open #hero,
  body.holdem-table-active.holdem-action-panel-visible #hero {
    width: 264px !important;
  }

  body.holdem-table-active.holdem-action-open #hero .holes,
  body.holdem-table-active.holdem-action-panel-visible #hero .holes,
  body.holdem-table-active.holdem-action-open #hero .commit,
  body.holdem-table-active.holdem-action-panel-visible #hero .commit,
  body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
  body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount,
  body.holdem-table-active.holdem-action-open #hero .action-badge,
  body.holdem-table-active.holdem-action-panel-visible #hero .action-badge,
  body.holdem-table-active.holdem-action-open .hero-hand-strength,
  body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
    left: 160px !important;
  }
}

/* 2026-06-08 v61: keep the table/hero layer stable while action controls overlay. */
body.holdem-table-active.holdem-action-open,
body.holdem-table-active.holdem-action-panel-visible {
  --mp-table-top: clamp(122px, 15dvh, 148px);
  --mp-table-bottom: clamp(58px, 7dvh, 88px);
  --mp-pot-top: 34.5%;
  --mp-board-top: 53%;
  --mp-center-info-top: 57%;
  --mp-hero-bottom: clamp(42px, 5.5dvh, 58px);
}

body.holdem-table-active.holdem-action-open #felt,
body.holdem-table-active.holdem-action-panel-visible #felt {
  height: var(--poker-felt-height) !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.holdem-table-active.holdem-action-open #community,
body.holdem-table-active.holdem-action-panel-visible #community {
  top: var(--mp-board-top, 48%) !important;
}

body.holdem-table-active #actionPanel,
body.holdem-table-active.holdem-action-open #actionPanel,
body.holdem-table-active.holdem-action-panel-visible #actionPanel {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  width: min(100vw, 560px) !important;
  max-width: min(100vw, 560px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 5px 8px calc(5px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))) !important;
  gap: 4px !important;
  transform: translate(-50%, 0) !important;
  transition: opacity 140ms ease-out, transform 140ms ease-out !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 820 !important;
  contain: layout paint !important;
}

body.holdem-table-active #actionPanel .action-hint {
  min-height: 23px !important;
  padding: 3px 8px !important;
}

body.holdem-table-active #actionButtons {
  gap: 5px !important;
}

body.holdem-table-active #actionButtons button {
  min-height: clamp(49px, 12.8vw, 58px) !important;
}

body.holdem-table-active #quickBets {
  min-height: 32px !important;
  padding: 3px !important;
  gap: 4px !important;
}

body.holdem-table-active #quickBets .preset,
body.holdem-table-active #quickBets button {
  min-height: 27px !important;
}

body.holdem-table-active #actionPanel.hidden {
  display: flex !important;
  visibility: visible !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 8px) !important;
}

body.holdem-table-active #hero,
body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  bottom: var(--hero-anchor-bottom) !important;
  width: 258px !important;
  min-height: 122px !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
  transition: none !important;
}

body.holdem-table-active #hero .mobile-hero-seat,
body.holdem-table-active.holdem-action-open #hero .mobile-hero-seat,
body.holdem-table-active.holdem-action-panel-visible #hero .mobile-hero-seat {
  min-height: 122px !important;
  overflow: visible !important;
}

body.holdem-table-active #hero .hero-info,
body.holdem-table-active.holdem-action-open #hero .hero-info,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info {
  left: 56px !important;
  bottom: 0 !important;
  width: 66px !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .hero-avatar-wrap,
body.holdem-table-active.holdem-action-open #hero .hero-avatar-wrap,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-avatar-wrap {
  width: 52px !important;
  height: 52px !important;
}

body.holdem-table-active #hero .holes,
body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  left: var(--hero-cards-x, 162px) !important;
  bottom: var(--hero-card-lane-bottom, var(--hero-cards-bottom, 12px)) !important;
  gap: 7px !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .card.large,
body.holdem-table-active.holdem-action-open #hero .card.large,
body.holdem-table-active.holdem-action-panel-visible #hero .card.large {
  width: 49px !important;
  height: 68px !important;
  border-radius: 7px !important;
}

body.holdem-table-active #hero .commit,
body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  left: var(--hero-cards-x, 162px) !important;
  bottom: calc(var(--hero-card-lane-bottom, var(--hero-cards-bottom, 12px)) + 75px) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero .action-badge,
body.holdem-table-active.holdem-action-open #hero .action-badge,
body.holdem-table-active.holdem-action-panel-visible #hero .action-badge {
  left: var(--hero-cards-x, 162px) !important;
  bottom: calc(var(--hero-card-lane-bottom, var(--hero-cards-bottom, 12px)) + 92px) !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  left: var(--hero-cards-x, 162px) !important;
  bottom: var(--hero-action-gap, calc(var(--hero-cards-bottom, 12px) - 13px)) !important;
  width: max-content !important;
  max-width: min(202px, 54vw) !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.holdem-table-active #topbar {
  z-index: 1500 !important;
  pointer-events: none !important;
}

body.holdem-table-active #title {
  z-index: 1602 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.holdem-table-active #tableMenuHitTarget {
  z-index: 1600 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.holdem-table-active .gg-topbar-actions {
  position: fixed !important;
  left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
  top: calc(var(--poker-stage-top, 0px) + max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + 118px) !important;
  right: auto !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: 1601 !important;
  pointer-events: none !important;
}

body.holdem-table-active.table-actions-open .gg-topbar-actions,
body.holdem-table-active .gg-topbar-actions.is-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ═══ 2026-06-10 v76: 액션패널 = 고정 높이 슬롯 ═══
   패널 외곽 높이가 상태(대기 프리액션 / 내 차례 풀스택 / 전송중)와 무관하게
   일정해야 mobile-table-layout.js 가 측정하는 panelRect.top 이 고정되고,
   그걸 받아 쓰는 #hero bottom(--hero-anchor-bottom)이 더는 위아래로 점프하지
   않는다 (테스터: "히어로 프로필 카드가 고정되어야 하는데 액션바 열리면
   위아래로 움직임"). 콘텐츠는 슬롯 바닥 정렬 — 대기 시 프리액션 줄이 맨
   아래, 그 위 빈 칸이 내 차례에 베팅 액션바가 뜨는 자리.
   슬롯 = 내 차례 풀스택(버튼+카운트다운+금액프리뷰+퀵벳 2줄+슬라이더) 수용.
   contain 은 paint 를 빼고 layout 만 — paint 가 있으면 고정 높이를 넘는
   콘텐츠가 위에서 잘림(예전 '버튼 잘림' 버그 재발 경로). */
body.holdem-table-active {
  /* body 레벨 정의 — #actionPanel 형제(현재순위 트리거 등)도 읽어야 함. */
  --holdem-action-slot-h: calc(clamp(212px, 30dvh, 240px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
}

body.holdem-table-active #actionPanel,
body.holdem-table-active.holdem-action-open #actionPanel,
body.holdem-table-active.holdem-action-panel-visible #actionPanel {
  height: var(--holdem-action-slot-h) !important;
  min-height: var(--holdem-action-slot-h) !important;
  max-height: var(--holdem-action-slot-h) !important;
  justify-content: flex-end !important;
  contain: layout !important;
}

/* .hidden 도 Y 시프트 0 — 기존 translate(-50%, 8px)는 rect 측정(transform
   포함)에 들어가 핸드 경계마다 히어로가 ~8px 출렁였고, 140ms 트랜지션 중간을
   더블 rAF 가 샘플링하면 어중간한 값에 고정되기도 했다. 페이드는 opacity 만. */
body.holdem-table-active #actionPanel.hidden {
  transform: translate(-50%, 0) !important;
}

/* 현재순위 트리거를 슬롯 바로 위로 — 기존 앵커(--mp-action-h ≤142px,
   --poker-action-panel-height)는 구 가변 패널 기준이라 212px+ 슬롯 안에
   묻혀 z-index 820 패널에 가려지고 탭도 먹혔다. 슬롯 var 에 inset 포함. */
body.holdem-table-active .tournament-info-trigger,
body.holdem-table-active.holdem-action-open .tournament-info-trigger,
body.holdem-table-active.holdem-action-panel-visible .tournament-info-trigger {
  bottom: calc(var(--holdem-action-slot-h) + 12px) !important;
}

/* ═══ 오픈베타 배지 — 상단 타이틀 옆 (2026-06-10) ═══ */
.open-beta-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 7px;
  padding: 2px 8px 1px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: #facc15;
  background: linear-gradient(180deg, rgba(82, 51, 15, 0.6), rgba(24, 16, 8, 0.75));
  white-space: nowrap;
}

/* 테이블 뷰에선 #title 이 48px 아이콘 버튼으로 변형되므로 배지 숨김 */
body.holdem-table-active .open-beta-badge {
  display: none !important;
}

/* 보드는 항상 베팅칩/금액필 위에 — 칩 레이어(z29)가 보드(z17)를 덮어
   카드 랭크가 가려지던 문제의 불변식 가드 (1591 "Board must always be
   visible" 복원). 앵커 이동(app.js seatBetAnchors)이 근본 수정이고, 이
   규칙은 향후 앵커 변경이 겹쳐도 카드 가독성이 깨지지 않게 하는 보험. */
body.holdem-table-active #community {
  z-index: 30 !important;
}

/* 액션 슬롯 상시 다크 밴드 — 패널이 .hidden(폴드/관전/핸드 사이, opacity 0)
   이어도 기준선(슬롯 상단 경계) 아래는 항상 패널과 같은 어두운 배경을 깐다.
   안 그러면 폴드 순간 빨간 펠트가 드러나며 "색상 바뀌는 선"이 사라졌다
   나타났다 함 (2026-06-10 테스터). 패널(z820) 바로 아래 z819, 탭 통과. */
body.holdem-table-active #tableView::after {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(100vw, 560px);
  height: var(--holdem-action-slot-h);
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.84) 20%, #020202 100%);
  border-top: 1px solid var(--holdem-theme-accent);
  z-index: 819;
  pointer-events: none;
}

/* ═══ 2026-06-10 v80: 히어로 좌석/카드 anchor 는 액션패널과 분리 ═══
   #actionPanel 은 fixed overlay 이고, 히어로 좌석은 테이블 좌표계 안의
   플레이어 레이어다. 패널 높이/표시 여부를 hero bottom 에 반영하면
   내 차례, 대기, 미니보드 상태마다 카드와 프로필이 중앙으로 밀려 올라간다.
   액션 패널 크기/위치/버튼은 그대로 두고, 히어로 묶음만 하나의 낮은 anchor
   로 통합한다. */
body.holdem-table-active {
  --hero-seat-anchor-y: clamp(18px, var(--game-hero-bottom-safe, 22px), 34px);
  --hero-cards-anchor-y: clamp(10px, 2.6vw, 16px);
  --hero-hand-label-y: clamp(-8px, -1.2dvh, -5px);
  --hero-anchor-bottom: var(--hero-seat-anchor-y);
  --hero-card-lane-bottom: var(--hero-cards-anchor-y);
  --hero-action-gap: var(--hero-hand-label-y);
}

body.holdem-table-active #hero,
body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero {
  bottom: var(--hero-seat-anchor-y) !important;
}

body.holdem-table-active #hero .holes,
body.holdem-table-active.holdem-action-open #hero .holes,
body.holdem-table-active.holdem-action-panel-visible #hero .holes {
  bottom: var(--hero-cards-anchor-y) !important;
}

body.holdem-table-active #hero .commit,
body.holdem-table-active #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-open #hero .commit,
body.holdem-table-active.holdem-action-open #hero .hero-pending-amount,
body.holdem-table-active.holdem-action-panel-visible #hero .commit,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-pending-amount {
  bottom: calc(var(--hero-cards-anchor-y) + 75px) !important;
}

body.holdem-table-active #hero .action-badge,
body.holdem-table-active.holdem-action-open #hero .action-badge,
body.holdem-table-active.holdem-action-panel-visible #hero .action-badge {
  bottom: calc(var(--hero-cards-anchor-y) + 92px) !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  bottom: var(--hero-hand-label-y) !important;
}

@media (max-height: 760px) {
  body.holdem-table-active {
    --hero-seat-anchor-y: clamp(18px, var(--game-hero-bottom-safe, 22px), 32px);
    --hero-cards-anchor-y: clamp(9px, 2.4vw, 14px);
  }
}

/* ═══ 2026-06-10 v81: 액션 패널 한 줄 축소 ═══
   금액 미리보기 줄을 제거하고, 3BB 자리에 ⚙ 설정 칩이 들어가면서 quick-bet
   줄은 빌트인 5개 + 설정 1개로 끝난다. 패널 슬롯도 한 줄 낮춰 검은 빈 줄을
   남기지 않는다. */
body.holdem-table-active {
  --holdem-action-slot-h: calc(clamp(176px, 24dvh, 202px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
}

body.holdem-table-active #betAmountPreview,
body.holdem-table-active .bet-amount-preview {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* ═══ 2026-06-11 v83: 히어로 카드 영역 선/핸드 라벨 클리핑만 정리 ═══
   노란 가로선은 액션 슬롯 경계(#actionPanel border-top)와 보조 배경
   (#tableView::after border-top)이 히어로 카드 영역 위로 올라와 보인 것.
   슬롯 배경은 유지하되 선/노란 글로우만 끄고, 레이어는 히어로(z30) 아래로
   내려 현재 핸드 텍스트를 덮지 않게 한다. */
body.holdem-table-active #tableView::after {
  border-top: 0 !important;
  z-index: 29 !important;
}

body.holdem-table-active #actionPanel,
body.holdem-table-active.holdem-action-open #actionPanel,
body.holdem-table-active.holdem-action-panel-visible #actionPanel {
  border-top: 0 !important;
  box-shadow: 0 -12px 26px rgba(0,0,0,0.70) !important;
}

body.holdem-table-active .hero-hand-strength,
body.holdem-table-active.holdem-action-open .hero-hand-strength,
body.holdem-table-active.holdem-action-panel-visible .hero-hand-strength {
  top: auto !important;
  height: auto !important;
  min-height: 18px !important;
  line-height: 1.18 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  z-index: 31 !important;
}

/* ═══ 2026-06-11 v84: 액션 슬롯 빈 영역 음영 제거 ═══
   #actionPanel 은 고정 높이 슬롯이라 버튼보다 위쪽까지 영역을 잡는다.
   그 슬롯 전체에 깔린 다크 그라데이션이 히어로 카드/프로필/현재 핸드 문구를
   덮어 보였으므로, 슬롯 자체는 투명하게 두고 실제 컨트롤 행 배경만 유지한다.
   레이아웃 수치, 버튼 크기, bottom 위치는 바꾸지 않는다. */
body.holdem-table-active #tableView::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.holdem-table-active #actionPanel,
body.holdem-table-active.holdem-action-open #actionPanel,
body.holdem-table-active.holdem-action-panel-visible #actionPanel {
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.holdem-table-active #actionPanel > *,
body.holdem-table-active #actionPanel button,
body.holdem-table-active #actionPanel input,
body.holdem-table-active #actionPanel label {
  pointer-events: auto !important;
}

body.holdem-table-active #actionPanel.hidden > * {
  pointer-events: none !important;
}

/* Hero action submit feedback: visual-only pending state before server ACK.
   Chips/pot/stacks still update only from authoritative table_state frames. */
body.holdem-table-active #actionPanel.is-action-pending {
  cursor: wait;
}

body.holdem-table-active #actionPanel.is-action-pending #actionButtons button,
body.holdem-table-active #actionPanel.is-action-pending #quickBets button,
body.holdem-table-active #actionPanel.is-action-pending #raiseSlider button,
body.holdem-table-active #actionPanel.is-action-pending #raiseSlider input {
  pointer-events: none !important;
}

body.holdem-table-active #actionButtons.is-action-pending button.is-pending-muted {
  opacity: 0.58;
  filter: saturate(0.72) brightness(0.78);
}

body.holdem-table-active #actionButtons button.is-submitting {
  position: relative;
  opacity: 1 !important;
  transform: scale(0.965) !important;
  filter: brightness(1.12) saturate(1.08);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.26),
    0 0 18px rgba(251,191,36,0.42) !important;
}

/* ═══ 2026-06-11 v87: 채팅 FAB — 우하단 고정 오버레이 ═══
   채팅 클라이언트(app.js 아레나 룸 연동)는 이전부터 있었지만 진입 버튼이
   죽은 .table-tool-rail(위 11335/11948 display:none) 안에 있어 입구가 없었다.
   현재순위 트리거(좌하단, v14 블록)의 미러로 우하단에 원형 FAB 를 세운다.
   위치는 액션 패널의 표시/숨김 상태와 무관하게 항상 패널 예약 높이를 기준으로
   고정한다.
   #actionPanel 슬롯(v76)·히어로 anchor(v80) 계약은 건드리지 않는다. */
body.holdem-table-active .chat-fab {
  position: fixed;
  right: max(12px, calc((100vw - var(--mp-screen-w, 390px)) / 2 + 12px));
  bottom: calc(var(--mp-action-h, var(--poker-action-panel-height, 142px)) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + 12px);
  z-index: 76;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(245, 158, 11, 0.58);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.82));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fbbf24;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

body.holdem-table-active .chat-fab.hidden {
  display: none !important;
}

body.holdem-table-active.is-ios #title,
body.holdem-table-active.ios #title,
body.holdem-table-active[data-platform="ios"] #title,
body.holdem-table-active[data-telegram-platform="ios"] #title,
body.holdem-table-active[data-telegram-platform="iphone"] #title,
body.holdem-table-active[data-telegram-platform="ipad"] #title,
body.holdem-table-active.is-ios .tournament-info-trigger,
body.holdem-table-active.ios .tournament-info-trigger,
body.holdem-table-active[data-platform="ios"] .tournament-info-trigger,
body.holdem-table-active[data-telegram-platform="ios"] .tournament-info-trigger,
body.holdem-table-active[data-telegram-platform="iphone"] .tournament-info-trigger,
body.holdem-table-active[data-telegram-platform="ipad"] .tournament-info-trigger,
body.holdem-table-active.is-ios .chat-fab,
body.holdem-table-active.ios .chat-fab,
body.holdem-table-active[data-platform="ios"] .chat-fab,
body.holdem-table-active[data-telegram-platform="ios"] .chat-fab,
body.holdem-table-active[data-telegram-platform="iphone"] .chat-fab,
body.holdem-table-active[data-telegram-platform="ipad"] .chat-fab {
  transform: translateY(var(--table-stage-offset-y)) !important;
}

/* 시트가 열려 있는 동안엔 FAB 숨김 — 시트 자체에 닫기 버튼이 있고,
   반화면 시트 하단 모서리와 FAB 가 겹쳐 오터치를 만들기 때문. */
body.holdem-chat-open .chat-fab {
  display: none !important;
}

/* 로비/디테일 뷰에서는 테이블 한정 클래스가 없어 위 블록이 안 먹는다 —
   JS(syncChatBtnVisibility)가 .hidden 을 토글하지만, 캐시된 옛 JS 가
   돌아도 테이블 밖에서 떠 있지 않도록 기본값을 숨김으로 못박는다. */
.chat-fab {
  display: none;
}

/* ═══ 2026-06-11 v88: Design A hero turn badge ═══
   Hero-only "내 차례" indicator lives inside .hero-info, directly above the
   avatar. Opponent to-act badges and the action panel layout stay unchanged. */
body.holdem-table-active #hero .hero-info,
body.holdem-table-active.holdem-action-open #hero .hero-info,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info {
  overflow: visible !important;
}

body.holdem-table-active #hero,
body.holdem-table-active.holdem-action-open #hero,
body.holdem-table-active.holdem-action-panel-visible #hero,
body.holdem-table-active #hero .mobile-hero-seat,
body.holdem-table-active.holdem-action-open #hero .mobile-hero-seat,
body.holdem-table-active.holdem-action-panel-visible #hero .mobile-hero-seat {
  overflow: visible !important;
}

body.holdem-table-active #hero .hero-turn-badge {
  position: absolute !important;
  left: 50% !important;
  top: -32px !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 112px !important;
  height: 27px !important;
  padding: 3px 11px !important;
  border: 2px solid rgba(125, 255, 154, 0.88) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(22, 196, 55, 0.98), rgba(3, 119, 28, 0.96)) !important;
  color: #f0fff3 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.70) !important;
  box-shadow:
    0 0 0 1px rgba(2, 12, 4, 0.82),
    0 0 14px rgba(34, 197, 94, 0.92),
    0 0 28px rgba(34, 197, 94, 0.42) !important;
  z-index: 42 !important;
  pointer-events: none !important;
  animation: none !important;
}

body.holdem-table-active #hero .hero-turn-badge .toact-sec {
  font-size: 15px !important;
  font-weight: 1000 !important;
  color: inherit !important;
}

body.holdem-table-active #hero .hero-turn-icon {
  position: relative !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  opacity: 0.96 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
}

body.holdem-table-active #hero .hero-turn-icon::before,
body.holdem-table-active #hero .hero-turn-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: 50% 100% !important;
}

body.holdem-table-active #hero .hero-turn-icon::before {
  height: 5px !important;
  transform: translate(-50%, -100%) rotate(0deg) !important;
}

body.holdem-table-active #hero .hero-turn-icon::after {
  height: 4px !important;
  transform: translate(-50%, -100%) rotate(120deg) !important;
}

body.holdem-table-active #hero .hero-turn-badge.is-warn {
  border-color: rgba(254, 240, 138, 0.94) !important;
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.98), rgba(180, 83, 9, 0.98)) !important;
  color: #fffbe6 !important;
  box-shadow:
    0 0 0 1px rgba(24, 13, 0, 0.82),
    0 0 14px rgba(250, 204, 21, 0.86),
    0 0 26px rgba(245, 158, 11, 0.38) !important;
  animation: none !important;
}

body.holdem-table-active #hero .hero-turn-badge.is-danger {
  border-color: rgba(254, 202, 202, 0.96) !important;
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.98), rgba(153, 27, 27, 0.98)) !important;
  color: #fff1f2 !important;
  box-shadow:
    0 0 0 1px rgba(30, 0, 0, 0.84),
    0 0 14px rgba(248, 113, 113, 0.92),
    0 0 28px rgba(239, 68, 68, 0.48) !important;
  animation: heroTurnDangerPulse 0.82s ease-in-out infinite !important;
}

@keyframes heroTurnDangerPulse {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.82;
    transform: translateX(-50%) scale(1.045);
  }
}

body.holdem-table-active #hero.toact .hero-avatar-wrap,
body.holdem-table-active #hero.toact .hero-info .avatar,
body.holdem-table-active #hero.toact .hero-info .lavatar {
  border-color: rgba(72, 255, 118, 0.95) !important;
  box-shadow:
    0 0 0 3px rgba(4, 120, 35, 0.78),
    0 0 18px rgba(34, 197, 94, 0.95),
    0 0 36px rgba(34, 197, 94, 0.50),
    0 7px 18px rgba(0, 0, 0, 0.72) !important;
  animation: heroProfileTurnGlow 1.35s ease-in-out infinite !important;
}

body.holdem-table-active #hero.toact .hero-nameplate,
body.holdem-table-active #hero.toact .hero-info > .name,
body.holdem-table-active #hero.toact .hero-info > .chips {
  border-color: rgba(72, 255, 118, 0.45) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.28) !important;
}

@keyframes heroProfileTurnGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}

@media (max-width: 380px) {
  body.holdem-table-active #hero .hero-turn-badge {
    min-width: 104px !important;
    height: 25px !important;
    top: -30px !important;
    padding: 3px 9px !important;
    font-size: 12px !important;
  }

  body.holdem-table-active #hero .hero-turn-badge .toact-sec {
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.holdem-table-active #hero .hero-turn-badge.is-danger,
  body.holdem-table-active #hero.toact .hero-avatar-wrap,
  body.holdem-table-active #hero.toact .hero-info .avatar,
  body.holdem-table-active #hero.toact .hero-info .lavatar {
    animation: none !important;
  }
}

/* ═══ 2026-06-12 v89: active actor pulse + transient action result badges ═══
   Pure visual layer: seat coordinates, cards, stack plates, bet chips, and action
   panel layout remain untouched. */
body.holdem-table-active .seat.toact {
  z-index: 28 !important;
}

body.holdem-table-active .timer-ring-circle {
  stroke: #22c55e;
  stroke-linecap: round;
  transition: stroke 160ms ease, stroke-dashoffset 100ms linear;
}

body.holdem-table-active .seat.toact .avatar-wrap,
body.holdem-table-active .seat.toact .seat-avatar-shell {
  border-radius: 50% !important;
  animation: opponentProfileTurnPulse 1s ease-in-out infinite !important;
}

body.holdem-table-active .seat.toact .avatar,
body.holdem-table-active .seat.toact .lavatar {
  border-color: rgba(125, 255, 154, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 2px rgba(34, 197, 94, 0.30),
    0 0 15px rgba(34, 197, 94, 0.56),
    0 5px 13px rgba(0, 0, 0, 0.80) !important;
  animation: none !important;
}

@keyframes opponentProfileTurnPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.12);
  }
}

body.holdem-table-active #hero.toact .hero-avatar-wrap {
  animation: heroProfileTurnPulseV89 1s ease-in-out infinite !important;
}

body.holdem-table-active #hero.toact .hero-info .avatar,
body.holdem-table-active #hero.toact .hero-info .lavatar {
  animation: none !important;
}

@keyframes heroProfileTurnPulseV89 {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.15);
  }
}

body.holdem-table-active .seat .toact-badge {
  left: calc(50% + 30px) !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 52px !important;
  height: 18px !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(187, 247, 208, 0.82) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.98), rgba(21, 128, 61, 0.98)) !important;
  color: #f0fff4 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
  transform: translate(-12%, -50%) !important;
  box-shadow:
    0 0 0 1px rgba(2, 12, 4, 0.74),
    0 0 12px rgba(34, 197, 94, 0.64),
    0 4px 10px rgba(0, 0, 0, 0.64) !important;
  z-index: 21 !important;
  animation: turnBadgePulseV89 1s ease-in-out infinite !important;
}

body.holdem-table-active .seat-clock-130 .toact-badge,
body.holdem-table-active .seat-clock-3 .toact-badge,
body.holdem-table-active .seat-clock-430 .toact-badge {
  left: auto !important;
  right: calc(50% + 30px) !important;
  transform: translate(12%, -50%) !important;
}

body.holdem-table-active .seat .toact-badge .toact-sec {
  font-size: 11px !important;
  font-weight: 1000 !important;
  color: inherit !important;
}

body.holdem-table-active .seat .toact-badge.is-warn,
body.holdem-table-active #hero .hero-turn-badge.is-warn {
  border-color: rgba(254, 240, 138, 0.92) !important;
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.98), rgba(180, 83, 9, 0.98)) !important;
  color: #fffbe6 !important;
  box-shadow:
    0 0 0 1px rgba(24, 13, 0, 0.82),
    0 0 13px rgba(250, 204, 21, 0.76),
    0 4px 10px rgba(0, 0, 0, 0.64) !important;
  animation: turnBadgePulseV89 1s ease-in-out infinite !important;
}

body.holdem-table-active .seat .toact-badge.is-danger,
body.holdem-table-active #hero .hero-turn-badge.is-danger {
  border-color: rgba(254, 202, 202, 0.96) !important;
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.98), rgba(153, 27, 27, 0.98)) !important;
  color: #fff1f2 !important;
  box-shadow:
    0 0 0 1px rgba(30, 0, 0, 0.84),
    0 0 15px rgba(248, 113, 113, 0.84),
    0 4px 10px rgba(0, 0, 0, 0.66) !important;
  animation: turnBadgePulseV89 0.82s ease-in-out infinite !important;
}

@keyframes turnBadgePulseV89 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.82;
  }
}

body.holdem-table-active .seat .action-result-badge {
  left: calc(50% + 30px) !important;
  top: 5px !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 36px !important;
  height: 18px !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 999px !important;
  color: #f8fafc !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.74) !important;
  transform: translate(-12%, -50%) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  z-index: 20 !important;
  pointer-events: none !important;
  animation: actionResultBadgeV91 160ms ease-out both !important;
}

body.holdem-table-active .seat-clock-130 .action-result-badge,
body.holdem-table-active .seat-clock-3 .action-result-badge,
body.holdem-table-active .seat-clock-430 .action-result-badge {
  left: auto !important;
  right: calc(50% + 30px) !important;
  transform: translate(12%, -50%) !important;
}

body.holdem-table-active #hero .hero-info .hero-action-result-badge {
  position: absolute !important;
  left: 50% !important;
  top: -30px !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 46px !important;
  height: 24px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  transform: translateX(-50%) !important;
  z-index: 42 !important;
}

body.holdem-table-active .action-result-check {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.96), rgba(21, 128, 61, 0.96)) !important;
}

body.holdem-table-active .action-result-call {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.96), rgba(29, 78, 216, 0.96)) !important;
}

body.holdem-table-active .action-result-raise {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.98), rgba(180, 83, 9, 0.98)) !important;
  color: #fffbe6 !important;
}

body.holdem-table-active .action-result-bet {
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.98), rgba(194, 65, 12, 0.98)) !important;
}

body.holdem-table-active .action-result-fold {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.96), rgba(71, 85, 105, 0.98)) !important;
}

body.holdem-table-active .action-result-allin {
  border-color: rgba(254, 202, 202, 0.72) !important;
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.99), rgba(185, 28, 28, 0.99)) !important;
  box-shadow: 0 0 13px rgba(239, 68, 68, 0.60), 0 5px 12px rgba(0, 0, 0, 0.66) !important;
}

@keyframes actionResultBadgeV91 {
  0% {
    opacity: 0.35;
    filter: brightness(1.1);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

body.holdem-table-active .chip-rank-belt {
  position: absolute !important;
  inset: -5px !important;
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 2px solid var(--rank-main, rgba(250, 204, 21, 0.9)) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 56%, var(--rank-glow, rgba(250, 204, 21, 0.16)) 58%, transparent 74%),
    repeating-conic-gradient(from 8deg, transparent 0 18deg, var(--rank-soft, rgba(250, 204, 21, 0.34)) 18deg 26deg, transparent 26deg 44deg) !important;
  color: #171103 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  box-shadow:
    0 0 0 1px rgba(3, 7, 18, 0.86),
    0 0 13px var(--rank-glow, rgba(250, 204, 21, 0.46)),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  pointer-events: none !important;
  z-index: 34 !important;
}

body.holdem-table-active #hero .chip-rank-belt {
  inset: -6px !important;
  z-index: 44 !important;
}

body.holdem-table-active .chip-rank-mark {
  position: absolute !important;
  left: 50% !important;
  top: -8px !important;
  display: block !important;
  width: 22px !important;
  height: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 6px 6px 4px 4px !important;
  background: linear-gradient(180deg, var(--rank-light, #fde047), var(--rank-main, #facc15) 56%, var(--rank-dark, #a16207)) !important;
  transform: translateX(-50%) !important;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

body.holdem-table-active .chip-rank-mark::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  top: -6px !important;
  height: 9px !important;
  background: linear-gradient(180deg, var(--rank-light, #fde047), var(--rank-main, #facc15)) !important;
  clip-path: polygon(0 100%, 16% 24%, 34% 100%, 50% 0, 66% 100%, 84% 24%, 100% 100%) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.62)) !important;
}

body.holdem-table-active .chip-rank-text {
  position: absolute !important;
  left: 50% !important;
  bottom: -3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  height: 14px !important;
  padding: 1px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 4px 4px 8px 8px !important;
  background: linear-gradient(180deg, var(--rank-light, #fde047), var(--rank-main, #facc15) 54%, var(--rank-dark, #a16207)) !important;
  color: var(--rank-ink, #171103) !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) !important;
  transform: translateX(-50%) !important;
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

body.holdem-table-active .chip-rank-1 {
  --rank-light: #fef08a;
  --rank-main: #facc15;
  --rank-dark: #a16207;
  --rank-soft: rgba(250, 204, 21, 0.34);
  --rank-glow: rgba(250, 204, 21, 0.52);
  --rank-ink: #241500;
}

body.holdem-table-active .chip-rank-2 {
  --rank-light: #f8fafc;
  --rank-main: #cbd5e1;
  --rank-dark: #64748b;
  --rank-soft: rgba(226, 232, 240, 0.32);
  --rank-glow: rgba(226, 232, 240, 0.44);
  --rank-ink: #101827;
}

body.holdem-table-active .chip-rank-3 {
  --rank-light: #fed7aa;
  --rank-main: #fb923c;
  --rank-dark: #9a3412;
  --rank-soft: rgba(251, 146, 60, 0.34);
  --rank-glow: rgba(251, 146, 60, 0.46);
  --rank-ink: #220d02;
}

@media (prefers-reduced-motion: reduce) {
  body.holdem-table-active .seat.toact .avatar-wrap,
  body.holdem-table-active .seat.toact .seat-avatar-shell,
  body.holdem-table-active #hero.toact .hero-avatar-wrap,
  body.holdem-table-active .seat .toact-badge,
  body.holdem-table-active .seat .toact-badge.is-warn,
  body.holdem-table-active .seat .toact-badge.is-danger,
  body.holdem-table-active #hero .hero-turn-badge.is-warn,
  body.holdem-table-active #hero .hero-turn-badge.is-danger,
  body.holdem-table-active .seat .action-result-badge,
  body.holdem-table-active #hero .hero-info .hero-action-result-badge {
    animation: none !important;
  }
}

/* ═══ 2026-06-12 v90: turn/action badges sit above the acting hole cards ═══ */
body.holdem-table-active .seat .toact-badge,
body.holdem-table-active .seat .action-result-badge {
  left: 50% !important;
  right: auto !important;
  top: -53px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 24 !important;
}

body.holdem-table-active .seat-clock-130 .toact-badge,
body.holdem-table-active .seat-clock-3 .toact-badge,
body.holdem-table-active .seat-clock-430 .toact-badge,
body.holdem-table-active .seat-clock-130 .action-result-badge,
body.holdem-table-active .seat-clock-3 .action-result-badge,
body.holdem-table-active .seat-clock-430 .action-result-badge {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

body.holdem-table-active #hero > .mobile-hero-seat > .hero-turn-badge,
body.holdem-table-active.holdem-action-open #hero > .mobile-hero-seat > .hero-turn-badge,
body.holdem-table-active.holdem-action-panel-visible #hero > .mobile-hero-seat > .hero-turn-badge,
body.holdem-table-active #hero > .mobile-hero-seat > .hero-action-result-badge,
body.holdem-table-active.holdem-action-open #hero > .mobile-hero-seat > .hero-action-result-badge,
body.holdem-table-active.holdem-action-panel-visible #hero > .mobile-hero-seat > .hero-action-result-badge {
  position: absolute !important;
  left: var(--hero-cards-x, 162px) !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--hero-cards-anchor-y, var(--hero-card-lane-bottom, 12px)) + 74px) !important;
  transform: translateX(-50%) !important;
  z-index: 43 !important;
  pointer-events: none !important;
}

body.holdem-table-active #hero > .mobile-hero-seat > .hero-turn-badge,
body.holdem-table-active.holdem-action-open #hero > .mobile-hero-seat > .hero-turn-badge,
body.holdem-table-active.holdem-action-panel-visible #hero > .mobile-hero-seat > .hero-turn-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 72px !important;
  height: 23px !important;
  padding: 3px 9px !important;
  border-width: 1px !important;
  font-size: 12px !important;
  animation: turnBadgePulseV89 1s ease-in-out infinite !important;
}

body.holdem-table-active #hero > .mobile-hero-seat > .hero-turn-badge .toact-sec {
  font-size: 13px !important;
}

body.holdem-table-active #hero > .mobile-hero-seat > .hero-action-result-badge,
body.holdem-table-active.holdem-action-open #hero > .mobile-hero-seat > .hero-action-result-badge,
body.holdem-table-active.holdem-action-panel-visible #hero > .mobile-hero-seat > .hero-action-result-badge {
  min-width: 46px !important;
  height: 22px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.holdem-table-active #hero > .mobile-hero-seat > .hero-turn-badge,
  body.holdem-table-active #hero > .mobile-hero-seat > .hero-action-result-badge {
    animation: none !important;
  }
}

/* ═══ 2026-06-12 v90: table emotes beside hero seat ═══ */
body.holdem-table-active .mobile-seat-card,
body.holdem-table-active #hero .mobile-hero-seat {
  position: relative !important;
  overflow: visible !important;
}

body.holdem-table-active #hero .hero-emote-button,
body.holdem-table-active.holdem-action-open #hero .hero-emote-button,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-emote-button {
  position: absolute !important;
  left: 2px !important;
  bottom: calc(var(--hero-cards-anchor-y, var(--hero-card-lane-bottom, 12px)) + 4px) !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(6, 13, 24, 0.96)) !important;
  color: #fef3c7 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  box-shadow:
    0 0 0 1px rgba(3, 7, 18, 0.86),
    0 6px 14px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  z-index: 54 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.holdem-table-active #hero .hero-emote-button:active {
  transform: scale(0.94) !important;
}

.table-emote-panel {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + 82px) !important;
  width: min(336px, calc(100vw - 24px)) !important;
  max-height: min(292px, calc(100dvh - 220px)) !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(250, 204, 21, 0.22) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(3, 7, 18, 0.98)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 48px rgba(0, 0, 0, 0.72) !important;
  padding: 8px !important;
  z-index: 2400 !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.holdem-action-panel-visible .table-emote-panel,
body.holdem-action-open .table-emote-panel {
  bottom: calc(var(--poker-action-panel-height, 142px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + 10px) !important;
}

.table-emote-panel.hidden {
  display: none !important;
}

.table-emote-panel-head {
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 2px 6px 4px !important;
  color: #fef3c7 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.table-emote-close {
  width: 26px !important;
  height: 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: #e5e7eb !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.table-emote-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  max-height: 236px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 1px 1px 3px !important;
}

.table-emote-option {
  min-width: 0 !important;
  height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.82)) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.table-emote-option:active {
  transform: scale(0.96) !important;
  filter: brightness(1.12) !important;
}

.table-emote-option-emoji {
  font-size: 24px !important;
  line-height: 1 !important;
}

.table-emote-option-label {
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(226, 232, 240, 0.92) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.holdem-table-active .table-emote-bubble {
  position: absolute !important;
  left: 50% !important;
  top: -94px !important;
  min-width: 58px !important;
  max-width: 126px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 7px 10px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.98)) !important;
  color: #0f172a !important;
  text-align: center !important;
  transform: translateX(-50%) scale(0.96) !important;
  transform-origin: 50% 100% !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  pointer-events: none !important;
  z-index: 58 !important;
  animation: tableEmoteIn 160ms ease-out forwards !important;
}

body.holdem-table-active .table-emote-bubble::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  width: 13px !important;
  height: 13px !important;
  background: rgba(226, 232, 240, 0.98) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

body.holdem-table-active #hero .table-emote-bubble,
body.holdem-table-active.holdem-action-open #hero .table-emote-bubble,
body.holdem-table-active.holdem-action-panel-visible #hero .table-emote-bubble {
  left: var(--hero-cards-x, 162px) !important;
  top: auto !important;
  bottom: calc(var(--hero-cards-anchor-y, var(--hero-card-lane-bottom, 12px)) + 104px) !important;
  z-index: 60 !important;
}

body.holdem-table-active .table-emote-emoji {
  font-size: 24px !important;
  line-height: 1 !important;
}

body.holdem-table-active .table-emote-label {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.holdem-table-active .table-emote-image {
  display: none !important;
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

body.holdem-table-active .table-emote-bubble.has-emote-image .table-emote-image {
  display: block !important;
}

body.holdem-table-active .table-emote-bubble.has-emote-image .table-emote-emoji {
  display: none !important;
}

body.holdem-table-active .table-emote-bubble.is-leaving {
  animation: tableEmoteOut 260ms ease-in forwards !important;
}

@keyframes tableEmoteIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes tableEmoteOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.92);
  }
}

@media (max-width: 380px) {
  .table-emote-panel {
    width: min(318px, calc(100vw - 18px)) !important;
  }

  .table-emote-option {
    height: 60px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.holdem-table-active .table-emote-bubble,
  body.holdem-table-active .table-emote-bubble.is-leaving {
    animation: none !important;
  }
}

/* ═══ 2026-06-12 v91: hero nameplate/emote-only position trim ═══
   Keep hero avatar, cards, hand label, action badges, and action panel anchors
   unchanged. These offsets only move the hero name/chip plate and the emote
   button inside the hero seat layer. */
body.holdem-table-active {
  --hero-info-offset-y: 11px;
  --hero-emote-offset-x: -58px;
  --hero-emote-offset-y: 12px;
}

body.holdem-table-active #hero .hero-nameplate,
body.holdem-table-active.holdem-action-open #hero .hero-nameplate,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-nameplate {
  position: relative !important;
  top: var(--hero-info-offset-y) !important;
  z-index: 49 !important;
}

body.holdem-table-active #hero .hero-info > .name,
body.holdem-table-active #hero .hero-info > .chips,
body.holdem-table-active.holdem-action-open #hero .hero-info > .name,
body.holdem-table-active.holdem-action-open #hero .hero-info > .chips,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info > .name,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info > .chips {
  position: relative !important;
  top: var(--hero-info-offset-y) !important;
  z-index: 49 !important;
}

body.holdem-table-active #hero .hero-emote-button,
body.holdem-table-active.holdem-action-open #hero .hero-emote-button,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-emote-button {
  left: var(--hero-emote-left, calc(56px + var(--hero-emote-offset-x))) !important;
  bottom: var(--hero-emote-offset-y) !important;
  width: 42px !important;
  height: 42px !important;
  z-index: 56 !important;
  pointer-events: auto !important;
}

body.holdem-table-active #hero .hero-emote-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 50% !important;
}

body.holdem-table-active #hero .hero-avatar-wrap .timer-ring,
body.holdem-table-active #hero .chip-rank-belt {
  pointer-events: none !important;
}

/* 2026-06-14: PKO bounty display only. Sits below the existing name/chip plate. */
body.holdem-table-active .pko-bounty-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  min-height: 17px !important;
  margin: -3px auto 0 !important;
  padding: 1px 3px 2px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(230, 172, 67, 0.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(27, 20, 10, 0.96), rgba(5, 7, 13, 0.98)) !important;
  color: #ffe08a !important;
  font-size: 9.4px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.68),
    0 3px 7px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(174, 110, 20, 0.24) !important;
  position: relative !important;
  z-index: 35 !important;
  pointer-events: none !important;
}

body.holdem-table-active .pko-bounty-icon {
  flex: 0 0 auto !important;
  width: 13px !important;
  height: 9px !important;
  display: block !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85)) !important;
}

body.holdem-table-active .pko-bounty-cash-back {
  fill: #8fbc7c !important;
  stroke: #1f3b21 !important;
  stroke-width: 1.1 !important;
}

body.holdem-table-active .pko-bounty-cash-front {
  fill: #d7efb2 !important;
  stroke: #244322 !important;
  stroke-width: 1.1 !important;
}

body.holdem-table-active .pko-bounty-cash-line {
  fill: none !important;
  stroke: #244322 !important;
  stroke-width: 1.2 !important;
  stroke-linecap: round !important;
}

body.holdem-table-active .pko-bounty-cash-seal {
  fill: #3f9a4d !important;
  stroke: rgba(255, 255, 255, 0.55) !important;
  stroke-width: 0.7 !important;
}

body.holdem-table-active .pko-bounty-amount {
  display: inline-block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  transform: translateY(0.25px) !important;
}

.prl-ticket {
  color: #ffe08a;
  font-weight: 900;
}

body.holdem-table-active #hero .hero-info .hero-pko-bounty-badge,
body.holdem-table-active.holdem-action-open #hero .hero-info .hero-pko-bounty-badge,
body.holdem-table-active.holdem-action-panel-visible #hero .hero-info .hero-pko-bounty-badge {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  top: calc(var(--hero-info-offset-y, 0px) + 2px) !important;
  z-index: 50 !important;
}

body.holdem-table-active .pko-ko-layer {
  position: fixed;
  inset: 0;
  z-index: 1180;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}

body.holdem-table-active .pko-ko-streak {
  position: fixed;
  height: 5px;
  transform-origin: left center;
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.9));
}

body.holdem-table-active .pko-ko-streak span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,214,92,0.95), rgba(255,80,80,0.92));
  transform-origin: left center;
  animation: pkoKoStreak 430ms cubic-bezier(0.22, 0.9, 0.35, 1) forwards;
}

body.holdem-table-active .pko-ko-bolt {
  position: fixed;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff7ad 0 22%, #facc15 23% 48%, #ef4444 49% 70%, rgba(239,68,68,0) 71%);
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.95), 0 0 26px rgba(239, 68, 68, 0.7);
  animation: pkoKoBolt 520ms cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

body.holdem-table-active .pko-ko-impact,
body.holdem-table-active .pko-ko-out,
body.holdem-table-active .pko-ko-gain {
  position: fixed;
  transform: translate(-50%, -50%);
  opacity: 0;
  white-space: nowrap;
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

body.holdem-table-active .pko-ko-impact {
  color: #fff2a8;
  font-size: 30px;
  -webkit-text-stroke: 1px rgba(127, 29, 29, 0.8);
  animation: pkoKoImpact 440ms cubic-bezier(0.2, 1.35, 0.25, 1) forwards;
}

body.holdem-table-active .pko-ko-out {
  color: #fecaca;
  font-size: 17px;
  padding: 4px 11px;
  border: 2px solid rgba(248, 113, 113, 0.95);
  border-radius: 8px;
  background: rgba(15, 8, 13, 0.86);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.55);
  animation: pkoKoOut 680ms ease-out forwards;
}

body.holdem-table-active .pko-ko-token {
  position: fixed;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.42), rgba(127,29,29,0.92) 60%, rgba(17,24,39,0.95));
  border: 1px solid rgba(253, 164, 175, 0.82);
  box-shadow: 0 0 20px rgba(248, 113, 113, 0.7);
  opacity: 0;
  animation: pkoKoToken 720ms cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

body.holdem-table-active .pko-ko-gain {
  color: #ffe08a;
  font-size: 15px;
  padding: 4px 9px;
  border: 1px solid rgba(251, 191, 36, 0.82);
  border-radius: 999px;
  background: rgba(7, 10, 18, 0.9);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.45);
  animation: pkoKoGain 620ms ease-out forwards;
}

body.holdem-table-active .seat.pko-ko-winner .avatar-wrap,
body.holdem-table-active #hero.pko-ko-winner .hero-avatar-wrap {
  animation: pkoKoWinnerPulse 900ms ease-out;
}

body.holdem-table-active .seat.pko-ko-loser .avatar-wrap,
body.holdem-table-active #hero.pko-ko-loser .hero-avatar-wrap {
  animation: pkoKoLoserHit 520ms ease-out;
}

@keyframes pkoKoStreak {
  0% { opacity: 0; transform: scaleX(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes pkoKoBolt {
  0% { opacity: 0; transform: translate(0, 0) scale(0.45); }
  12% { opacity: 1; }
  82% { opacity: 1; transform: translate(var(--pko-ko-dx), var(--pko-ko-dy)) scale(1); }
  100% { opacity: 0; transform: translate(var(--pko-ko-dx), var(--pko-ko-dy)) scale(0.25); }
}

@keyframes pkoKoImpact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(-7deg); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(3deg); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(0.92) rotate(-3deg); }
}

@keyframes pkoKoOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.65) rotate(-10deg); }
  28% { opacity: 1; transform: translate(-50%, -50%) scale(0.94) rotate(-10deg); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-10deg); }
  100% { opacity: 0; transform: translate(-50%, -46%) scale(0.9) rotate(-10deg); }
}

@keyframes pkoKoToken {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15% { opacity: 1; transform: translate(0, 0) scale(1); }
  78% { opacity: 1; transform: translate(var(--pko-ko-dx), var(--pko-ko-dy)) scale(0.82); }
  100% { opacity: 0; transform: translate(var(--pko-ko-dx), var(--pko-ko-dy)) scale(0.35); }
}

@keyframes pkoKoGain {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  22% { opacity: 1; transform: translate(-50%, -72%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -108%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -128%) scale(0.92); }
}

@keyframes pkoKoWinnerPulse {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.55) drop-shadow(0 0 13px rgba(251, 191, 36, 0.95)); }
  100% { filter: brightness(1); }
}

@keyframes pkoKoLoserHit {
  0% { filter: brightness(1); transform: scale(1); }
  28% { filter: brightness(1.45) saturate(1.4); transform: scale(1.05); }
  100% { filter: brightness(0.82) saturate(0.8); transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  body.holdem-table-active .pko-ko-streak span,
  body.holdem-table-active .pko-ko-bolt,
  body.holdem-table-active .pko-ko-impact,
  body.holdem-table-active .pko-ko-out,
  body.holdem-table-active .pko-ko-token,
  body.holdem-table-active .pko-ko-gain,
  body.holdem-table-active .seat.pko-ko-winner .avatar-wrap,
  body.holdem-table-active #hero.pko-ko-winner .hero-avatar-wrap,
  body.holdem-table-active .seat.pko-ko-loser .avatar-wrap,
  body.holdem-table-active #hero.pko-ko-loser .hero-avatar-wrap {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* Mystery bounty box opening overlay. This is intentionally separate from the
   PKO knockout animation so the existing bounty flow stays untouched. */
body.holdem-table-active .mystery-bounty-activation-overlay {
  position: fixed;
  inset: 0;
  z-index: 1318;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: auto;
  overflow: hidden;
  contain: layout style paint;
}

body.holdem-table-active .mystery-bounty-activation-dim {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.62);
  backdrop-filter: blur(2px);
}

body.holdem-table-active .mystery-bounty-activation-card {
  position: relative;
  width: min(358px, 91vw);
  max-height: min(620px, 86vh);
  overflow: auto;
  padding: 20px 18px 16px;
  border: 1px solid rgba(251,191,36,0.62);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(250,204,21,0.16), transparent 42%),
    linear-gradient(180deg, rgba(15,23,42,0.98), rgba(2,8,23,0.97));
  box-shadow: 0 24px 70px rgba(0,0,0,0.68), inset 0 1px 0 rgba(255,255,255,0.08);
  color: #f8fafc;
  text-align: center;
  animation: mysteryBountyActivationIn 220ms ease-out both;
}

body.holdem-table-active .mystery-bounty-activation-kicker {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

body.holdem-table-active .mystery-bounty-activation-card h3 {
  margin: 7px 0 0;
  color: #f8fafc;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.22;
}

body.holdem-table-active .mystery-bounty-activation-card p {
  margin: 10px 0 0;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
}

body.holdem-table-active .mystery-bounty-activation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

body.holdem-table-active .mystery-bounty-activation-summary div {
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 12px;
  background: rgba(15,23,42,0.72);
}

body.holdem-table-active .mystery-bounty-activation-summary span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 850;
}

body.holdem-table-active .mystery-bounty-activation-summary strong {
  display: block;
  margin-top: 5px;
  color: #fde68a;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.12;
  word-break: keep-all;
}

body.holdem-table-active .mystery-bounty-activation-list {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

body.holdem-table-active .mystery-bounty-activation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(251,191,36,0.22);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(251,191,36,0.12), rgba(30,41,59,0.54));
}

body.holdem-table-active .mystery-bounty-activation-row strong {
  color: #fef3c7;
  font-size: 14px;
  font-weight: 950;
}

body.holdem-table-active .mystery-bounty-activation-row span,
body.holdem-table-active .mystery-bounty-activation-empty {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 850;
}

body.holdem-table-active .mystery-bounty-activation-empty {
  padding: 12px;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 12px;
  background: rgba(15,23,42,0.62);
}

body.holdem-table-active .mystery-bounty-activation-ok {
  width: 100%;
  height: 44px;
  margin-top: 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #facc15, #d97706);
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(217,119,6,0.32);
}

body.holdem-table-active .mystery-bounty-activation-overlay.is-disabled .mystery-bounty-activation-card {
  border-color: rgba(148,163,184,0.38);
}

@keyframes mysteryBountyActivationIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.holdem-table-active .mystery-bounty-overlay {
  position: fixed;
  inset: 0;
  z-index: 1320;
  display: grid;
  place-items: center;
  pointer-events: auto;
  overflow: hidden;
  contain: layout style paint;
}

body.holdem-table-active .mystery-bounty-dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.44);
  backdrop-filter: blur(1px);
  animation: mysteryBountyDim 6500ms ease forwards;
}

body.holdem-table-active .mystery-bounty-card {
  position: relative;
  width: min(330px, 86vw);
  min-height: 348px;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 20px 18px 18px;
  border: 1px solid rgba(251,191,36,0.62);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 36%, rgba(251,191,36,0.18), transparent 44%),
    linear-gradient(180deg, rgba(10,18,33,0.96), rgba(3,7,18,0.94));
  box-shadow: 0 22px 70px rgba(0,0,0,0.66), inset 0 1px 0 rgba(255,255,255,0.08);
  color: #f8fafc;
  text-align: center;
  transform: scale(0.84);
  opacity: 0;
  animation: mysteryBountyCardIn 6500ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}

body.holdem-table-active .mystery-bounty-skip {
  position: absolute;
  right: 12px;
  top: 10px;
  min-width: 58px;
  height: 28px;
  border: 1px solid rgba(148,163,184,0.38);
  border-radius: 999px;
  background: rgba(15,23,42,0.74);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 850;
}

body.holdem-table-active .mystery-bounty-title {
  margin-top: 4px;
  color: #fbbf24;
  font-size: 18px;
  font-weight: 950;
  text-shadow: 0 0 18px rgba(251,191,36,0.42);
}

body.holdem-table-active .mystery-bounty-ko {
  min-height: 18px;
  margin-top: 6px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 750;
}

body.holdem-table-active .mystery-bounty-scene {
  position: relative;
  width: 210px;
  height: 168px;
  margin-top: 12px;
}

body.holdem-table-active .mystery-bounty-rays {
  position: absolute;
  inset: 17px 0 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,204,21,0.54), rgba(37,99,235,0.18) 34%, transparent 67%);
  filter: blur(2px);
  opacity: 0;
  transform: scale(0.52);
  animation: mysteryBountyRays 6500ms ease forwards;
}

body.holdem-table-active .mystery-bounty-box {
  position: absolute;
  left: 50%;
  bottom: 15px;
  width: 124px;
  height: 94px;
  transform: translateX(-50%);
  animation: mysteryBountyBoxShake 6500ms ease forwards;
}

body.holdem-table-active .mystery-bounty-box-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68px;
  border: 2px solid rgba(255,224,138,0.86);
  border-radius: 14px 14px 18px 18px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,0.18) 46% 54%, transparent 55%),
    linear-gradient(180deg, #9f5b13, #5b2d0b 72%, #2b1406);
  box-shadow: inset 0 6px 10px rgba(255,255,255,0.12), 0 16px 24px rgba(0,0,0,0.38);
}

body.holdem-table-active .mystery-bounty-box-lid {
  position: absolute;
  left: -5px;
  right: -5px;
  top: 5px;
  height: 36px;
  border: 2px solid rgba(255,232,156,0.92);
  border-radius: 15px 15px 8px 8px;
  background: linear-gradient(180deg, #f1b63a, #8a4a10);
  transform-origin: 50% 100%;
  box-shadow: 0 8px 18px rgba(0,0,0,0.38);
  animation: mysteryBountyLid 6500ms cubic-bezier(0.2, 0.82, 0.25, 1) forwards;
}

body.holdem-table-active .mystery-bounty-lock {
  position: absolute;
  left: 50%;
  top: 49px;
  width: 30px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 8px 8px 10px 10px;
  background: linear-gradient(180deg, #fef3c7, #d49a1d 58%, #7c4a03);
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: 0 0 15px rgba(251,191,36,0.35);
  animation: mysteryBountyLock 6500ms ease forwards;
}

body.holdem-table-active .mystery-bounty-lock::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -15px;
  width: 14px;
  height: 18px;
  border: 4px solid rgba(254,243,199,0.94);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

body.holdem-table-active .mystery-bounty-lock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 6px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(31,20,7,0.76);
}

body.holdem-table-active .mystery-bounty-key {
  position: absolute;
  left: -10px;
  top: 104px;
  width: 78px;
  height: 22px;
  opacity: 0;
  transform-origin: 72% 50%;
  animation: mysteryBountyKey 6500ms cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
}

body.holdem-table-active .mystery-bounty-key::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border: 5px solid #facc15;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(250,204,21,0.72);
}

body.holdem-table-active .mystery-bounty-key span {
  position: absolute;
  left: 23px;
  top: 9px;
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff7ad, #d97706);
  box-shadow: 0 0 12px rgba(250,204,21,0.72);
}

body.holdem-table-active .mystery-bounty-key span::before,
body.holdem-table-active .mystery-bounty-key span::after {
  content: "";
  position: absolute;
  right: 0;
  width: 8px;
  height: 10px;
  background: #d97706;
}

body.holdem-table-active .mystery-bounty-key span::before { top: 3px; }
body.holdem-table-active .mystery-bounty-key span::after { top: -8px; }

body.holdem-table-active .mystery-bounty-sparkles i {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff7ad;
  opacity: 0;
  box-shadow: 0 0 12px rgba(255,247,173,0.95);
  animation: mysteryBountySparkle 6500ms ease forwards;
}

body.holdem-table-active .mystery-bounty-sparkles i:nth-child(1) { --sx: -70px; --sy: -48px; }
body.holdem-table-active .mystery-bounty-sparkles i:nth-child(2) { --sx: 68px; --sy: -54px; animation-delay: 80ms; }
body.holdem-table-active .mystery-bounty-sparkles i:nth-child(3) { --sx: -42px; --sy: -88px; animation-delay: 130ms; }
body.holdem-table-active .mystery-bounty-sparkles i:nth-child(4) { --sx: 48px; --sy: -94px; animation-delay: 180ms; }
body.holdem-table-active .mystery-bounty-sparkles i:nth-child(5) { --sx: -86px; --sy: -8px; animation-delay: 230ms; }
body.holdem-table-active .mystery-bounty-sparkles i:nth-child(6) { --sx: 86px; --sy: -12px; animation-delay: 280ms; }

body.holdem-table-active .mystery-bounty-status {
  min-height: 19px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 850;
  animation: mysteryBountyStatus 6500ms steps(1, end) forwards;
}

body.holdem-table-active .mystery-bounty-result {
  margin-top: 8px;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  animation: mysteryBountyResult 6500ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}

body.holdem-table-active .mystery-bounty-result strong {
  display: block;
  color: #fde68a;
  font-size: 27px;
  font-weight: 1000;
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(87,48,7,0.75), 0 0 22px rgba(251,191,36,0.82);
}

body.holdem-table-active .mystery-bounty-result span,
body.holdem-table-active .mystery-bounty-result em {
  display: block;
  margin-top: 6px;
  color: #e2e8f0;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

body.holdem-table-active .mystery-bounty-result em {
  color: #bfdbfe;
  line-height: 1.35;
}

body.holdem-table-active .mystery-bounty-confirm {
  min-width: 118px;
  height: 40px;
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #facc15, #d97706);
  color: #111827;
  font-size: 14px;
  font-weight: 950;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(217,119,6,0.36);
}

body.holdem-table-active .mystery-tier-epic .mystery-bounty-card,
body.holdem-table-active .mystery-tier-legendary .mystery-bounty-card {
  box-shadow: 0 24px 80px rgba(0,0,0,0.72), 0 0 42px rgba(251,191,36,0.24), inset 0 1px 0 rgba(255,255,255,0.1);
}

body.holdem-table-active .mystery-tier-legendary .mystery-bounty-sparkles i {
  width: 8px;
  height: 8px;
  background: #fef3c7;
}

body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-dim,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-card,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-rays,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-box,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-box-lid,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-lock,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-key,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-sparkles i,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-status,
body.holdem-table-active .mystery-bounty-overlay.is-compact .mystery-bounty-result {
  animation-duration: 3600ms;
}

body.holdem-table-active .mystery-bounty-overlay.is-skipped .mystery-bounty-key,
body.holdem-table-active .mystery-bounty-overlay.is-skipped .mystery-bounty-box,
body.holdem-table-active .mystery-bounty-overlay.is-skipped .mystery-bounty-box-lid,
body.holdem-table-active .mystery-bounty-overlay.is-skipped .mystery-bounty-lock,
body.holdem-table-active .mystery-bounty-overlay.is-skipped .mystery-bounty-rays {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
}

body.holdem-table-active .mystery-bounty-overlay.is-skipped .mystery-bounty-status {
  display: none;
}

body.holdem-table-active .mystery-bounty-overlay.is-skipped .mystery-bounty-result {
  animation: none !important;
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-dim,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-card,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-rays,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-box,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-box-lid,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-lock,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-key,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-sparkles i,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-status,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-result {
  animation: none !important;
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-dim {
  opacity: 1;
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-card {
  opacity: 1;
  transform: scale(1);
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-rays {
  opacity: 0.78;
  transform: scale(1.08) rotate(16deg);
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-box {
  opacity: 1;
  transform: translateX(-50%) rotate(0deg);
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-box-lid {
  transform: rotateX(62deg) translateY(-14px);
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-lock,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-key,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-sparkles i,
body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-status {
  opacity: 0;
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-result {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.holdem-table-active .mystery-bounty-overlay.is-ready .mystery-bounty-confirm {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@keyframes mysteryBountyDim {
  0%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mysteryBountyCardIn {
  0% { opacity: 0; transform: scale(0.84); }
  12%, 88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96); }
}

@keyframes mysteryBountyRays {
  0%, 58% { opacity: 0; transform: scale(0.52) rotate(0deg); }
  66%, 86% { opacity: 1; transform: scale(1.06) rotate(14deg); }
  100% { opacity: 0; transform: scale(1.18) rotate(28deg); }
}

@keyframes mysteryBountyBoxShake {
  0% { opacity: 0; transform: translateX(-50%) scale(0.72); }
  12% { opacity: 1; transform: translateX(-50%) scale(1); }
  49% { transform: translateX(-50%) rotate(0deg); }
  53% { transform: translateX(-50%) rotate(-2deg); }
  57% { transform: translateX(-50%) rotate(2deg); }
  61%, 100% { transform: translateX(-50%) rotate(0deg); }
}

@keyframes mysteryBountyLid {
  0%, 63% { transform: rotateX(0deg) translateY(0); }
  72%, 100% { transform: rotateX(62deg) translateY(-14px); }
}

@keyframes mysteryBountyLock {
  0%, 48% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
  58% { transform: translateX(-50%) rotate(16deg); }
  66%, 100% { transform: translateX(-50%) translateY(18px) rotate(28deg); opacity: 0; }
}

@keyframes mysteryBountyKey {
  0%, 16% { opacity: 0; transform: translate(-28px, 22px) rotate(-20deg); }
  30% { opacity: 1; transform: translate(34px, -6px) rotate(-10deg); }
  45% { opacity: 1; transform: translate(82px, -14px) rotate(0deg); }
  56% { opacity: 1; transform: translate(82px, -14px) rotate(82deg); }
  66%, 100% { opacity: 0; transform: translate(82px, -14px) rotate(100deg) scale(0.88); }
}

@keyframes mysteryBountySparkle {
  0%, 62% { opacity: 0; transform: translate(0,0) scale(0.35); }
  72% { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--sx) * 1.16), calc(var(--sy) * 1.12)) scale(0.45); }
}

@keyframes mysteryBountyStatus {
  0%, 44% { opacity: 1; }
  45%, 64% { opacity: 1; }
  65%, 100% { opacity: 0; }
}

@keyframes mysteryBountyResult {
  0%, 70% { opacity: 0; transform: translateY(8px) scale(0.9); }
  78%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  body.holdem-table-active .mystery-bounty-overlay *,
  body.holdem-table-active .mystery-bounty-overlay *::before,
  body.holdem-table-active .mystery-bounty-overlay *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* Card deck settings */
body.holdem-table-active .gg-topbar-actions .card-deck-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  color: #fde68a !important;
  border-color: rgba(250, 204, 21, 0.54) !important;
  background: linear-gradient(180deg, rgba(45, 35, 22, 0.98), rgba(10, 10, 9, 0.98)) !important;
}

body.holdem-table-active .gg-topbar-actions .card-deck-menu-btn::before {
  content: "" !important;
  width: 18px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  border: 1.5px solid currentColor !important;
  border-radius: 4px !important;
  background:
    radial-gradient(circle at 50% 40%, currentColor 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 42%, currentColor 43% 48%, transparent 49%) !important;
  opacity: 0.95 !important;
}

.card-deck-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 2450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  padding-bottom: max(14px, calc(var(--holdem-safe-area-bottom) + 12px));
}

.card-deck-settings-modal.hidden {
  display: none !important;
}

.card-deck-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.card-deck-settings-card {
  position: relative;
  width: min(430px, calc(100vw - 22px));
  max-height: min(760px, calc(100dvh - 28px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(250, 204, 21, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(250, 204, 21, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(32, 32, 31, 0.98), rgba(8, 10, 12, 0.98));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 70px rgba(0, 0, 0, 0.78);
}

.card-deck-settings-head {
  height: 58px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 58px;
  border-bottom: 1px solid rgba(250, 204, 21, 0.18);
}

.card-deck-settings-head strong {
  color: #fde68a;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
}

.card-deck-settings-head button {
  position: absolute;
  right: 14px;
  top: 11px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  color: #d1d5db;
  font-size: 28px;
  line-height: 30px;
  cursor: pointer;
}

.card-deck-settings-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px 12px;
}

.card-deck-preview-panel,
.card-deck-option-block {
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 19, 20, 0.92), rgba(8, 9, 10, 0.92));
}

.card-deck-preview-panel {
  min-height: 132px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 11px;
  padding: 14px;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(98, 54, 172, 0.34), transparent 63%),
    linear-gradient(180deg, rgba(24, 24, 24, 0.95), rgba(8, 9, 10, 0.96));
}

.card-deck-preview-panel > strong,
.card-deck-option-block > strong {
  color: #f8d98a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.card-deck-preview-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.card-deck-options-panel {
  display: grid;
  gap: 12px;
}

.card-deck-option-block {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.card-skin-grid {
  display: grid;
  gap: 8px;
}

.card-skin-grid-front {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-skin-grid-back {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.card-skin-option {
  position: relative;
  min-width: 0;
  min-height: 86px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 7px 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: #e5e7eb;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.card-skin-option.is-selected {
  border-color: rgba(250, 204, 21, 0.92);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.46),
    0 0 18px rgba(250, 204, 21, 0.2);
}

.card-skin-check {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  color: #111827;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.card-skin-option.is-selected .card-skin-check {
  display: inline-flex;
}

.card-skin-label {
  max-width: 100%;
  overflow: visible;
  color: #d6d3d1;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

.card-skin-option[data-card-back-skin-option="back_123game_black_gold"] .card-skin-label {
  font-size: 9px;
}

.card-deck-settings-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.32fr;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.card-deck-settings-actions button {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  background: linear-gradient(180deg, rgba(25, 25, 24, 0.98), rgba(7, 8, 10, 0.98));
  color: #e7e5e4;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

#cardDeckSettingsApply {
  border-color: rgba(250, 204, 21, 0.78);
  background: linear-gradient(180deg, #f8c650, #d99013);
  color: #fff7ed;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
}

.deck-preview-card {
  width: 37px !important;
  height: 51px !important;
  min-width: 37px !important;
  min-height: 51px !important;
  margin: 0 !important;
  border-radius: 6px !important;
}

.card-deck-main-preview-card {
  width: 46px !important;
  height: 64px !important;
  min-width: 46px !important;
  min-height: 64px !important;
  border-radius: 7px !important;
}

.card-skin-option-card {
  width: 38px !important;
  height: 52px !important;
  min-width: 38px !important;
  min-height: 52px !important;
}

.card-deck-main-preview-card .rank {
  font-size: 20px !important;
}

.card-deck-main-preview-card .suit {
  font-size: 23px !important;
}

.card-skin-option-card .rank {
  font-size: 17px !important;
}

.card-skin-option-card .suit {
  font-size: 19px !important;
}

@media (min-width: 700px) {
  .card-deck-settings-card {
    width: min(660px, calc(100vw - 32px));
  }

  .card-deck-settings-body {
    grid-template-columns: 184px 1fr;
  }

  .card-deck-preview-panel {
    min-height: 100%;
  }
}

@media (max-width: 430px) {
  .card-deck-settings-modal {
    align-items: flex-end;
    padding: 10px;
    padding-bottom: max(10px, calc(var(--holdem-safe-area-bottom) + 8px));
  }

  .card-deck-settings-card {
    width: 100%;
    max-height: min(720px, calc(100dvh - 20px));
    border-radius: 16px 16px 12px 12px;
  }

  .card-deck-settings-head {
    height: 54px;
  }

  .card-deck-settings-body {
    gap: 10px;
    padding: 12px 10px 10px;
  }

  .card-skin-grid-back {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-skin-option {
    min-height: 82px;
  }
}

body[data-card-front-skin="classic_white"],
.deck-preview-card[data-preview-front="classic_white"] {
  --deck-front-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 242, 245, 0.99));
  --deck-front-border: 0;
  --deck-front-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 9px rgba(0, 0, 0, 0.52);
  --deck-spade-color: #151515;
  --deck-heart-color: #df2428;
  --deck-diamond-color: #2365e8;
  --deck-club-color: #18a64b;
  --deck-spade-rank-color: #151515;
  --deck-spade-suit-color: #151515;
  --deck-heart-rank-color: #df2428;
  --deck-heart-suit-color: #df2428;
  --deck-diamond-rank-color: #2365e8;
  --deck-diamond-suit-color: #2365e8;
  --deck-club-rank-color: #18a64b;
  --deck-club-suit-color: #18a64b;
}

body[data-card-front-skin="dark"],
.deck-preview-card[data-preview-front="dark"] {
  --deck-front-bg: linear-gradient(180deg, #171a21 0%, #050608 100%);
  --deck-front-border: 1px solid rgba(255, 255, 255, 0.2);
  --deck-front-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 11px rgba(0, 0, 0, 0.68);
  --deck-spade-color: #f8fafc;
  --deck-heart-color: #f8fafc;
  --deck-diamond-color: #f8fafc;
  --deck-club-color: #f8fafc;
  --deck-spade-rank-color: #f8fafc;
  --deck-spade-suit-color: #f8fafc;
  --deck-heart-rank-color: #f8fafc;
  --deck-heart-suit-color: #f8fafc;
  --deck-diamond-rank-color: #f8fafc;
  --deck-diamond-suit-color: #f8fafc;
  --deck-club-rank-color: #f8fafc;
  --deck-club-suit-color: #f8fafc;
}

body[data-card-front-skin="simple_color"],
.deck-preview-card[data-preview-front="simple_color"] {
  --deck-front-bg: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  --deck-front-border: 1px solid rgba(17, 24, 39, 0.1);
  --deck-front-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 5px 8px rgba(0, 0, 0, 0.46);
  --deck-spade-color: #111827;
  --deck-heart-color: #dc2626;
  --deck-diamond-color: #2563eb;
  --deck-club-color: #15803d;
  --deck-spade-rank-color: #111827;
  --deck-spade-suit-color: #111827;
  --deck-heart-rank-color: #dc2626;
  --deck-heart-suit-color: #dc2626;
  --deck-diamond-rank-color: #2563eb;
  --deck-diamond-suit-color: #2563eb;
  --deck-club-rank-color: #15803d;
  --deck-club-suit-color: #15803d;
}

body[data-card-front-skin="premium_beige"],
.deck-preview-card[data-preview-front="premium_beige"] {
  --deck-front-bg: radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.55), transparent 34%), linear-gradient(180deg, #fff4cf 0%, #e8cf8f 100%);
  --deck-front-border: 1px solid rgba(128, 84, 24, 0.38);
  --deck-front-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 6px 9px rgba(0, 0, 0, 0.54);
  --deck-spade-color: #161616;
  --deck-heart-color: #b91c1c;
  --deck-diamond-color: #b91c1c;
  --deck-club-color: #161616;
  --deck-spade-rank-color: #161616;
  --deck-spade-suit-color: #161616;
  --deck-heart-rank-color: #b91c1c;
  --deck-heart-suit-color: #b91c1c;
  --deck-diamond-rank-color: #b91c1c;
  --deck-diamond-suit-color: #b91c1c;
  --deck-club-rank-color: #161616;
  --deck-club-suit-color: #161616;
}

body[data-card-front-skin] .card:not(.hidden-card):not(.back):not(.placeholder):not(.empty),
.deck-preview-card[data-preview-front] {
  border: var(--deck-front-border) !important;
  background: var(--deck-front-bg) !important;
  box-shadow: var(--deck-front-shadow) !important;
}

body[data-card-front-skin] .card.spade,
.deck-preview-card[data-preview-front].spade {
  color: var(--deck-spade-suit-color, var(--deck-spade-color)) !important;
}

body[data-card-front-skin] .card.spade .rank,
.deck-preview-card[data-preview-front].spade .rank {
  color: var(--deck-spade-rank-color, var(--deck-spade-color)) !important;
}

body[data-card-front-skin] .card.spade .suit,
.deck-preview-card[data-preview-front].spade .suit {
  color: var(--deck-spade-suit-color, var(--deck-spade-color)) !important;
}

body[data-card-front-skin] .card.heart,
.deck-preview-card[data-preview-front].heart {
  color: var(--deck-heart-suit-color, var(--deck-heart-color)) !important;
}

body[data-card-front-skin] .card.heart .rank,
.deck-preview-card[data-preview-front].heart .rank {
  color: var(--deck-heart-rank-color, var(--deck-heart-color)) !important;
}

body[data-card-front-skin] .card.heart .suit,
.deck-preview-card[data-preview-front].heart .suit {
  color: var(--deck-heart-suit-color, var(--deck-heart-color)) !important;
}

body[data-card-front-skin] .card.diamond,
.deck-preview-card[data-preview-front].diamond {
  color: var(--deck-diamond-suit-color, var(--deck-diamond-color)) !important;
}

body[data-card-front-skin] .card.diamond .rank,
.deck-preview-card[data-preview-front].diamond .rank {
  color: var(--deck-diamond-rank-color, var(--deck-diamond-color)) !important;
}

body[data-card-front-skin] .card.diamond .suit,
.deck-preview-card[data-preview-front].diamond .suit {
  color: var(--deck-diamond-suit-color, var(--deck-diamond-color)) !important;
}

body[data-card-front-skin] .card.club,
.deck-preview-card[data-preview-front].club {
  color: var(--deck-club-suit-color, var(--deck-club-color)) !important;
}

body[data-card-front-skin] .card.club .rank,
.deck-preview-card[data-preview-front].club .rank {
  color: var(--deck-club-rank-color, var(--deck-club-color)) !important;
}

body[data-card-front-skin] .card.club .suit,
.deck-preview-card[data-preview-front].club .suit {
  color: var(--deck-club-suit-color, var(--deck-club-color)) !important;
}

body[data-card-front-skin="dark"] .card:not(.hidden-card):not(.back):not(.placeholder):not(.empty) .rank,
.deck-preview-card[data-preview-front="dark"] .rank {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
}

body[data-card-front-skin="dark"] .card:not(.hidden-card):not(.back):not(.placeholder):not(.empty) .suit,
.deck-preview-card[data-preview-front="dark"] .suit {
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
}

body[data-card-front-skin="dark"] .card.spade:not(.hidden-card):not(.back):not(.placeholder):not(.empty),
.deck-preview-card[data-preview-front="dark"].spade {
  background: linear-gradient(180deg, #17191f 0%, #020203 100%) !important;
}

body[data-card-front-skin="dark"] .card.heart:not(.hidden-card):not(.back):not(.placeholder):not(.empty),
.deck-preview-card[data-preview-front="dark"].heart {
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%) !important;
}

body[data-card-front-skin="dark"] .card.diamond:not(.hidden-card):not(.back):not(.placeholder):not(.empty),
.deck-preview-card[data-preview-front="dark"].diamond {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

body[data-card-front-skin="dark"] .card.club:not(.hidden-card):not(.back):not(.placeholder):not(.empty),
.deck-preview-card[data-preview-front="dark"].club {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
}

body[data-four-color="off"][data-card-front-skin="classic_white"] .card.diamond,
body[data-four-color="off"][data-card-front-skin="classic_white"] .card.diamond .rank,
body[data-four-color="off"][data-card-front-skin="classic_white"] .card.diamond .suit {
  color: #dc2626 !important;
}

body[data-four-color="off"][data-card-front-skin="classic_white"] .card.club,
body[data-four-color="off"][data-card-front-skin="classic_white"] .card.club .rank,
body[data-four-color="off"][data-card-front-skin="classic_white"] .card.club .suit {
  color: #151515 !important;
}

body[data-card-back-skin="blue_classic"],
.deck-preview-card[data-preview-back="blue_classic"] {
  --deck-back-bg: linear-gradient(135deg, #153a7d 0%, #2563eb 52%, #082f68 100%);
  --deck-back-border: #dbeafe;
  --deck-back-pattern: repeating-linear-gradient(45deg, rgba(219, 234, 254, 0.28) 0 3px, transparent 3px 8px);
  --deck-back-fold-bg: repeating-linear-gradient(45deg, rgba(219, 234, 254, 0.28) 0 3px, transparent 3px 8px), linear-gradient(135deg, #153a7d 0%, #2563eb 52%, #082f68 100%);
}

body[data-card-back-skin="red_classic"],
.deck-preview-card[data-preview-back="red_classic"] {
  --deck-back-bg: linear-gradient(135deg, #841716 0%, #d12b26 52%, #70100e 100%);
  --deck-back-border: #f5dfad;
  --deck-back-pattern: repeating-linear-gradient(45deg, rgba(255, 234, 186, 0.28) 0 3px, transparent 3px 8px);
  --deck-back-fold-bg: repeating-linear-gradient(45deg, rgba(255, 234, 186, 0.28) 0 3px, transparent 3px 8px), linear-gradient(135deg, #841716 0%, #d12b26 52%, #70100e 100%);
}

body[data-card-back-skin="black_gray"],
.deck-preview-card[data-preview-back="black_gray"] {
  --deck-back-bg: linear-gradient(135deg, #4b5563 0%, #111827 54%, #030712 100%);
  --deck-back-border: #d1d5db;
  --deck-back-pattern: repeating-linear-gradient(45deg, rgba(229, 231, 235, 0.22) 0 3px, transparent 3px 8px);
  --deck-back-fold-bg: repeating-linear-gradient(45deg, rgba(229, 231, 235, 0.22) 0 3px, transparent 3px 8px), linear-gradient(135deg, #4b5563 0%, #111827 54%, #030712 100%);
}

body[data-card-back-skin="purple"],
.deck-preview-card[data-preview-back="purple"] {
  --deck-back-bg: linear-gradient(135deg, #4c1d95 0%, #7c3aed 52%, #2e1065 100%);
  --deck-back-border: #ddd6fe;
  --deck-back-pattern: repeating-linear-gradient(45deg, rgba(221, 214, 254, 0.25) 0 3px, transparent 3px 8px);
  --deck-back-fold-bg: repeating-linear-gradient(45deg, rgba(221, 214, 254, 0.25) 0 3px, transparent 3px 8px), linear-gradient(135deg, #4c1d95 0%, #7c3aed 52%, #2e1065 100%);
}

body[data-card-back-skin="green"],
.deck-preview-card[data-preview-back="green"] {
  --deck-back-bg: linear-gradient(135deg, #14532d 0%, #15803d 52%, #052e16 100%);
  --deck-back-border: #bbf7d0;
  --deck-back-pattern: repeating-linear-gradient(45deg, rgba(187, 247, 208, 0.24) 0 3px, transparent 3px 8px);
  --deck-back-fold-bg: repeating-linear-gradient(45deg, rgba(187, 247, 208, 0.24) 0 3px, transparent 3px 8px), linear-gradient(135deg, #14532d 0%, #15803d 52%, #052e16 100%);
}

body[data-card-back-skin="back_123game_black_gold"],
.deck-preview-card[data-preview-back="back_123game_black_gold"] {
  --deck-123game-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 28'%3E%3Ctext x='22' y='11' text-anchor='middle' font-family='Arial,sans-serif' font-size='11' font-weight='800' fill='%23f8d26a'%3E123%3C/text%3E%3Ctext x='22' y='24' text-anchor='middle' font-family='Arial,sans-serif' font-size='11' font-weight='800' fill='%23f8d26a'%3EGAME%3C/text%3E%3C/svg%3E");
  --deck-back-bg:
    radial-gradient(circle at 50% 22%, rgba(250, 204, 21, 0.2), transparent 30%),
    linear-gradient(135deg, #2b2110 0%, #050505 54%, #15110a 100%);
  --deck-back-border: #d6a73e;
  --deck-back-pattern:
    repeating-linear-gradient(45deg, rgba(250, 204, 21, 0.14) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(250, 204, 21, 0.22) 35% 37%, transparent 38%);
  --deck-back-fold-bg:
    repeating-linear-gradient(45deg, rgba(250, 204, 21, 0.14) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(250, 204, 21, 0.22) 35% 37%, transparent 38%),
    radial-gradient(circle at 50% 22%, rgba(250, 204, 21, 0.2), transparent 30%),
    linear-gradient(135deg, #2b2110 0%, #050505 54%, #15110a 100%);
}

body[data-card-back-skin] .card.hidden-card,
body[data-card-back-skin] .card.back,
.deck-preview-card[data-preview-back] {
  border: 2px solid var(--deck-back-border) !important;
  background: var(--deck-back-bg) !important;
}

body[data-card-back-skin] .card.hidden-card::before,
body[data-card-back-skin] .card.back::before,
.deck-preview-card[data-preview-back]::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 4px !important;
  background-image: var(--deck-back-pattern) !important;
  background-size: auto !important;
}

body[data-card-back-skin] .holes.is-folded-reveal .card::after {
  border: 2px solid var(--deck-back-border) !important;
  background: var(--deck-back-fold-bg) !important;
}

body[data-card-back-skin="back_123game_black_gold"] .card.hidden-card:not(.deck-preview-card)::after,
body[data-card-back-skin="back_123game_black_gold"] .card.back:not(.deck-preview-card)::after,
.deck-preview-card[data-preview-back="back_123game_black_gold"]::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  transform: translate(-50%, -50%) !important;
  width: 62% !important;
  height: 42% !important;
  max-width: none !important;
  overflow: visible !important;
  background: var(--deck-123game-mark) center / contain no-repeat !important;
  pointer-events: none !important;
}

body[data-card-back-skin="back_123game_black_gold"] .holes.is-folded-reveal .card::after {
  content: "" !important;
  display: block !important;
  overflow: visible !important;
  background:
    var(--deck-123game-mark) center / 62% 42% no-repeat,
    var(--deck-back-fold-bg) !important;
}

body[data-card-back-skin="back_123game_black_gold"] .card.large.hidden-card:not(.deck-preview-card)::after,
body[data-card-back-skin="back_123game_black_gold"] .card.large.back:not(.deck-preview-card)::after {
  width: 60% !important;
  height: 38% !important;
}

.deck-preview-card[data-preview-back="back_123game_black_gold"]::after,
.card-deck-main-preview-card[data-preview-back="back_123game_black_gold"]::after {
  width: 62% !important;
  height: 42% !important;
}

/* User table settings: local-only table skin, watermark, and final-table mood. */
body.holdem-table-active[data-user-table-theme="classic_gold"],
.table-theme-preview[data-preview-table-theme="classic_gold"],
.table-theme-swatch[data-preview-table-theme="classic_gold"] {
  --holdem-theme-accent: #f5c84b;
  --holdem-theme-accent-soft: rgba(245, 200, 75, 0.30);
  --holdem-theme-bg-top: #1a1206;
  --holdem-theme-bg-mid: #332106;
  --holdem-theme-bg-bottom: #080501;
  --holdem-theme-felt-hi: #9a7118;
  --holdem-theme-felt-mid: #4b3308;
  --holdem-theme-felt-low: #1b1204;
  --holdem-theme-rail: #211505;
}

body.holdem-table-active[data-user-table-theme="purple_neon"],
.table-theme-preview[data-preview-table-theme="purple_neon"],
.table-theme-swatch[data-preview-table-theme="purple_neon"] {
  --holdem-theme-accent: #c084fc;
  --holdem-theme-accent-soft: rgba(168, 85, 247, 0.34);
  --holdem-theme-bg-top: #130720;
  --holdem-theme-bg-mid: #2a1048;
  --holdem-theme-bg-bottom: #06020c;
  --holdem-theme-felt-hi: #7c3bb4;
  --holdem-theme-felt-mid: #3d176d;
  --holdem-theme-felt-low: #160724;
  --holdem-theme-rail: #1d0a31;
}

body.holdem-table-active[data-user-table-theme="deep_green"],
.table-theme-preview[data-preview-table-theme="deep_green"],
.table-theme-swatch[data-preview-table-theme="deep_green"] {
  --holdem-theme-accent: #4ade80;
  --holdem-theme-accent-soft: rgba(74, 222, 128, 0.27);
  --holdem-theme-bg-top: #03120b;
  --holdem-theme-bg-mid: #0b2d1b;
  --holdem-theme-bg-bottom: #010704;
  --holdem-theme-felt-hi: #1f7a42;
  --holdem-theme-felt-mid: #0d4d2d;
  --holdem-theme-felt-low: #062113;
  --holdem-theme-rail: #06180f;
}

body.holdem-table-active[data-user-table-theme="red_highroller"],
.table-theme-preview[data-preview-table-theme="red_highroller"],
.table-theme-swatch[data-preview-table-theme="red_highroller"] {
  --holdem-theme-accent: #fb7185;
  --holdem-theme-accent-soft: rgba(248, 113, 113, 0.30);
  --holdem-theme-bg-top: #1c0608;
  --holdem-theme-bg-mid: #3a0c12;
  --holdem-theme-bg-bottom: #080203;
  --holdem-theme-felt-hi: #9d2634;
  --holdem-theme-felt-mid: #5d111e;
  --holdem-theme-felt-low: #24070b;
  --holdem-theme-rail: #26080d;
}

body.holdem-table-active[data-user-table-theme="blue_casino"],
.table-theme-preview[data-preview-table-theme="blue_casino"],
.table-theme-swatch[data-preview-table-theme="blue_casino"] {
  --holdem-theme-accent: #38bdf8;
  --holdem-theme-accent-soft: rgba(56, 189, 248, 0.30);
  --holdem-theme-bg-top: #061426;
  --holdem-theme-bg-mid: #0b2b4d;
  --holdem-theme-bg-bottom: #020715;
  --holdem-theme-felt-hi: #1f6eab;
  --holdem-theme-felt-mid: #123c66;
  --holdem-theme-felt-low: #061426;
  --holdem-theme-rail: #07182c;
}

body.holdem-table-active[data-user-table-theme="dark_matte"],
.table-theme-preview[data-preview-table-theme="dark_matte"],
.table-theme-swatch[data-preview-table-theme="dark_matte"] {
  --holdem-theme-accent: #a3a3a3;
  --holdem-theme-accent-soft: rgba(163, 163, 163, 0.20);
  --holdem-theme-bg-top: #111113;
  --holdem-theme-bg-mid: #202124;
  --holdem-theme-bg-bottom: #050506;
  --holdem-theme-felt-hi: #4b4b4f;
  --holdem-theme-felt-mid: #2d2e31;
  --holdem-theme-felt-low: #141416;
  --holdem-theme-rail: #111113;
}

body.holdem-table-active #felt {
  background:
    radial-gradient(ellipse at 50% 27%, var(--holdem-theme-accent-soft), transparent 48%),
    linear-gradient(180deg, var(--holdem-theme-bg-top) 0%, var(--holdem-theme-bg-mid) 44%, var(--holdem-theme-bg-bottom) 100%) !important;
}

body.holdem-table-active #felt::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 9%, transparent 91%, rgba(0,0,0,0.30)),
    radial-gradient(ellipse at 50% 38%, var(--holdem-theme-felt-hi), var(--holdem-theme-felt-mid) 54%, var(--holdem-theme-felt-low) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 28px rgba(0,0,0,0.56),
    0 0 30px var(--holdem-theme-accent-soft),
    0 18px 38px rgba(0,0,0,0.78) !important;
}

body.holdem-table-active #felt::after {
  border-color: var(--holdem-theme-accent) !important;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255,255,255,0.12), transparent 62%),
    radial-gradient(ellipse at 50% 70%, rgba(0,0,0,0.42), transparent 72%),
    linear-gradient(180deg, var(--holdem-theme-felt-hi) 0%, var(--holdem-theme-felt-mid) 48%, var(--holdem-theme-rail) 100%) !important;
  box-shadow:
    inset 0 0 48px rgba(0,0,0,0.52),
    inset 0 0 0 4px rgba(0,0,0,0.56),
    0 0 0 1px rgba(0,0,0,0.78),
    0 0 22px var(--holdem-theme-accent-soft) !important;
}

body.holdem-table-active[data-table-logo-mode="off"] {
  --table-logo-opacity: 0;
}

body.holdem-table-active[data-table-logo-mode="subtle"] {
  --table-logo-opacity: 0.085;
}

body.holdem-table-active[data-table-logo-mode="normal"] {
  --table-logo-opacity: 0.16;
}

body.holdem-table-active #tableThemeLayer {
  position: absolute !important;
  left: 67px !important;
  right: 67px !important;
  top: 126px !important;
  bottom: 86px !important;
  z-index: 2 !important;
  overflow: hidden !important;
  border-radius: 47% / 42% !important;
  pointer-events: none !important;
}

.table-theme-watermark {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  opacity: var(--table-logo-opacity, 0.085);
  color: rgba(255, 244, 201, 0.95);
  font-size: 33px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 0 20px currentColor,
    0 3px 10px rgba(0, 0, 0, 0.68);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.table-theme-watermark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 64px;
  height: 20px;
  transform: translateX(-50%);
  opacity: 0.52;
  background:
    radial-gradient(circle at 50% 100%, currentColor 0 4px, transparent 5px),
    linear-gradient(135deg, transparent 43%, currentColor 44% 48%, transparent 49% 100%),
    linear-gradient(45deg, transparent 43%, currentColor 44% 48%, transparent 49% 100%);
  background-repeat: no-repeat;
}

body.holdem-table-active.holdem-final-table-bg[data-final-table-theme-auto="1"] {
  background:
    radial-gradient(ellipse 78% 36% at 50% 2%, rgba(255, 216, 112, 0.16), transparent 44%),
    radial-gradient(ellipse 115% 70% at 50% 46%, rgba(168, 85, 247, 0.20), transparent 64%),
    radial-gradient(ellipse at 50% 22%, var(--holdem-theme-accent-soft), transparent 48%),
    linear-gradient(180deg, var(--holdem-theme-bg-top), var(--holdem-theme-bg-bottom)) !important;
}

body.holdem-table-active.holdem-final-table-bg[data-final-table-theme-auto="1"] #app {
  background:
    radial-gradient(ellipse 88% 42% at 50% 10%, rgba(255, 221, 130, 0.12), transparent 42%),
    linear-gradient(90deg, rgba(0,0,0,0.36), transparent 14%, transparent 86%, rgba(0,0,0,0.36)),
    transparent !important;
}

body.holdem-table-active.holdem-final-table-bg[data-final-table-theme-auto="1"] #felt {
  background:
    radial-gradient(ellipse at 50% 27%, rgba(255, 219, 116, 0.14), transparent 48%),
    radial-gradient(ellipse at 50% 54%, rgba(168, 85, 247, 0.18), transparent 62%),
    linear-gradient(180deg, var(--holdem-theme-bg-top) 0%, var(--holdem-theme-bg-mid) 46%, var(--holdem-theme-bg-bottom) 100%) !important;
}

body.holdem-table-active.holdem-final-table-bg[data-final-table-theme-auto="1"] #felt::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 9%, transparent 91%, rgba(0,0,0,0.30)),
    radial-gradient(ellipse at 50% 38%, var(--holdem-theme-felt-hi), var(--holdem-theme-felt-mid) 54%, var(--holdem-theme-felt-low) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 0 58px rgba(0,0,0,0.58),
    0 0 34px rgba(216,159,55,0.16),
    0 18px 38px rgba(0,0,0,0.78) !important;
}

body.holdem-table-active.holdem-final-table-bg[data-final-table-theme-auto="1"] #felt::after {
  border-color: var(--holdem-theme-accent) !important;
  box-shadow:
    inset 0 0 48px rgba(0,0,0,0.52),
    inset 0 0 0 4px rgba(0,0,0,0.56),
    0 0 0 1px rgba(0,0,0,0.78),
    0 0 28px rgba(223,166,62,0.18) !important;
}

body.holdem-table-active .gg-topbar-actions .table-settings-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  color: #fde68a !important;
  border-color: rgba(250, 204, 21, 0.54) !important;
  background: linear-gradient(180deg, rgba(45, 35, 22, 0.98), rgba(10, 10, 9, 0.98)) !important;
}

body.holdem-table-active .gg-topbar-actions .table-settings-menu-btn::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(0, 0, 0, 0.2) !important;
  opacity: 0.95 !important;
}

.table-settings-modal {
  z-index: 2460;
  align-items: center;
  justify-content: center;
  padding: 14px;
  padding-bottom: max(14px, calc(var(--holdem-safe-area-bottom) + 12px));
}

.table-settings-card {
  width: min(430px, calc(100vw - 22px));
  max-height: min(780px, calc(100dvh - 28px));
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(250, 204, 21, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(32, 32, 31, 0.98), rgba(8, 10, 12, 0.98));
  border-color: rgba(250, 204, 21, 0.34);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 70px rgba(0, 0, 0, 0.78);
}

.table-settings-head {
  position: relative;
  min-height: 58px;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 58px;
}

.table-settings-head strong {
  color: #fde68a;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
}

.table-settings-head button {
  position: absolute;
  right: 14px;
  top: 11px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  color: #d1d5db;
  font-size: 28px;
  line-height: 30px;
}

.table-settings-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px 12px;
}

.table-theme-preview-panel,
.table-theme-option-block,
.table-theme-toggle-row {
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 19, 20, 0.92), rgba(8, 9, 10, 0.92));
}

.table-theme-preview-panel,
.table-theme-option-block {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.table-theme-preview-panel > strong,
.table-theme-option-block > strong {
  color: #f8d98a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.table-theme-preview {
  height: 122px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 34%, var(--holdem-theme-accent-soft), transparent 58%),
    linear-gradient(180deg, var(--holdem-theme-bg-top), var(--holdem-theme-bg-bottom));
  box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.72);
}

.table-theme-preview-table,
.table-theme-swatch-table {
  position: absolute;
  border-radius: 48% / 42%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255,255,255,0.12), transparent 62%),
    linear-gradient(180deg, var(--holdem-theme-felt-hi), var(--holdem-theme-felt-mid) 50%, var(--holdem-theme-rail));
  border: 2px solid var(--holdem-theme-accent);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.54),
    inset 0 0 0 4px rgba(0,0,0,0.38),
    0 0 22px var(--holdem-theme-accent-soft);
}

.table-theme-preview-table {
  left: 22px;
  right: 22px;
  top: 18px;
  bottom: 18px;
}

.table-theme-preview-watermark,
.table-theme-swatch-logo {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  color: rgba(255, 244, 201, 0.95);
  font-weight: 950;
  letter-spacing: 0;
  pointer-events: none;
}

.table-theme-preview-watermark {
  opacity: 0.085;
  font-size: 22px;
}

.table-theme-preview[data-preview-logo-mode="off"] .table-theme-preview-watermark {
  opacity: 0;
}

.table-theme-preview[data-preview-logo-mode="subtle"] .table-theme-preview-watermark {
  opacity: 0.085;
}

.table-theme-preview[data-preview-logo-mode="normal"] .table-theme-preview-watermark {
  opacity: 0.18;
}

.table-theme-skin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.table-theme-skin-option,
.table-logo-mode-option {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: #e5e7eb;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.table-theme-skin-option {
  min-height: 94px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 7px 5px 6px;
}

.table-theme-skin-option.is-selected,
.table-logo-mode-option.is-selected {
  border-color: rgba(250, 204, 21, 0.92);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.46),
    0 0 18px rgba(250, 204, 21, 0.2);
}

.table-theme-check {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  color: #111827;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.is-selected > .table-theme-check {
  display: inline-flex;
}

.table-theme-swatch {
  position: relative;
  width: 74px;
  height: 42px;
  overflow: hidden;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 34%, var(--holdem-theme-accent-soft), transparent 58%),
    linear-gradient(180deg, var(--holdem-theme-bg-top), var(--holdem-theme-bg-bottom));
}

.table-theme-swatch-table {
  left: 5px;
  right: 5px;
  top: 7px;
  bottom: 7px;
  border-width: 1px;
}

.table-theme-swatch-logo {
  opacity: 0.13;
  font-size: 8px;
}

.table-theme-skin-label {
  max-width: 100%;
  color: #d6d3d1;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}

.table-logo-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.table-logo-mode-option {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 8px;
  text-align: left;
}

.table-logo-mode-option strong {
  color: #f8d98a;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}

.table-logo-mode-option span:not(.table-theme-check) {
  color: #a8a29e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.table-theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px;
}

.table-theme-toggle-row span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.table-theme-toggle-row strong {
  color: #f8d98a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.table-theme-toggle-row em {
  color: #a8a29e;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.table-theme-toggle-row input {
  width: 48px;
  height: 28px;
  flex: 0 0 auto;
  accent-color: #fbbf24;
}

.table-settings-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.32fr;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.table-settings-actions button {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  background: linear-gradient(180deg, rgba(25, 25, 24, 0.98), rgba(7, 8, 10, 0.98));
  color: #e7e5e4;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

#tableSettingsApply {
  border-color: rgba(250, 204, 21, 0.78);
  background: linear-gradient(180deg, #f8c650, #d99013);
  color: #fff7ed;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
}

@media (max-width: 430px) {
  .table-settings-modal {
    align-items: flex-end;
    padding: 10px;
    padding-bottom: max(10px, calc(var(--holdem-safe-area-bottom) + 8px));
  }

  .table-settings-card {
    width: 100%;
    max-height: min(730px, calc(100dvh - 20px));
    border-radius: 16px 16px 12px 12px;
  }

  .table-settings-head {
    min-height: 54px;
  }

  .table-settings-body {
    gap: 10px;
    padding: 12px 10px 10px;
  }

  .table-theme-preview {
    height: 118px;
  }

  .table-theme-skin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .table-logo-mode-grid {
    grid-template-columns: 1fr;
  }

  .table-logo-mode-option {
    min-height: 54px;
    padding-left: 34px;
  }
}

/* Cash ring-game lobby/table */
.mode-switch {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: min(420px, calc(100% - 24px));
  margin: 10px auto 0;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #111a2b 0%, #050b15 100%);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.75);
}

.mode-switch::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(244, 191, 50, 0.08), rgba(34, 211, 238, 0.08));
  pointer-events: none;
}

.mode-switch.hidden {
  display: none;
}

.mode-switch-btn {
  position: relative;
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(31, 41, 58, 0.96), rgba(9, 16, 28, 0.96));
  color: #aeb9cc;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.mode-switch-btn::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  border-radius: 50%;
  font-size: 11px;
  vertical-align: 1px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.mode-switch-btn[data-mode="tournament"]::before {
  content: "♠";
  color: #ffe680;
}

.mode-switch-btn[data-mode="cash"]::before {
  content: "P";
  color: #7dd3fc;
}

.mode-switch-btn:active {
  transform: translateY(1px);
}

.mode-switch-btn.is-active {
  border-color: rgba(244, 191, 50, 0.78);
  background:
    linear-gradient(180deg, #fff6c7 0%, #d9a51f 52%, #8f6410 100%);
  color: #101827;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
  box-shadow:
    0 8px 18px rgba(244, 191, 50, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(82, 55, 5, 0.34);
}

.mode-switch-btn.is-disabled {
  color: rgba(174, 185, 204, 0.66);
}

.mode-switch-btn.is-disabled::after {
  content: "준비중";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(244, 191, 50, 0.15);
  border: 1px solid rgba(244, 191, 50, 0.28);
  color: #ffe680;
  font-size: 10px;
  font-weight: 950;
}

.cash-beta-badge {
  background: #0f766e;
  color: #ecfeff;
}

#cashLobby {
  min-height: calc(100dvh - 104px);
  padding: 16px 14px max(18px, calc(var(--holdem-safe-area-bottom) + 16px));
  background: linear-gradient(180deg, rgba(6, 12, 18, 0.98), rgba(9, 16, 24, 0.98));
  color: #e5edf5;
}

.cash-lobby-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto 14px;
}

.cash-lobby-kicker {
  display: block;
  margin-bottom: 3px;
  color: #5eead4;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cash-lobby-head h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}

.cash-refresh-btn {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(94, 234, 212, 0.35);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.86);
  color: #ccfbf1;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.cash-lobby-toolbar {
  display: flex;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cash-stake-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.78);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.cash-stake-chip.is-active {
  border-color: rgba(94, 234, 212, 0.72);
  background: #0f766e;
  color: #f0fdfa;
}

.cash-table-list {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
}

.cash-table-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 128px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(12, 30, 37, 0.98));
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
}

.cash-table-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 4px solid #14b8a6;
  pointer-events: none;
}

.cash-table-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.18);
  color: #99f6e4;
  font-size: 11px;
  font-weight: 950;
}

.cash-table-main {
  display: grid;
  gap: 3px;
  padding-right: 72px;
}

.cash-table-main strong {
  color: #f8fafc;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.cash-table-main small {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 750;
}

.cash-table-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cash-table-grid span {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: rgba(2, 6, 23, 0.34);
}

.cash-table-grid em {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.cash-table-grid b {
  display: block;
  overflow: hidden;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cash-seat-meter {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(100, 116, 139, 0.26);
}

.cash-seat-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #f59e0b);
}

.cash-table-card.is-skeleton {
  cursor: default;
}

.cash-skel-line,
.cash-skel-row span {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.7), rgba(100, 116, 139, 0.55), rgba(51, 65, 85, 0.7));
  background-size: 220% 100%;
  animation: shimmer 1.2s linear infinite;
}

.cash-skel-line.is-title {
  width: 52%;
  height: 20px;
}

.cash-skel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@keyframes shimmer {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

.cash-empty {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 28px 12px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  color: #94a3b8;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

#cashTableView {
  min-height: 100dvh;
  padding: 0 0 max(14px, var(--holdem-safe-area-bottom));
  overflow: hidden;
  background:
    linear-gradient(180deg, #05080d, #0c151c 54%, #070b10);
  color: #e5edf5;
}

.cash-table-topbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: max(8px, var(--holdem-safe-area-top)) 12px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(5, 8, 13, 0.92);
}

.cash-table-back {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.82);
  color: #e2e8f0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.cash-table-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.cash-table-meta strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cash-table-meta span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.cash-table-actions-top {
  display: flex;
  gap: 6px;
}

.cash-table-actions-top button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(94, 234, 212, 0.34);
  border-radius: 7px;
  background: rgba(15, 118, 110, 0.52);
  color: #ecfeff;
  font-size: 12px;
  font-weight: 950;
}

.cash-table-actions-top button#cashLeaveBtn {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.58);
  color: #fee2e2;
}

.cash-felt {
  position: relative;
  width: min(100vw, 920px);
  height: min(calc(100dvh - 168px), 660px);
  min-height: 500px;
  margin: 0 auto;
}

.cash-felt::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 720px);
  height: min(58vw, 440px);
  min-width: 350px;
  min-height: 248px;
  border: 15px solid #121820;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(8, 111, 98, 0.95), rgba(10, 70, 76, 0.95));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 28px 56px rgba(255, 255, 255, 0.06),
    0 28px 70px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%);
}

.cash-board {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  display: flex;
  gap: 8px;
  transform: translate(-50%, -50%);
}

.cash-pot {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 2;
  display: grid;
  min-width: 108px;
  justify-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(253, 230, 138, 0.32);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  transform: translate(-50%, -50%);
}

.cash-pot span {
  color: #fcd34d;
  font-size: 10px;
  font-weight: 950;
}

.cash-pot strong {
  color: #f8fafc;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
}

.cash-card-wrap .card,
.cash-card {
  width: clamp(34px, 8.5vw, 54px);
  height: clamp(48px, 12vw, 76px);
  border-radius: 6px;
}

.cash-card-wrap .card {
  display: block;
}

.cash-card.is-empty {
  border: 1px solid rgba(226, 232, 240, 0.14);
  background: rgba(15, 23, 42, 0.30);
}

.cash-card.is-back {
  border: 1px solid rgba(94, 234, 212, 0.18);
  background:
    repeating-linear-gradient(45deg, rgba(20, 184, 166, 0.22) 0 5px, rgba(15, 23, 42, 0.8) 5px 10px),
    #0f172a;
}

.cash-seat {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  width: clamp(126px, 26vw, 176px);
  min-height: 74px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(13, 20, 28, 0.92);
  color: #e2e8f0;
  text-align: left;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.cash-seat.is-empty {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 58px;
  border-style: dashed;
  background: rgba(15, 23, 42, 0.56);
  color: #94a3b8;
  text-align: center;
}

.cash-seat-join {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
}

.cash-seat-plus {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.18);
  color: #99f6e4;
  font-size: 20px;
  line-height: 1;
}

.cash-avatar {
  grid-row: 1 / 3;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #334155, #0f172a);
  color: #f8fafc;
  font-size: 16px;
  font-weight: 950;
}

.cash-seat-info {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.cash-seat-info strong,
.cash-seat-info em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cash-seat-info strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
}

.cash-seat-info em {
  color: #cbd5e1;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.cash-seat-state {
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.cash-hole-cards {
  position: absolute;
  left: 50%;
  bottom: -28px;
  display: flex;
  gap: 3px;
  transform: translateX(-50%);
}

.cash-seat .cash-hole-cards .cash-card-wrap .card,
.cash-seat .cash-hole-cards .cash-card {
  width: 30px;
  height: 42px;
  border-radius: 4px;
}

.cash-seat-bet {
  position: absolute;
  left: 50%;
  top: -24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f59e0b;
  color: #111827;
  font-size: 11px;
  font-weight: 950;
  transform: translateX(-50%);
}

.cash-seat.is-hero {
  border-color: rgba(94, 234, 212, 0.84);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18);
}

.cash-seat.is-to-act {
  border-color: rgba(250, 204, 21, 0.9);
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.16), 0 0 18px rgba(250, 204, 21, 0.18);
}

.cash-seat.is-folded {
  opacity: 0.58;
}

.cash-seat.is-leaving .cash-seat-state {
  color: #fca5a5;
}

.cash-dealer-btn {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid #111827;
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  transform: translate(-50%, -50%);
}

.cash-action-panel {
  position: fixed;
  left: 50%;
  bottom: max(12px, calc(var(--holdem-safe-area-bottom) + 10px));
  z-index: 9;
  display: grid;
  width: min(560px, calc(100vw - 20px));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%);
}

.cash-action-hint {
  color: #99f6e4;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.cash-bet-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  gap: 10px;
}

.cash-bet-slider output {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 950;
  text-align: right;
}

.cash-action-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.cash-action-buttons button {
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
}

.cash-action-buttons button:disabled,
.cash-table-actions-top button.hidden {
  opacity: 0.46;
}

.cash-fold {
  background: #991b1b;
}

.cash-call {
  background: #1d4ed8;
}

.cash-raise {
  background: #0f766e;
}

.cash-allin {
  background: #a16207;
}

.cash-buyin-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 18px;
}

.cash-buyin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.64);
}

.cash-buyin-card {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 10px;
  background: #0b1118;
  color: #e2e8f0;
}

.cash-buyin-head,
.cash-buyin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.cash-buyin-head strong {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 950;
}

#cashBuyInClose {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  font-size: 22px;
}

.cash-buyin-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.cash-buyin-table {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 850;
}

.cash-buyin-range {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

#cashBuyInAmountOut {
  color: #f8fafc;
  font-size: 22px;
  font-weight: 950;
  text-align: center;
}

.cash-buyin-check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 850;
}

.cash-buyin-check input {
  width: 20px;
  height: 20px;
  accent-color: #14b8a6;
}

.cash-buyin-actions {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  border-bottom: 0;
}

.cash-buyin-actions button {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 950;
}

#cashBuyInConfirm {
  border-color: rgba(94, 234, 212, 0.55);
  background: #0f766e;
  color: #ecfeff;
}

/* ── 유저 방 만들기 / 비밀번호 방 ─────────────────────────────────────── */

.cash-lobby-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cash-create-btn {
  border-color: rgba(94, 234, 212, 0.55);
  background: #0f766e;
  color: #ecfeff;
}

.cash-lock {
  margin-right: 6px;
  font-size: 13px;
}

.cash-create-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.cash-create-field > span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
}

.cash-create-field input[type="text"],
.cash-create-field input[type="password"] {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(94, 234, 212, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  font-size: 14px;
}

.cash-create-stakes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cash-create-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.cash-create-stake,
.cash-create-size {
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.88);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.cash-create-stake.is-active,
.cash-create-size.is-active {
  border-color: rgba(94, 234, 212, 0.6);
  background: #0f766e;
  color: #ecfeff;
}

.cash-create-info {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

#cashCreateConfirm {
  border-color: rgba(94, 234, 212, 0.55);
  background: #0f766e;
  color: #ecfeff;
}

@media (max-width: 620px) {
  .cash-felt {
    height: calc(100dvh - 164px);
    min-height: 500px;
  }

  .cash-felt::before {
    width: 92vw;
    height: 62vw;
  }

  .cash-seat {
    width: 116px;
    min-height: 68px;
    column-gap: 6px;
    padding: 7px;
  }

  .cash-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .cash-seat-info strong {
    font-size: 12px;
  }

  .cash-seat-info em {
    font-size: 11px;
  }

  .cash-board {
    gap: 5px;
  }

  .cash-table-topbar {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .cash-table-actions-top {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .cash-action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cash table visual pass: reuse the tournament table language while preserving
   the fixed horizontal ring-game seat map. */
body.holdem-cash-table-active {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(29, 78, 216, 0.16), transparent 52%),
    linear-gradient(180deg, #090f1d 0%, #070b13 52%, #02040a 100%);
}

body.holdem-cash-table-active .cash-table-topbar {
  border-bottom-color: rgba(59, 130, 246, 0.22);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.94));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

body.holdem-cash-table-active .cash-felt {
  --cash-card-w: clamp(34px, 8.2vw, 54px);
  --cash-card-h: calc(var(--cash-card-w) * 1.42);
  position: relative;
  width: min(100vw, 920px);
  height: min(calc(100dvh - 150px), 690px);
  min-height: 510px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(20, 184, 166, 0.20), transparent 56%),
    linear-gradient(180deg, rgba(5, 9, 18, 0.86), rgba(2, 5, 10, 0.98));
}

body.holdem-cash-table-active .cash-felt::before {
  top: 52%;
  width: min(92vw, 780px);
  height: clamp(284px, 54vw, 430px);
  min-width: 350px;
  min-height: 252px;
  border: clamp(12px, 2.4vw, 18px) solid rgba(15, 23, 42, 0.92);
  background:
    radial-gradient(ellipse at 50% 31%, rgba(69, 211, 184, 0.34), transparent 46%),
    linear-gradient(180deg, rgba(12, 148, 126, 0.94), rgba(5, 86, 92, 0.96) 56%, rgba(4, 52, 62, 0.98));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 32px 64px rgba(255, 255, 255, 0.06),
    inset 0 -46px 72px rgba(0, 0, 0, 0.28),
    0 30px 70px rgba(0, 0, 0, 0.56);
}

body.holdem-cash-table-active .cash-felt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 1;
  width: min(94vw, 812px);
  height: clamp(308px, 58vw, 464px);
  min-width: 374px;
  min-height: 276px;
  border: 2px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.42);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body.holdem-cash-table-active .cash-board {
  top: 40.5%;
  z-index: 12;
  gap: clamp(5px, 1.3vw, 8px);
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.58));
}

body.holdem-cash-table-active .cash-board .card,
body.holdem-cash-table-active .cash-card.card {
  width: var(--cash-card-w);
  height: var(--cash-card-h);
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 6px 10px rgba(0, 0, 0, 0.48);
}

body.holdem-cash-table-active .cash-board .card .rank,
body.holdem-cash-table-active .cash-card.card .rank {
  font-size: calc(var(--cash-card-w) * 0.43);
  line-height: 0.95;
}

body.holdem-cash-table-active .cash-board .card .suit,
body.holdem-cash-table-active .cash-card.card .suit {
  font-size: calc(var(--cash-card-w) * 0.49);
  line-height: 0.95;
}

body.holdem-cash-table-active .cash-card.card.placeholder {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 9%, transparent 9%),
    linear-gradient(180deg, rgba(54, 75, 87, 0.64), rgba(21, 35, 48, 0.78));
  opacity: 0.74;
}

body.holdem-cash-table-active .cash-card.card.hidden-card {
  border: 2px solid #4fd1c5;
  background:
    repeating-linear-gradient(45deg, rgba(20, 184, 166, 0.28) 0 4px, rgba(15, 23, 42, 0.72) 4px 8px),
    linear-gradient(135deg, #0f1f34, #062f39);
}

body.holdem-cash-table-active .cash-pot {
  top: 56%;
  z-index: 16;
  min-width: 134px;
  padding: 7px 20px 9px;
  border-color: rgba(251, 191, 36, 0.24);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(3, 7, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.42);
}

body.holdem-cash-table-active .cash-pot strong {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #ffe45e;
  font-size: 24px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.78);
}

body.holdem-cash-table-active .cash-pot strong::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #8edbff 0 18%, #1689ff 35%, #074096 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

body.holdem-cash-table-active .cash-seats,
body.holdem-cash-table-active #cashSeats {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
}

body.holdem-cash-table-active .cash-seat {
  pointer-events: auto;
}

body.holdem-cash-table-active .cash-seat:not(.is-empty) {
  display: block;
  width: 92px;
  min-height: 116px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f8fafc;
  cursor: default;
}

body.holdem-cash-table-active .cash-mobile-seat-card {
  position: relative;
  display: grid;
  justify-items: center;
  width: 92px;
  min-height: 116px;
}

body.holdem-cash-table-active .cash-seat .avatar-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

body.holdem-cash-table-active .cash-seat .avatar,
body.holdem-cash-table-active .cash-seat .lavatar {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(9, 12, 18, 0.96);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(145deg, #475569 0%, #172554 100%) !important;
  color: #f8fafc !important;
  font-size: 23px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.62);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.78);
}

body.holdem-cash-table-active .cash-seat .avatar img,
body.holdem-cash-table-active .cash-seat .lavatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.holdem-cash-table-active .cash-seat.is-to-act .avatar,
body.holdem-cash-table-active .cash-seat.is-to-act .lavatar {
  border-color: #fff05b;
  box-shadow:
    0 0 0 4px rgba(250, 204, 21, 0.24),
    0 0 24px rgba(250, 204, 21, 0.74),
    0 8px 18px rgba(0, 0, 0, 0.68);
}

body.holdem-cash-table-active .cash-seat .timer-ring {
  position: absolute;
  inset: -3px;
  width: 60px;
  height: 60px;
  z-index: 2;
  pointer-events: none;
}

body.holdem-cash-table-active .cash-seat .timer-ring-circle {
  stroke: #22d3ee;
  stroke-width: 4;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.7));
}

body.holdem-cash-table-active .cash-seat .name-pill {
  position: relative;
  width: 82px;
  min-height: 52px;
  margin: -2px auto 0;
  padding: 13px 5px 6px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(11, 17, 27, 0.96), rgba(2, 6, 14, 0.94));
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.58);
}

body.holdem-cash-table-active .cash-seat .name-pill::before {
  content: "RING";
  position: absolute;
  left: 50%;
  top: -10px;
  min-width: 42px;
  padding: 1px 7px 2px;
  border-radius: 4px;
  background: linear-gradient(180deg, #14b8a6, #0f766e);
  color: #ecfeff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.42);
}

body.holdem-cash-table-active .cash-seat .name-pill::before {
  display: none !important;
  content: none !important;
}

body.holdem-cash-table-active .cash-seat .name,
body.holdem-cash-table-active .cash-seat .chips {
  overflow: hidden;
  width: 100%;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.holdem-cash-table-active .cash-seat .name {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

body.holdem-cash-table-active .cash-seat .chips {
  margin-top: 2px;
  color: #fef3c7;
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

body.holdem-cash-table-active .cash-seat .chips.stack-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

body.holdem-cash-table-active .cash-seat .holes {
  position: absolute;
  display: flex;
  gap: 4px;
  z-index: 6;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.66));
}

body.holdem-cash-table-active .cash-seat .holes .card {
  width: 30px;
  height: 42px;
  border-radius: 5px;
}

body.holdem-cash-table-active .cash-seat .holes .card .rank {
  font-size: 13px;
}

body.holdem-cash-table-active .cash-seat .holes .card .suit {
  font-size: 15px;
}

body.holdem-cash-table-active .cash-seat.seat-top .holes,
body.holdem-cash-table-active .cash-seat.seat-mid .holes {
  left: 50%;
  top: -42px;
  transform: translateX(-50%);
}

body.holdem-cash-table-active .cash-seat.seat-left .holes {
  left: 50%;
  top: -38px;
  transform: translateX(-28%);
}

body.holdem-cash-table-active .cash-seat.seat-right .holes {
  right: 50%;
  top: -38px;
  left: auto;
  transform: translateX(28%);
}

body.holdem-cash-table-active .cash-seat .action-badge {
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: 8;
  min-width: 50px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #07110d;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
}

body.holdem-cash-table-active .cash-seat .toact-badge {
  background: linear-gradient(180deg, #34d399, #059669);
}

body.holdem-cash-table-active .cash-seat .toact-badge.is-warn {
  border-color: rgba(254, 240, 138, 0.88);
  background: linear-gradient(180deg, #facc15, #b45309);
  color: #fffbe6;
}

body.holdem-cash-table-active .cash-seat .toact-badge.is-danger {
  border-color: rgba(254, 202, 202, 0.92);
  background: linear-gradient(180deg, #f87171, #991b1b);
  color: #fff1f2;
  box-shadow: 0 0 13px rgba(248, 113, 113, 0.64), 0 4px 10px rgba(0, 0, 0, 0.55);
}

body.holdem-cash-table-active .cash-seat .toact-badge .toact-sec {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 1000;
}

body.holdem-cash-table-active .cash-seat .action-result-check {
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #f0fff4;
}

body.holdem-cash-table-active .cash-seat .action-result-call {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  color: #eff6ff;
}

body.holdem-cash-table-active .cash-seat .action-result-raise {
  background: linear-gradient(180deg, #facc15, #b45309);
  color: #fffbe6;
}

body.holdem-cash-table-active .cash-seat .action-result-bet {
  background: linear-gradient(180deg, #fb923c, #c2410c);
  color: #fff7ed;
}

body.holdem-cash-table-active .cash-seat .action-result-fold {
  background: linear-gradient(180deg, #f3f4f6, #9ca3af);
}

body.holdem-cash-table-active .cash-seat .action-result-allin {
  background: linear-gradient(180deg, #fde047, #d97706);
}

body.holdem-cash-table-active .cash-seat .wait-badge {
  background: linear-gradient(180deg, #94a3b8, #475569);
  color: #fff;
}

body.holdem-cash-table-active .cash-seat .role-badge {
  display: grid !important;
  width: var(--cash-layout-role-badge-size, 24px) !important;
  min-width: var(--cash-layout-role-badge-size, 24px) !important;
  height: var(--cash-layout-role-badge-size, 24px) !important;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fef08a, #f59e0b 72%, #92400e);
  color: #7c2d12;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.58);
}

body.holdem-cash-table-active .cash-seat .seat-role-stack {
  position: absolute;
  z-index: 9;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

body.holdem-cash-table-active .cash-seat.is-folded {
  opacity: 0.62;
  filter: saturate(0.72) brightness(0.88);
}

body.holdem-cash-table-active .cash-seat.is-empty {
  display: grid;
  width: clamp(104px, 24vw, 146px);
  min-height: 64px;
  padding: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(10, 17, 31, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.holdem-cash-table-active .cash-seat.is-empty:active {
  transform: translate(-50%, -50%) scale(0.98);
}

body.holdem-cash-table-active .cash-seat-plus {
  background: rgba(20, 184, 166, 0.22);
  color: #99f6e4;
}

body.holdem-cash-table-active .cash-dealer-btn {
  z-index: 28;
  border-color: #020617;
  background: #f8fafc;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  transition:
    left 560ms cubic-bezier(0.5, 0, 0.2, 1),
    top 560ms cubic-bezier(0.5, 0, 0.2, 1);
}

body.holdem-cash-table-active #cashBetChipLayer,
body.holdem-cash-table-active .cash-bet-chip-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}

body.holdem-cash-table-active #cashBetChipLayer .table-bet-chip {
  position: absolute;
  display: inline-grid;
  min-width: 42px;
  justify-items: center;
  gap: 1px;
  color: #f8fafc;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
  transform: translate(-50%, -50%);
}

body.holdem-cash-table-active #cashBetChipLayer .bet-chip-stack {
  position: relative;
  display: block;
  width: 35px;
  height: 28px;
}

body.holdem-cash-table-active #cashBetChipLayer .table-bet-chip strong {
  display: inline-flex;
  min-width: 34px;
  min-height: 16px;
  align-items: center;
  justify-content: center;
  padding: 2px 6px 3px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(21, 24, 29, 0.94), rgba(5, 7, 10, 0.96));
  color: var(--bet-chip-label, #f3ecdf);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.holdem-cash-table-active #cashBetChipLayer .bet-chip-unit {
  --chip-face: #f8fafc;
  --chip-rim: #cbd5e1;
  --chip-stripe: #ef4444;
  --chip-core: #ffffff;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--chip-core) 0 21%, transparent 22%),
    conic-gradient(from 12deg,
      var(--chip-stripe) 0deg 18deg,
      var(--chip-face) 18deg 47deg,
      var(--chip-stripe) 47deg 65deg,
      var(--chip-face) 65deg 112deg,
      var(--chip-stripe) 112deg 130deg,
      var(--chip-face) 130deg 177deg,
      var(--chip-stripe) 177deg 195deg,
      var(--chip-face) 195deg 242deg,
      var(--chip-stripe) 242deg 260deg,
      var(--chip-face) 260deg 307deg,
      var(--chip-stripe) 307deg 325deg,
      var(--chip-face) 325deg 360deg),
    radial-gradient(circle at 50% 50%, var(--chip-face) 0 58%, var(--chip-rim) 59% 100%);
  transform: translateX(-50%);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.48),
    0 5px 8px rgba(0, 0, 0, 0.58),
    inset 0 1px 1px rgba(255, 255, 255, 0.62),
    inset 0 -2px 3px rgba(0, 0, 0, 0.24);
}

body.holdem-cash-table-active #cashBetChipLayer .bet-chip-unit::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid var(--chip-stripe);
  border-radius: 50%;
}

body.holdem-cash-table-active #cashBetChipLayer .bet-chip-unit:nth-child(1) {
  z-index: 4;
}

body.holdem-cash-table-active #cashBetChipLayer .bet-chip-unit:nth-child(2) {
  bottom: 4px;
  left: calc(50% - 5px);
  z-index: 3;
}

body.holdem-cash-table-active #cashBetChipLayer .bet-chip-unit:nth-child(3) {
  bottom: 8px;
  left: calc(50% + 4px);
  z-index: 2;
}

body.holdem-cash-table-active #cashBetChipLayer .bet-chip-unit:nth-child(4) {
  bottom: 12px;
  left: calc(50% - 1px);
  z-index: 1;
}

body.holdem-cash-table-active #cashBetChipLayer .central-bet-pool {
  z-index: 53;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.62));
}

body.holdem-cash-table-active #cashBetChipLayer .central-bet-pool.center-chip-pile {
  min-width: 70px;
}

body.holdem-cash-table-active #cashBetChipLayer .central-bet-pool.center-chip-pile .bet-chip-stack {
  width: 56px;
  height: 25px;
}

body.holdem-cash-table-active #cashBetChipLayer .central-bet-pool.center-chip-pile .bet-chip-unit {
  width: 20px;
  height: 20px;
}

body.holdem-cash-table-active #cashBetChipLayer .central-bet-pool.center-chip-pile strong {
  margin-top: 0;
  min-width: 42px;
  min-height: 16px;
  padding: 2px 7px 3px;
  font-size: 11px;
}

body.holdem-cash-table-active #cashBetChipLayer .central-bet-pool strong {
  color: #ffe553;
  border-color: rgba(251, 191, 36, 0.24);
}

body.holdem-cash-table-active #cashBetChipLayer .chip-tier-white {
  --chip-face: #f8fafc;
  --chip-rim: #cbd5e1;
  --chip-stripe: #e11d48;
  --chip-core: #ffffff;
  --bet-chip-label: #f8fafc;
}

body.holdem-cash-table-active #cashBetChipLayer .chip-tier-blue {
  --chip-face: #2563eb;
  --chip-rim: #1e3a8a;
  --chip-stripe: #dbeafe;
  --chip-core: #eff6ff;
  --bet-chip-label: #93c5fd;
}

body.holdem-cash-table-active #cashBetChipLayer .chip-tier-green {
  --chip-face: #16a34a;
  --chip-rim: #14532d;
  --chip-stripe: #dcfce7;
  --chip-core: #f0fdf4;
  --bet-chip-label: #86efac;
}

body.holdem-cash-table-active #cashBetChipLayer .chip-tier-red {
  --chip-face: #dc2626;
  --chip-rim: #7f1d1d;
  --chip-stripe: #fee2e2;
  --chip-core: #fff1f2;
  --bet-chip-label: #fca5a5;
}

body.holdem-cash-table-active #cashBetChipLayer .chip-tier-purple {
  --chip-face: #7c3aed;
  --chip-rim: #4c1d95;
  --chip-stripe: #ede9fe;
  --chip-core: #faf5ff;
  --bet-chip-label: #c4b5fd;
}

body.holdem-cash-table-active #cashBetChipLayer .chip-tier-yellow {
  --chip-face: #facc15;
  --chip-rim: #a16207;
  --chip-stripe: #422006;
  --chip-core: #fef9c3;
  --bet-chip-label: #fde047;
}

body.holdem-cash-table-active #cashBetChipLayer .chip-tier-orange {
  --chip-face: #f97316;
  --chip-rim: #9a3412;
  --chip-stripe: #ffedd5;
  --chip-core: #fff7ed;
  --bet-chip-label: #fdba74;
}

body.holdem-cash-table-active #cashBetChipLayer .chip-tier-black {
  --chip-face: #18181b;
  --chip-rim: #030712;
  --chip-stripe: #f59e0b;
  --chip-core: #fef3c7;
  --bet-chip-label: #fbbf24;
}

body.holdem-cash-table-active .cash-action-panel {
  bottom: 0;
  width: min(580px, 100vw);
  gap: 7px;
  padding: 9px 10px max(10px, calc(var(--holdem-safe-area-bottom) + 8px));
  border: 1px solid rgba(45, 212, 191, 0.32);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(4, 11, 22, 0.84), rgba(1, 4, 10, 0.98));
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.54);
}

body.holdem-cash-table-active .cash-action-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.holdem-cash-table-active .cash-action-buttons button {
  min-height: 58px;
  border-radius: 8px;
  font-size: 16px;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -10px 18px rgba(0, 0, 0, 0.18);
}

body.holdem-cash-table-active .cash-bet-slider {
  grid-template-columns: minmax(0, 1fr) 96px;
  padding: 0 2px;
}

body.holdem-cash-table-active .cash-bet-slider output {
  color: #fef3c7;
  font-size: 16px;
}

body.holdem-cash-table-active .cash-action-hint {
  color: #a7f3d0;
  font-size: 13px;
}

body.holdem-cash-table-active #cashBoard .card.flop-reveal-card {
  animation: holdemFlopReveal 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--flop-reveal-delay, 0ms);
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform, opacity, box-shadow;
}

.cash-flying-chip {
  z-index: 2400;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.42), transparent 20%),
    linear-gradient(135deg, #fef08a 0%, #f59e0b 100%);
  color: #1f2937;
}

@media (max-width: 620px) {
  body.holdem-cash-table-active .cash-felt {
    height: calc(100dvh - 156px);
    min-height: 508px;
  }

  body.holdem-cash-table-active .cash-seat:not(.is-empty),
  body.holdem-cash-table-active .cash-mobile-seat-card {
    width: 82px;
  }

  body.holdem-cash-table-active .cash-seat .avatar-wrap,
  body.holdem-cash-table-active .cash-seat .avatar,
  body.holdem-cash-table-active .cash-seat .lavatar {
    width: 48px;
    height: 48px;
  }

  body.holdem-cash-table-active .cash-seat .name-pill {
    width: 76px;
    min-height: 49px;
  }

  body.holdem-cash-table-active .cash-seat .holes .card {
    width: 27px;
    height: 38px;
  }

  body.holdem-cash-table-active .cash-seat.is-empty {
    width: 112px;
    min-height: 60px;
  }

  body.holdem-cash-table-active .cash-action-buttons button {
    min-height: 58px;
    font-size: 15px;
  }
}

/* Cash table completion pass: use the tournament profile/card/table skin system
   while preserving the cash table's horizontal six-max seat map. */
body.holdem-cash-table-active[data-user-table-theme="classic_gold"] {
  --holdem-theme-accent: #f5c84b;
  --holdem-theme-accent-soft: rgba(245, 200, 75, 0.30);
  --holdem-theme-bg-top: #1a1206;
  --holdem-theme-bg-mid: #332106;
  --holdem-theme-bg-bottom: #080501;
  --holdem-theme-felt-hi: #9a7118;
  --holdem-theme-felt-mid: #4b3308;
  --holdem-theme-felt-low: #1b1204;
  --holdem-theme-rail: #211505;
}

body.holdem-cash-table-active[data-user-table-theme="purple_neon"] {
  --holdem-theme-accent: #c084fc;
  --holdem-theme-accent-soft: rgba(168, 85, 247, 0.34);
  --holdem-theme-bg-top: #130720;
  --holdem-theme-bg-mid: #2a1048;
  --holdem-theme-bg-bottom: #06020c;
  --holdem-theme-felt-hi: #7c3bb4;
  --holdem-theme-felt-mid: #3d176d;
  --holdem-theme-felt-low: #160724;
  --holdem-theme-rail: #1d0a31;
}

body.holdem-cash-table-active[data-user-table-theme="deep_green"] {
  --holdem-theme-accent: #4ade80;
  --holdem-theme-accent-soft: rgba(74, 222, 128, 0.27);
  --holdem-theme-bg-top: #03120b;
  --holdem-theme-bg-mid: #0b2d1b;
  --holdem-theme-bg-bottom: #010704;
  --holdem-theme-felt-hi: #1f7a42;
  --holdem-theme-felt-mid: #0d4d2d;
  --holdem-theme-felt-low: #062113;
  --holdem-theme-rail: #06180f;
}

body.holdem-cash-table-active[data-user-table-theme="red_highroller"] {
  --holdem-theme-accent: #fb7185;
  --holdem-theme-accent-soft: rgba(248, 113, 113, 0.30);
  --holdem-theme-bg-top: #1c0608;
  --holdem-theme-bg-mid: #3a0c12;
  --holdem-theme-bg-bottom: #080203;
  --holdem-theme-felt-hi: #9d2634;
  --holdem-theme-felt-mid: #5d111e;
  --holdem-theme-felt-low: #24070b;
  --holdem-theme-rail: #26080d;
}

body.holdem-cash-table-active[data-user-table-theme="blue_casino"] {
  --holdem-theme-accent: #38bdf8;
  --holdem-theme-accent-soft: rgba(56, 189, 248, 0.30);
  --holdem-theme-bg-top: #061426;
  --holdem-theme-bg-mid: #0b2b4d;
  --holdem-theme-bg-bottom: #020715;
  --holdem-theme-felt-hi: #1f6eab;
  --holdem-theme-felt-mid: #123c66;
  --holdem-theme-felt-low: #061426;
  --holdem-theme-rail: #07182c;
}

body.holdem-cash-table-active[data-user-table-theme="dark_matte"] {
  --holdem-theme-accent: #a3a3a3;
  --holdem-theme-accent-soft: rgba(163, 163, 163, 0.20);
  --holdem-theme-bg-top: #111113;
  --holdem-theme-bg-mid: #202124;
  --holdem-theme-bg-bottom: #050506;
  --holdem-theme-felt-hi: #4b4b4f;
  --holdem-theme-felt-mid: #2d2e31;
  --holdem-theme-felt-low: #141416;
  --holdem-theme-rail: #111113;
}

body.holdem-cash-table-active[data-table-logo-mode="off"] {
  --table-logo-opacity: 0;
}

body.holdem-cash-table-active[data-table-logo-mode="subtle"] {
  --table-logo-opacity: 0.085;
}

body.holdem-cash-table-active[data-table-logo-mode="normal"] {
  --table-logo-opacity: 0.16;
}

body.holdem-cash-table-active {
  --mp-card-w: clamp(42px, 8.2vw, 58px);
  --mp-card-h: calc(var(--mp-card-w) * 1.42);
  --mp-seat-avatar: clamp(45px, 8.8vw, 56px);
  --mp-seat-panel-w: clamp(66px, 12vw, 78px);
  --mp-seat-card-w: clamp(24px, 6.2vw, 31px);
  --mp-seat-card-h: calc(var(--mp-seat-card-w) * 1.42);
  background:
    radial-gradient(ellipse at 50% 24%, var(--holdem-theme-accent-soft), transparent 50%),
    linear-gradient(180deg, var(--holdem-theme-bg-top, #110d0a) 0%, var(--holdem-theme-bg-mid, #1a110d) 48%, var(--holdem-theme-bg-bottom, #050403) 100%) !important;
}

body.holdem-cash-table-active .cash-table-topbar {
  background: linear-gradient(180deg, rgba(3, 3, 2, 0.98), rgba(5, 4, 3, 0.88));
  border-bottom-color: rgba(238, 231, 212, 0.18);
}

body.holdem-cash-table-active .cash-table-actions-top {
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.holdem-cash-table-active .cash-table-actions-top .cash-settings-btn {
  border-color: rgba(250, 204, 21, 0.48);
  background: linear-gradient(180deg, rgba(45, 35, 22, 0.98), rgba(10, 10, 9, 0.98));
  color: #fde68a;
}

body.holdem-cash-table-active .cash-felt {
  --cash-card-w: var(--mp-card-w);
  --cash-card-h: var(--mp-card-h);
  height: min(calc(100dvh - 142px), 710px);
  min-height: 532px;
  background:
    radial-gradient(ellipse at 50% 26%, var(--holdem-theme-accent-soft), transparent 48%),
    linear-gradient(180deg, var(--holdem-theme-bg-top, #090706) 0%, var(--holdem-theme-bg-mid, #1b120e) 44%, var(--holdem-theme-bg-bottom, #070504) 100%) !important;
}

body.holdem-cash-table-active .cash-felt::before {
  z-index: 0;
  border-color: rgba(10, 9, 8, 0.92);
  border-radius: 46% / 42%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 9%, transparent 91%, rgba(0, 0, 0, 0.30)),
    radial-gradient(ellipse at 50% 38%, var(--holdem-theme-felt-hi, #9a7118), var(--holdem-theme-felt-mid, #4b3308) 54%, var(--holdem-theme-felt-low, #1b1204) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 28px rgba(0, 0, 0, 0.56),
    0 0 30px var(--holdem-theme-accent-soft, rgba(245, 200, 75, 0.30)),
    0 18px 38px rgba(0, 0, 0, 0.78) !important;
}

body.holdem-cash-table-active .cash-felt::after {
  z-index: 1;
  width: min(86vw, 734px);
  height: clamp(250px, 48vw, 384px);
  min-width: 318px;
  min-height: 224px;
  border-color: var(--holdem-theme-accent, #f5c84b) !important;
  border-radius: 45% / 41%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(ellipse at 50% 70%, rgba(0, 0, 0, 0.42), transparent 72%),
    linear-gradient(180deg, var(--holdem-theme-felt-hi, #9a7118) 0%, var(--holdem-theme-felt-mid, #4b3308) 48%, var(--holdem-theme-rail, #211505) 100%) !important;
  box-shadow:
    inset 0 0 48px rgba(0, 0, 0, 0.52),
    inset 0 0 0 4px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(0, 0, 0, 0.78),
    0 0 22px var(--holdem-theme-accent-soft, rgba(245, 200, 75, 0.30)) !important;
}

body.holdem-cash-table-active .cash-table-theme-layer {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 2;
  width: min(86vw, 734px);
  height: clamp(250px, 48vw, 384px);
  min-width: 318px;
  min-height: 224px;
  overflow: hidden;
  border-radius: 45% / 41%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body.holdem-cash-table-active .cash-table-theme-layer .table-theme-watermark {
  top: 44%;
  opacity: var(--table-logo-opacity, 0.085);
  color: rgba(255, 244, 201, 0.95);
  font-size: clamp(26px, 6vw, 44px);
}

body.holdem-cash-table-active .cash-board {
  top: 43%;
}

body.holdem-cash-table-active .cash-pot {
  top: 57%;
  border-color: rgba(250, 204, 21, 0.26);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 54%),
    linear-gradient(180deg, #1e1915, #080705);
}

body.holdem-cash-table-active .cash-pot span {
  color: #d7bf43;
  letter-spacing: 4px;
}

body.holdem-cash-table-active .cash-pot strong {
  color: #ffe553;
}

body.holdem-cash-table-active .cash-card.card.placeholder {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0 10%, transparent 10%),
    linear-gradient(180deg, rgba(196, 193, 183, 0.76), rgba(139, 134, 123, 0.78)) !important;
}

body.holdem-cash-table-active .cash-seat:not(.is-empty) {
  width: 104px;
  min-height: 112px;
}

body.holdem-cash-table-active .cash-mobile-seat-card {
  width: 100%;
  min-height: 112px;
}

body.holdem-cash-table-active .cash-seat .avatar-wrap,
body.holdem-cash-table-active .cash-seat .seat-avatar-shell {
  width: var(--mp-seat-avatar);
  height: var(--mp-seat-avatar);
}

body.holdem-cash-table-active .cash-seat .avatar,
body.holdem-cash-table-active .cash-seat .lavatar {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.26), transparent 22%),
    radial-gradient(circle at 52% 50%, hsla(var(--avatar-hue, 205), 48%, 48%, 0.9), hsla(var(--avatar-hue, 205), 52%, 22%, 0.98) 72%),
    linear-gradient(145deg, #35455a, #171717) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 14px rgba(0, 0, 0, 0.76);
}

body.holdem-cash-table-active .cash-seat .name-pill,
body.holdem-cash-table-active .cash-mobile-seat-card .mobile-player-panel {
  width: var(--mp-seat-panel-w);
  min-height: 54px !important;
  padding: 15px 5px 7px;
  background: linear-gradient(180deg, rgba(18, 18, 16, 0.96), rgba(0, 0, 0, 0.95));
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.72);
}

body.holdem-cash-table-active .cash-seat .name {
  color: #fff7e9;
  font-size: 13px;
}

body.holdem-cash-table-active .cash-seat .chips {
  color: #fff7e9;
  font-size: 16px;
}

body.holdem-cash-table-active .cash-seat .holes .card {
  width: var(--mp-seat-card-w);
  height: var(--mp-seat-card-h);
}

body.holdem-cash-table-active .cash-seat .holes .card .rank {
  font-size: calc(var(--mp-seat-card-w) * 0.44);
}

body.holdem-cash-table-active .cash-seat .holes .card .suit {
  font-size: calc(var(--mp-seat-card-w) * 0.5);
}

body.holdem-cash-table-active .cash-seat.seat-top .holes,
body.holdem-cash-table-active .cash-seat.seat-mid .holes,
body.holdem-cash-table-active .cash-seat.seat-left .holes,
body.holdem-cash-table-active .cash-seat.seat-right .holes {
  left: 50%;
  right: auto;
  top: calc(-1 * var(--mp-seat-card-h) - 4px);
  transform: translateX(-50%);
}

@media (max-width: 620px) {
  body.holdem-cash-table-active {
    --mp-card-w: clamp(38px, 8.6vw, 50px);
    --mp-seat-avatar: clamp(40px, 9.6vw, 48px);
    --mp-seat-panel-w: clamp(58px, 14vw, 72px);
    --mp-seat-card-w: clamp(22px, 5.9vw, 27px);
  }

  body.holdem-cash-table-active .cash-table-actions-top {
    gap: 4px;
  }

  body.holdem-cash-table-active .cash-table-actions-top button {
    min-height: 32px;
    padding: 0 7px;
    font-size: 11px;
  }

  body.holdem-cash-table-active .cash-felt {
    height: calc(100dvh - 146px);
    min-height: 532px;
  }

  body.holdem-cash-table-active .cash-seat:not(.is-empty) {
    width: 86px;
  }

  body.holdem-cash-table-active .cash-seat .name-pill,
  body.holdem-cash-table-active .cash-mobile-seat-card .mobile-player-panel {
    min-height: 45px !important;
    padding: 12px 4px 5px;
  }

  body.holdem-cash-table-active .cash-seat .name {
    font-size: clamp(10px, 2.9vw, 12px);
  }

  body.holdem-cash-table-active .cash-seat .chips {
    font-size: clamp(12px, 3.5vw, 15px);
  }

  body.holdem-cash-table-active .cash-seat.is-empty {
    width: 112px;
    min-height: 60px;
  }
}

/* Cash fixed-viewport pass for iPhone/Galaxy WebViews. The cash table should
   not scroll vertically; the room bar, table canvas, and action slot are fixed
   against the actual visible viewport exposed by app.js (--app-height). */
body.holdem-cash-table-active {
  --cash-appbar-h: clamp(56px, 7.2dvh, 72px);
  --cash-roombar-h: clamp(56px, 7dvh, 70px);
  --cash-action-slot-h: calc(clamp(176px, 23dvh, 206px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
  --cash-felt-bottom-reserve: clamp(82px, 11dvh, 112px);
  --cash-table-center-y: 47%;
  --cash-board-top: 42%;
  --cash-pot-top: 55%;
  --cash-table-w: min(112vw, 650px);
  --cash-table-h: clamp(330px, 50dvh, 470px);
  --cash-avatar-size: var(--cash-layout-avatar-size, var(--mp-seat-avatar));
  --cash-timer-size: calc(var(--cash-avatar-size) + 12px);
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.holdem-cash-table-active #app {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100vw, 640px) !important;
  max-width: min(100vw, 640px) !important;
  height: var(--app-height, 100dvh) !important;
  min-height: var(--app-height, 100dvh) !important;
  max-height: var(--app-height, 100dvh) !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

body.holdem-cash-table-active #topbar {
  position: relative !important;
  top: auto !important;
  min-height: var(--cash-appbar-h) !important;
  padding-top: max(7px, min(var(--holdem-safe-area-top), 12px)) !important;
  padding-bottom: 7px !important;
  flex: 0 0 auto;
}

body.holdem-cash-table-active #modeSwitch {
  display: none !important;
}

body.holdem-cash-table-active #cashTableView {
  display: grid !important;
  grid-template-rows: var(--cash-roombar-h) minmax(0, 1fr);
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.holdem-cash-table-active .cash-table-topbar {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) max-content;
  gap: 8px;
  height: var(--cash-roombar-h) !important;
  min-height: 0 !important;
  padding: 7px 10px !important;
  overflow: hidden;
  align-items: center;
}

body.holdem-cash-table-active .cash-table-back {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

body.holdem-cash-table-active .cash-table-meta {
  align-content: center;
  min-width: 0;
  gap: 1px;
}

body.holdem-cash-table-active .cash-table-meta strong {
  font-size: 18px;
  line-height: 1.06;
}

body.holdem-cash-table-active .cash-table-meta span {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.holdem-cash-table-active .cash-table-actions-top {
  grid-column: 3 !important;
  grid-row: 1 !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 4px;
  justify-self: end;
  min-width: 0;
}

body.holdem-cash-table-active .cash-table-actions-top button {
  min-width: 0;
  min-height: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

body.holdem-cash-table-active #cashCardDeckSettingsBtn {
  font-size: 0;
}

body.holdem-cash-table-active #cashCardDeckSettingsBtn::after {
  content: "덱";
  font-size: 11px;
}

body.holdem-cash-table-active .cash-felt {
  align-self: start;
  width: 100% !important;
  max-width: none !important;
  height: calc(100% - var(--cash-felt-bottom-reserve)) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.holdem-cash-table-active .cash-felt::before {
  left: var(--cash-table-center-x, 50%) !important;
  top: var(--cash-table-center-y) !important;
  width: var(--cash-table-w) !important;
  height: var(--cash-table-h) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-width: clamp(13px, 3vw, 20px) !important;
}

body.holdem-cash-table-active .cash-felt::after,
body.holdem-cash-table-active .cash-table-theme-layer {
  left: var(--cash-table-center-x, 50%) !important;
  top: var(--cash-table-center-y) !important;
  width: calc(var(--cash-table-w) - clamp(28px, 7vw, 48px)) !important;
  height: calc(var(--cash-table-h) - clamp(28px, 7vw, 48px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

body.holdem-cash-table-active .cash-board {
  top: var(--cash-board-top) !important;
}

body.holdem-cash-table-active .cash-pot {
  top: var(--cash-pot-top) !important;
}

body.holdem-cash-table-active .cash-action-panel,
body.holdem-cash-table-active .cash-action-panel.hidden {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: end;
  width: min(100vw, 640px) !important;
  height: var(--cash-action-slot-h) !important;
  min-height: var(--cash-action-slot-h) !important;
  max-height: var(--cash-action-slot-h) !important;
  gap: 6px !important;
  padding: 8px 10px max(10px, calc(var(--holdem-safe-area-bottom) + 8px)) !important;
  border: 1px solid rgba(45, 212, 191, 0.30) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  background: linear-gradient(180deg, rgba(4, 10, 20, 0.48), rgba(1, 4, 10, 0.93) 22%, rgba(0, 0, 0, 0.98) 100%) !important;
  box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.52) !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  z-index: 80 !important;
}

body.holdem-cash-table-active .cash-action-panel.hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.holdem-cash-table-active .cash-action-panel:not(.hidden) {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.holdem-cash-table-active .cash-action-panel[data-layout-custom="1"],
body.holdem-cash-table-active .cash-action-panel.hidden[data-layout-custom="1"] {
  left: var(--cash-layout-action-panel-x, 50%) !important;
  top: var(--cash-layout-action-panel-y, 91%) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(calc(100vw - 20px), var(--cash-layout-action-panel-width, 604px)) !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-cash-table-active .cash-action-hint {
  min-height: 24px;
  display: grid;
  place-items: center;
  margin: 0 !important;
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(9, 18, 26, 0.72), rgba(4, 8, 14, 0.86));
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

body.holdem-cash-table-active .cash-bet-slider {
  min-height: 30px;
  grid-template-columns: minmax(0, 1fr) 72px !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 3px 5px !important;
  border: 1px solid rgba(232, 226, 211, 0.20);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(45, 48, 52, 0.62), rgba(7, 8, 10, 0.84));
}

body.holdem-cash-table-active .cash-bet-slider input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: #f6d45e;
}

body.holdem-cash-table-active .cash-bet-slider output {
  min-width: 0;
  color: #ffe553;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

body.holdem-cash-table-active .cash-action-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

body.holdem-cash-table-active .cash-action-buttons button {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: clamp(54px, 7.2dvh, 64px) !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(235, 229, 214, 0.22) !important;
  border-radius: 8px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -12px 18px rgba(0, 0, 0, 0.24),
    0 5px 12px rgba(0, 0, 0, 0.28) !important;
}

body.holdem-cash-table-active .cash-action-buttons button .ab-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #fffaf0;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.holdem-cash-table-active .cash-action-buttons button .ab-amount {
  display: block;
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(255, 250, 240, 0.92);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.holdem-cash-table-active .cash-seat .avatar-wrap,
body.holdem-cash-table-active .cash-seat .seat-avatar-shell {
  width: var(--cash-avatar-size) !important;
  height: var(--cash-avatar-size) !important;
  display: grid;
  place-items: center;
}

body.holdem-cash-table-active .cash-seat .avatar,
body.holdem-cash-table-active .cash-seat .lavatar {
  position: relative;
  z-index: 1;
}

body.holdem-cash-table-active .cash-seat .timer-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  inset: auto !important;
  width: var(--cash-timer-size) !important;
  height: var(--cash-timer-size) !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: 50% 50%;
  z-index: 3;
  pointer-events: none;
}

body.holdem-cash-table-active .cash-seat .timer-ring-circle {
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

@media (min-width: 431px) {
  body.holdem-cash-table-active {
    --cash-action-slot-h: calc(clamp(184px, 21.5dvh, 214px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
    --cash-felt-bottom-reserve: clamp(88px, 10dvh, 116px);
    --cash-table-center-y: 46%;
    --cash-table-w: min(116vw, 720px);
    --cash-table-h: clamp(360px, 49dvh, 500px);
    --mp-card-w: clamp(42px, 8.1vw, 58px);
    --mp-seat-avatar: clamp(46px, 8.2vw, 58px);
    --mp-seat-panel-w: clamp(66px, 11.2vw, 80px);
  }

  body.holdem-cash-table-active .cash-table-meta strong {
    font-size: 20px;
  }

  body.holdem-cash-table-active .cash-action-buttons button .ab-label {
    font-size: 19px;
  }

  body.holdem-cash-table-active .cash-action-buttons button .ab-amount {
    font-size: 14px;
  }
}

@media (min-width: 390px) and (max-width: 430px) {
  body.holdem-cash-table-active {
    --cash-action-slot-h: calc(clamp(170px, 22dvh, 200px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
    --cash-felt-bottom-reserve: clamp(78px, 10.5dvh, 106px);
    --cash-table-center-y: 46%;
    --cash-table-w: min(114vw, 670px);
    --cash-table-h: clamp(326px, 49.5dvh, 458px);
  }
}

@media (max-width: 389px) {
  body.holdem-cash-table-active {
    --cash-roombar-h: clamp(52px, 7dvh, 62px);
    --cash-action-slot-h: calc(clamp(158px, 22dvh, 184px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
    --cash-felt-bottom-reserve: clamp(72px, 10dvh, 96px);
    --cash-table-center-y: 46%;
    --cash-table-w: min(116vw, 590px);
    --cash-table-h: clamp(300px, 48dvh, 405px);
    --mp-card-w: clamp(34px, 8.7vw, 43px);
    --mp-seat-avatar: clamp(36px, 9.4vw, 44px);
    --mp-seat-panel-w: clamp(54px, 14vw, 66px);
    --mp-seat-card-w: clamp(20px, 5.7vw, 25px);
  }

  body.holdem-cash-table-active .cash-table-topbar {
    grid-template-columns: 38px minmax(0, 1fr) max-content;
    gap: 6px;
    padding: 6px 8px !important;
  }

  body.holdem-cash-table-active .cash-table-back {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  body.holdem-cash-table-active .cash-table-actions-top button {
    height: 34px;
    min-height: 34px;
    padding: 0 6px;
    font-size: 10px;
  }

  body.holdem-cash-table-active .cash-action-panel,
  body.holdem-cash-table-active .cash-action-panel.hidden {
    gap: 5px !important;
    padding: 6px 8px max(8px, calc(var(--holdem-safe-area-bottom) + 6px)) !important;
  }

  body.holdem-cash-table-active .cash-action-buttons {
    gap: 6px !important;
  }

  body.holdem-cash-table-active .cash-action-buttons button {
    min-height: clamp(48px, 7dvh, 56px) !important;
  }

  body.holdem-cash-table-active .cash-table-meta strong {
    font-size: 16px;
  }

  body.holdem-cash-table-active .cash-table-meta span {
    font-size: 11px;
  }

  body.holdem-cash-table-active .cash-action-buttons button .ab-label {
    font-size: 16px;
  }

  body.holdem-cash-table-active .cash-action-buttons button .ab-amount {
    font-size: 12px;
  }
}

@media (max-width: 374px) {
  body.holdem-cash-table-active {
    --cash-action-slot-h: calc(clamp(150px, 21.5dvh, 174px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
    --cash-felt-bottom-reserve: clamp(68px, 9.5dvh, 88px);
    --cash-table-w: min(118vw, 560px);
    --cash-table-h: clamp(284px, 47dvh, 380px);
    --mp-seat-panel-w: clamp(52px, 14vw, 62px);
  }

  body.holdem-cash-table-active .cash-table-actions-top button {
    padding: 0 5px;
    font-size: 10px;
  }

  body.holdem-cash-table-active #cashCardDeckSettingsBtn::after {
    font-size: 10px;
  }
}

/* Cash 6-max mobile layout v147: hero cluster anchored just above primary actions. */
body.holdem-cash-table-active {
  --cash-appbar-h: clamp(52px, 6.8dvh, 64px);
  --cash-appbar-offset: 0px;
  --cash-roombar-h: 0px;
  --cash-layout-y-offset: 0%;
  --cash-board-y-offset: 0%;
  --cash-bet-chip-y-offset: 0px;
  --cash-hero-cards-y-offset: 0px;
  --cash-hero-info-y-offset: 0px;
  --cash-hero-hand-y-offset: 0px;
  --cash-top-cards-y-offset: 0px;
  --cash-top-info-y-offset: 0px;
  --cash-top-badge-y-offset: 0px;
  --cash-hero-cards-top: 52px;
  --cash-hero-info-top: 86px;
  --cash-hero-hand-top: 120px;
  --cash-top-cards-top: 0px;
  --cash-top-info-top: 74px;
  --cash-top-badge-top: 58px;
  --cash-table-center-y: calc(48% + var(--cash-layout-y-offset));
  --cash-table-w: min(92vw, 430px);
  --cash-table-h: min(118vw, 620px);
  --cash-board-top: calc(52% + var(--cash-board-y-offset));
  --cash-pot-top: calc(35.5% + var(--cash-board-y-offset));
  --cash-blinds-top: calc(60% + var(--cash-board-y-offset));
  --cash-actionbar-height: 114px;
  --cash-actionbar-bottom-offset: max(6px, calc(var(--holdem-safe-area-bottom) + 6px));
  --cash-hero-actionbar-gap: -36px;
  --cash-action-slot-h: calc(clamp(124px, 17dvh, 152px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
  --cash-seat-w: clamp(76px, 17.5vw, 88px);
  --cash-side-seat-inset: clamp(18px, 4vw, 28px);
  --cash-hero-seat-w: clamp(206px, 57vw, 224px);
  --cash-avatar-size: var(--cash-layout-avatar-size, clamp(48px, 12vw, 58px));
  --cash-hero-avatar-size: var(--cash-layout-hero-avatar-size, clamp(54px, 14.5vw, 62px));
  --cash-timer-size: calc(var(--cash-avatar-size) + 6px);
  background:
    radial-gradient(circle at 50% 36%, rgba(19, 72, 117, 0.72), transparent 60%),
    linear-gradient(180deg, #02060b 0%, #06101d 46%, #02050a 100%) !important;
}

body.is-ios.holdem-cash-table-active {
  --cash-appbar-offset: clamp(16px, calc(var(--holdem-safe-area-top) + 4px), 26px);
}

body.is-android.holdem-cash-table-active,
body.cash-layout-galaxy.holdem-cash-table-active {
  --cash-top-info-y-offset: -2px;
  --cash-top-badge-y-offset: 1px;
}

body.holdem-cash-table-active #app {
  position: relative !important;
  display: block !important;
  width: min(100vw, 640px) !important;
  max-width: min(100vw, 640px) !important;
  height: var(--app-height, 100dvh) !important;
  min-height: var(--app-height, 100dvh) !important;
  max-height: var(--app-height, 100dvh) !important;
  overflow: hidden !important;
}

body.holdem-cash-table-active #topbar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--cash-appbar-offset) !important;
  z-index: 96 !important;
  min-height: var(--cash-appbar-h) !important;
  height: var(--cash-appbar-h) !important;
  padding-top: max(6px, min(var(--holdem-safe-area-top), 10px)) !important;
  padding-bottom: 6px !important;
  background: linear-gradient(180deg, rgba(7, 10, 15, 0.96), rgba(9, 14, 24, 0.86)) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
}

body.holdem-cash-table-active #cashTableView {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: var(--app-height, 100dvh) !important;
  min-height: var(--app-height, 100dvh) !important;
  max-height: var(--app-height, 100dvh) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(19, 72, 117, 0.54), transparent 62%),
    linear-gradient(180deg, rgba(3, 7, 13, 0.98), #06101d 58%, #02050a 100%) !important;
}

body.holdem-cash-table-active .cash-table-topbar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--cash-appbar-offset) + var(--cash-appbar-h)) !important;
  z-index: 94 !important;
  display: none !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 8px !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 7px 10px !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: linear-gradient(180deg, rgba(9, 14, 24, 0.92), rgba(6, 10, 18, 0.76)) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32) !important;
}

body.holdem-cash-table-active .cash-table-meta strong {
  font-size: clamp(16px, 4.3vw, 20px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.holdem-cash-table-active .cash-table-meta span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.holdem-cash-table-active .cash-table-actions-top {
  display: none !important;
}

body.holdem-cash-table-active .cash-table-actions-top button {
  width: auto !important;
  min-width: 54px !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

body.holdem-cash-table-active #cashCardDeckSettingsBtn,
body.holdem-cash-table-active .cash-card-deck-menu-btn {
  min-width: 64px !important;
  font-size: 0 !important;
}

body.holdem-cash-table-active #cashCardDeckSettingsBtn::after {
  content: "카드덱" !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.holdem-cash-table-active .cash-table-menu-toggle {
  position: absolute !important;
  left: 10px !important;
  top: calc(var(--cash-appbar-offset) + var(--cash-appbar-h) + 10px) !important;
  z-index: 95 !important;
  display: flex !important;
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(5, 10, 18, 0.80) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}

body.holdem-cash-table-active .cash-table-menu-toggle:active {
  transform: scale(0.98) !important;
}

body.holdem-cash-table-active .cash-table-menu-icon,
body.holdem-cash-table-active .cash-table-menu-icon::before,
body.holdem-cash-table-active .cash-table-menu-icon::after {
  display: block;
  width: 23px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
}

body.holdem-cash-table-active .cash-table-menu-icon {
  position: relative;
}

body.holdem-cash-table-active .cash-table-menu-icon::before,
body.holdem-cash-table-active .cash-table-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

body.holdem-cash-table-active .cash-table-menu-icon::before {
  top: -8px;
}

body.holdem-cash-table-active .cash-table-menu-icon::after {
  top: 8px;
}

body.holdem-cash-table-active .cash-table-menu-popover {
  position: absolute !important;
  left: 10px !important;
  top: calc(var(--cash-appbar-offset) + var(--cash-appbar-h) + 60px) !important;
  z-index: 120 !important;
  width: max-content !important;
  min-width: 176px !important;
  max-width: min(230px, calc(100vw - 20px)) !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  background: rgba(4, 8, 16, 0.95) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(8px);
  pointer-events: auto !important;
}

body.holdem-cash-table-active .cash-table-menu-popover.hidden {
  display: none !important;
}

body.holdem-cash-table-active .cash-table-menu-meta {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(251, 191, 36, 0.22) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(16, 24, 38, 0.88), rgba(4, 8, 16, 0.92)) !important;
}

body.holdem-cash-table-active .cash-table-menu-meta strong,
body.holdem-cash-table-active .cash-table-menu-meta span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.holdem-cash-table-active .cash-table-menu-meta strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

body.holdem-cash-table-active .cash-table-menu-meta span {
  color: #aeb8c7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

body.holdem-cash-table-active .cash-table-menu-popover button {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 0 6px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body.holdem-cash-table-active .cash-table-menu-popover button:last-child {
  margin-bottom: 0 !important;
}

body.holdem-cash-table-active .cash-table-menu-popover button:active {
  transform: scale(0.98);
}

body.holdem-cash-table-active .cash-table-menu-popover button.is-active {
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.92), rgba(13, 148, 136, 0.86)) !important;
  color: #ffffff !important;
}

body.holdem-cash-table-active .cash-table-menu-popover button.danger {
  background: rgba(170, 30, 35, 0.92) !important;
  color: #ffffff !important;
}

body.holdem-cash-table-active .cash-table-menu-popover button.hidden {
  display: none !important;
}

body.holdem-cash-table-active .cash-felt {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

body.holdem-cash-table-active .cash-felt::before {
  left: var(--cash-table-center-x, 50%) !important;
  top: var(--cash-table-center-y) !important;
  width: var(--cash-table-w) !important;
  height: var(--cash-table-h) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-width: clamp(11px, 3vw, 17px) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255, 255, 255, 0.15), transparent 45%),
    radial-gradient(ellipse at 50% 72%, rgba(0, 0, 0, 0.42), transparent 68%),
    linear-gradient(180deg, #11598f 0%, #0a3d6f 48%, #041e3d 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(56, 197, 255, 0.34),
    inset 0 36px 72px rgba(255, 255, 255, 0.08),
    inset 0 -46px 76px rgba(0, 0, 0, 0.34),
    0 20px 40px rgba(0, 0, 0, 0.68) !important;
}

body.holdem-cash-table-active .cash-felt::after,
body.holdem-cash-table-active .cash-table-theme-layer {
  left: var(--cash-table-center-x, 50%) !important;
  top: var(--cash-table-center-y) !important;
  width: calc(var(--cash-table-w) - clamp(42px, 10vw, 66px)) !important;
  height: calc(var(--cash-table-h) - clamp(50px, 11vw, 76px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 999px !important;
}

body.holdem-cash-table-active .cash-table-theme-layer .table-theme-watermark {
  left: 50%;
  top: 50% !important;
  opacity: 0.08 !important;
  color: rgba(232, 245, 238, 0.92) !important;
  font-size: clamp(28px, 8vw, 48px) !important;
  transform: translate(-50%, -50%);
}

body.holdem-cash-table-active .cash-board {
  left: 50% !important;
  top: var(--cash-board-top) !important;
  z-index: 44 !important;
  gap: clamp(5px, 1.5vw, 8px) !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-cash-table-active .cash-board .card {
  width: clamp(40px, 11vw, 46px) !important;
  height: clamp(56px, 15vw, 64px) !important;
  border-radius: 7px !important;
}

body.holdem-cash-table-active .cash-pot {
  left: 50% !important;
  top: var(--cash-pot-top) !important;
  z-index: 45 !important;
  min-width: 104px !important;
  padding: 5px 16px 6px !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-cash-table-active .cash-pot span {
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

body.holdem-cash-table-active .cash-pot strong {
  font-size: clamp(17px, 5vw, 23px) !important;
}

body.holdem-cash-table-active .cash-hand-result-panel {
  position: absolute;
  left: 50%;
  top: calc(47.5% + var(--cash-board-y-offset));
  z-index: 90;
  width: min(72vw, 300px);
  max-width: calc(100vw - 32px);
  padding: 8px 10px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.18), transparent 62%),
    rgba(3, 7, 13, 0.90);
  color: #f8fafc;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.holdem-cash-table-active .cash-hand-result-panel.hidden {
  display: none !important;
}

body.holdem-cash-table-active .cash-hand-result-title {
  color: #ffe46b;
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 950;
  line-height: 1.12;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}

body.holdem-cash-table-active .cash-hand-result-sub {
  margin-top: 2px;
  color: rgba(226, 232, 240, 0.94);
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 850;
  line-height: 1.2;
}

body.holdem-cash-table-active .cash-hand-result-rows {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

body.holdem-cash-table-active .cash-hand-result-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(226, 232, 240, 0.86);
  font-size: clamp(9px, 2.6vw, 11px);
  font-weight: 800;
  line-height: 1.1;
}

body.holdem-cash-table-active .cash-hand-result-row span,
body.holdem-cash-table-active .cash-hand-result-row em,
body.holdem-cash-table-active .cash-hand-result-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.holdem-cash-table-active .cash-hand-result-row em {
  color: #d7f3ff;
  font-style: normal;
}

body.holdem-cash-table-active .cash-hand-result-row strong {
  color: #37d9ff;
  font-weight: 950;
}

body.holdem-cash-table-active .cash-hand-result-row.is-main {
  color: #fff;
}

body.holdem-cash-table-active .cash-hand-result-cards {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 6px;
}

body.holdem-cash-table-active .cash-hand-result-cards .tiny-card {
  min-width: 21px;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
}

body.holdem-cash-table-active .cash-seat.is-winner .avatar,
body.holdem-cash-table-active .cash-seat.is-winner .lavatar {
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.35),
    0 0 18px rgba(34, 211, 238, 0.66),
    0 0 28px rgba(250, 204, 21, 0.42),
    0 8px 18px rgba(0, 0, 0, 0.72) !important;
}

body.holdem-cash-table-active #cashFelt .card.hl-made {
  outline: 2px solid rgba(251, 191, 36, 0.95);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.62), 0 6px 12px rgba(0, 0, 0, 0.46);
}

body.holdem-cash-table-active .cash-blind-text {
  position: absolute;
  left: var(--cash-layout-board-notice-x, 50%);
  top: var(--cash-layout-board-notice-y, var(--cash-blinds-top));
  z-index: 43;
  width: min(72vw, 280px);
  overflow: hidden;
  color: rgba(226, 232, 240, 0.72);
  font-size: clamp(12px, 3.5vw, 15px);
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.holdem-cash-table-active #cashBetChipLayer,
body.holdem-cash-table-active .cash-bet-chip-layer,
body.holdem-cash-table-active .cash-seats,
body.holdem-cash-table-active #cashSeats {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
}

body.holdem-cash-table-active #cashBetChipLayer,
body.holdem-cash-table-active .cash-bet-chip-layer {
  z-index: 52 !important;
}

body.holdem-cash-table-active #cashBetChipLayer .table-bet-chip {
  min-width: var(--cash-layout-bet-chip-size, 40px) !important;
  gap: 2px !important;
  transform: translate(calc(-50% + var(--cash-layout-bet-dx, 0px)), calc(-50% + var(--cash-layout-bet-dy, 0px))) !important;
}

body.holdem-cash-table-active #cashBetChipLayer .bet-chip-stack {
  width: var(--cash-layout-bet-chip-size, 35px) !important;
  height: var(--cash-layout-bet-chip-size, 28px) !important;
}

body.holdem-cash-table-active #cashBetChipLayer .table-bet-chip strong {
  min-width: var(--cash-layout-bet-chip-size, 34px) !important;
  min-height: 16px !important;
  margin-top: 2px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.78) !important;
  color: #ffe46b !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.holdem-cash-table-active #cashBetChipLayer .cash-pot-chip-pile {
  z-index: 54 !important;
  min-width: clamp(52px, 13vw, 70px) !important;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.72)) !important;
}

body.holdem-cash-table-active #cashBetChipLayer .cash-pot-chip-pile .bet-chip-stack {
  width: clamp(42px, 12vw, 56px) !important;
  height: clamp(22px, 6vw, 28px) !important;
}

body.holdem-cash-table-active #cashBetChipLayer .cash-pot-chip-pile .bet-chip-unit {
  width: clamp(17px, 4.8vw, 21px) !important;
  height: clamp(17px, 4.8vw, 21px) !important;
}

body.holdem-cash-table-active #cashBetChipLayer .cash-pot-chip-pile strong {
  min-width: clamp(36px, 10vw, 48px) !important;
  max-width: clamp(58px, 17vw, 78px) !important;
  padding: 2px 7px !important;
  color: #ffe46b !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

body.holdem-cash-table-active .cash-seats,
body.holdem-cash-table-active #cashSeats {
  z-index: 58 !important;
}

body.holdem-cash-table-active .cash-seat {
  left: var(--seat-x) !important;
  top: var(--seat-y) !important;
  right: auto !important;
  width: var(--cash-seat-w) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto;
}

body.holdem-cash-table-active .cash-seat[data-seat-type="center"] {
  left: var(--seat-x) !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-cash-table-active .cash-seat[data-seat-type="edge"] {
  top: var(--seat-y) !important;
  transform: translateY(-50%) !important;
}

body.holdem-cash-table-active .cash-seat[data-edge="left"] {
  left: var(--cash-side-seat-inset) !important;
  right: auto !important;
}

body.holdem-cash-table-active .cash-seat[data-edge="right"] {
  left: auto !important;
  right: var(--cash-side-seat-inset) !important;
}

body.holdem-cash-table-active .cash-seat[data-layout-custom="1"] {
  left: var(--seat-x) !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-cash-table-active .cash-seat.is-hero {
  width: var(--cash-hero-seat-w) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] {
  left: 50% !important;
  top: auto !important;
  bottom: calc(var(--cash-actionbar-height) + var(--cash-actionbar-bottom-offset) + var(--cash-hero-actionbar-gap)) !important;
  width: var(--cash-hero-seat-w) !important;
  z-index: 72 !important;
  transform: translateX(-50%) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"][data-layout-custom="1"] {
  left: var(--seat-x) !important;
  top: var(--seat-y) !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-cash-table-active .cash-mobile-seat-card {
  width: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  justify-items: center;
}

body.holdem-cash-table-active .cash-seat .avatar-wrap,
body.holdem-cash-table-active .cash-seat .seat-avatar-shell,
body.holdem-cash-table-active .cash-seat .avatar,
body.holdem-cash-table-active .cash-seat .lavatar {
  width: var(--cash-avatar-size) !important;
  height: var(--cash-avatar-size) !important;
}

body.holdem-cash-table-active .cash-seat .avatar-wrap,
body.holdem-cash-table-active .cash-seat .seat-avatar-shell,
body.holdem-cash-table-active .cash-seat .name-pill,
body.holdem-cash-table-active .cash-mobile-seat-card .mobile-player-panel {
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.holdem-cash-table-active .cash-seat .name-pill,
body.holdem-cash-table-active .cash-mobile-seat-card .mobile-player-panel {
  width: var(--mp-seat-panel-w) !important;
  min-height: 36px !important;
  padding: 3px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(18, 18, 16, 0.96), rgba(0, 0, 0, 0.95)) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.72) !important;
  text-align: center !important;
}

body.holdem-cash-table-active .cash-seat .name {
  color: #fff !important;
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(10px, 2.9vw, 12px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.holdem-cash-table-active .cash-seat .chips {
  color: #2fd2ff !important;
  display: block !important;
  margin-top: 2px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(11px, 3.2vw, 13px) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: translate(var(--cash-layout-chips-dx, 0px), var(--cash-layout-chips-dy, 0px)) !important;
}

body.holdem-cash-table-active .cash-seat .holes {
  gap: 3px !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .holes {
  left: 102px !important;
  top: calc(var(--cash-hero-cards-top) + var(--cash-hero-cards-y-offset)) !important;
  right: auto !important;
  gap: 6px !important;
  transform: none !important;
  z-index: 8 !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .cash-mobile-seat-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 154px !important;
  min-height: 154px !important;
  pointer-events: auto;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .avatar-wrap,
body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .seat-avatar-shell {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  width: var(--cash-hero-avatar-size) !important;
  height: var(--cash-hero-avatar-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(var(--cash-layout-avatar-dx, 0px), var(--cash-layout-avatar-dy, 0px)) !important;
  z-index: 7 !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .avatar,
body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .lavatar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .timer-ring {
  position: absolute !important;
  inset: -7px !important;
  width: calc(var(--cash-hero-avatar-size) + 14px) !important;
  height: calc(var(--cash-hero-avatar-size) + 14px) !important;
  transform: none !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .holes .card {
  width: clamp(36px, 9.8vw, 42px) !important;
  height: clamp(50px, 13.4vw, 58px) !important;
  border-radius: 7px !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .holes .card .rank {
  font-size: clamp(16px, 5vw, 22px) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .holes .card .suit {
  font-size: clamp(18px, 5.8vw, 26px) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .name-pill,
body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .cash-player-panel {
  position: absolute !important;
  left: 5px !important;
  top: calc(var(--cash-hero-info-top) + var(--cash-hero-info-y-offset)) !important;
  width: clamp(72px, 20vw, 84px) !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  transform: translate(var(--cash-layout-name-dx, 0px), var(--cash-layout-name-dy, 0px)) !important;
  z-index: 7 !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .cash-hero-hand-label {
  position: absolute !important;
  left: 104px !important;
  top: calc(var(--cash-hero-hand-top) + var(--cash-hero-hand-y-offset)) !important;
  width: clamp(132px, 36vw, 158px) !important;
  overflow: visible;
  color: #ffd84f !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  text-overflow: clip;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.70);
  z-index: 9 !important;
  pointer-events: none;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .action-badge {
  position: absolute !important;
  left: 48px !important;
  top: 0 !important;
  max-width: 96px !important;
  min-width: 42px !important;
  padding: 3px 9px !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .action-badge.toact-badge {
  position: absolute !important;
  left: 48px !important;
  top: 0 !important;
  max-width: 96px !important;
  min-width: 40px !important;
  padding: 3px 8px !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .seat-role-stack {
  left: 112px !important;
  right: auto !important;
  top: 86px !important;
  bottom: auto !important;
  z-index: 21 !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .seat-role-stack .dealer-role {
  position: relative !important;
  left: var(--cash-layout-dealer-dx, 0px) !important;
  top: var(--cash-layout-dealer-dy, 0px) !important;
  z-index: 22 !important;
  transform: translate(-98px, -62px) !important;
}

body.holdem-cash-table-active .cash-seat .seat-role-stack .sb-role {
  position: relative !important;
  left: var(--cash-layout-sb-dx, 0px) !important;
  top: var(--cash-layout-sb-dy, 0px) !important;
}

body.holdem-cash-table-active .cash-seat .seat-role-stack .bb-role {
  position: relative !important;
  left: var(--cash-layout-bb-dx, 0px) !important;
  top: var(--cash-layout-bb-dy, 0px) !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .avatar-wrap,
body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .seat-avatar-shell {
  overflow: visible !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .timer-ring {
  left: 50% !important;
  top: 50% !important;
  width: var(--cash-timer-size) !important;
  height: var(--cash-timer-size) !important;
  overflow: visible !important;
  transform: translate(-50%, -50%) !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .timer-ring-circle {
  stroke-width: 3 !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]).is-to-act .avatar,
body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]).is-to-act .lavatar {
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.22),
    0 0 16px rgba(34, 211, 238, 0.55),
    0 7px 16px rgba(0, 0, 0, 0.64) !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]):not(.is-empty) .cash-mobile-seat-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 128px !important;
  min-height: 128px !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]):not(.is-empty) .action-badge {
  position: absolute !important;
  left: 50% !important;
  top: 6px !important;
  max-width: calc(100% - 4px) !important;
  min-width: 38px !important;
  padding: 3px 8px !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]):not(.is-empty) .avatar-wrap,
body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]):not(.is-empty) .seat-avatar-shell {
  position: absolute !important;
  left: 50% !important;
  top: 28px !important;
  margin: 0 !important;
  transform: translate(calc(-50% + var(--cash-layout-avatar-dx, 0px)), var(--cash-layout-avatar-dy, 0px)) !important;
  z-index: 5 !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]):not(.is-empty) .name-pill,
body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]):not(.is-empty) .cash-player-panel {
  position: absolute !important;
  left: 50% !important;
  top: 84px !important;
  width: var(--mp-seat-panel-w) !important;
  margin: 0 !important;
  transform: translate(calc(-50% + var(--cash-layout-name-dx, 0px)), var(--cash-layout-name-dy, 0px)) !important;
  z-index: 6 !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="top-center"]:not(.is-empty) .name-pill,
body.holdem-cash-table-active .cash-seat[data-display-slot="top-center"]:not(.is-empty) .cash-player-panel {
  top: calc(var(--cash-top-info-top) + var(--cash-top-info-y-offset)) !important;
}

body.holdem-cash-table-active .cash-seat[data-seat-type="edge"]:not(.is-empty) .name-pill,
body.holdem-cash-table-active .cash-seat[data-seat-type="edge"]:not(.is-empty) .cash-player-panel {
  width: var(--mp-seat-panel-w) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="left-bottom"] .holes,
body.holdem-cash-table-active .cash-seat[data-display-slot="left-top"] .holes {
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  gap: 4px !important;
  z-index: 7 !important;
  transform: translateX(-50%) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="right-bottom"] .holes,
body.holdem-cash-table-active .cash-seat[data-display-slot="right-top"] .holes {
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  gap: 4px !important;
  z-index: 7 !important;
  transform: translateX(-50%) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="top-center"] .holes {
  left: 50% !important;
  top: calc(var(--cash-top-cards-top) + var(--cash-top-cards-y-offset)) !important;
  right: auto !important;
  gap: 4px !important;
  z-index: 7 !important;
  transform: translateX(-50%) !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .holes .card {
  width: clamp(22px, 6.1vw, 26px) !important;
  height: clamp(30px, 8.4vw, 36px) !important;
  border-radius: 5px !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="top-center"] .seat-role-stack {
  left: calc(50% + 32px) !important;
  top: calc(var(--cash-top-badge-top) + var(--cash-top-badge-y-offset)) !important;
  right: auto !important;
  bottom: auto !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="top-center"] .seat-role-stack .dealer-role {
  position: relative !important;
  left: var(--cash-layout-dealer-dx, 0px) !important;
  top: var(--cash-layout-dealer-dy, 0px) !important;
  z-index: 12 !important;
  transform: translate(2px, calc(var(--cash-top-info-top) + var(--cash-top-info-y-offset) - var(--cash-top-badge-top) - var(--cash-top-badge-y-offset) + 28px)) !important;
}

body.holdem-cash-table-active .cash-seat[data-edge="left"] .seat-role-stack {
  left: auto !important;
  top: 58px !important;
  right: -8px !important;
  bottom: auto !important;
}

body.holdem-cash-table-active .cash-seat[data-edge="left"] .seat-role-stack .dealer-role {
  position: relative !important;
  left: var(--cash-layout-dealer-dx, 0px) !important;
  top: var(--cash-layout-dealer-dy, 0px) !important;
  z-index: 12 !important;
  transform: translate(6px, -22px) !important;
}

body.holdem-cash-table-active .cash-seat[data-edge="right"] .seat-role-stack {
  left: -8px !important;
  top: 58px !important;
  right: auto !important;
  bottom: auto !important;
}

body.holdem-cash-table-active .cash-seat[data-edge="right"] .seat-role-stack .dealer-role {
  position: relative !important;
  left: var(--cash-layout-dealer-dx, 0px) !important;
  top: var(--cash-layout-dealer-dy, 0px) !important;
  z-index: 12 !important;
  transform: translate(-6px, -22px) !important;
}

body.holdem-cash-table-active .cash-seat.is-empty {
  width: var(--cash-seat-w) !important;
  min-height: clamp(74px, 15vw, 86px) !important;
  padding: 8px 7px !important;
  border: 1px dashed rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(3, 12, 24, 0.62) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

body.holdem-cash-table-active .cash-seat-plus {
  width: 24px !important;
  height: 24px !important;
  color: #42eadf !important;
  font-size: 19px !important;
}

body.holdem-cash-table-active .cash-seat-join {
  font-size: 11px !important;
}

body.holdem-cash-table-active .cash-dealer-btn {
  display: none !important;
}

body.holdem-cash-table-active .cash-action-panel,
body.holdem-cash-table-active .cash-action-panel.hidden {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: var(--cash-actionbar-bottom-offset) !important;
  z-index: 110 !important;
  width: min(calc(100vw - 20px), 604px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  align-content: stretch !important;
  padding: 5px !important;
  border: 1px solid rgba(75, 130, 170, 0.42) !important;
  border-radius: 14px !important;
  background: rgba(6, 10, 18, 0.95) !important;
  box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.50) !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
}

body.holdem-cash-table-active .cash-action-panel:not(.is-waiting):not(.hidden) {
  min-height: var(--cash-actionbar-height) !important;
}

body.holdem-cash-table-active .cash-action-panel.hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.holdem-cash-table-active .cash-action-panel:not(.hidden) {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.holdem-cash-table-active .cash-action-panel.is-waiting {
  padding: 5px !important;
}

body.holdem-cash-table-active .cash-action-panel.is-waiting .cash-action-hint,
body.holdem-cash-table-active .cash-action-panel.is-waiting .cash-bet-slider,
body.holdem-cash-table-active .cash-action-panel.is-waiting .cash-action-buttons,
body.holdem-cash-table-active .cash-action-panel.is-waiting .cash-quick-bet-row {
  display: none !important;
}

body.holdem-cash-table-active .cash-join-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 8px;
}

body.holdem-cash-table-active .cash-join-actions.hidden {
  display: none !important;
}

body.holdem-cash-table-active .cash-join-actions button {
  min-height: 54px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: linear-gradient(180deg, #34383d, #0d0f13);
  color: #f8fafc;
  font-size: clamp(15px, 4.5vw, 22px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(0, 0, 0, 0.36);
}

body.holdem-cash-table-active .cash-join-actions button:first-child {
  border-left: 4px solid #22c55e;
}

body.holdem-cash-table-active .cash-join-actions button:last-child {
  background: linear-gradient(180deg, #b91c1c, #7f1d1d);
}

body.holdem-cash-table-active .cash-action-hint {
  display: none !important;
}

body.holdem-cash-table-active .cash-bet-slider {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 46px !important;
  gap: 4px !important;
  align-items: center !important;
  min-height: 28px !important;
  margin-top: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.holdem-cash-table-active .cash-bet-slider.hidden {
  display: none !important;
}

body.holdem-cash-table-active .cash-bet-slider button,
body.holdem-cash-table-active .cash-bet-slider output {
  display: grid !important;
  min-width: 0 !important;
  min-height: 28px !important;
  place-items: center !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(31, 41, 55, 0.95), rgba(11, 18, 31, 0.98)) !important;
  color: #f8fafc !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

body.holdem-cash-table-active .cash-bet-slider output {
  font-size: clamp(15px, 4.4vw, 19px) !important;
  font-variant-numeric: tabular-nums;
}

body.holdem-cash-table-active .cash-bet-slider input[type="range"] {
  min-width: 0 !important;
  width: 100% !important;
  accent-color: #facc15 !important;
}

body.holdem-cash-table-active .cash-action-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body.holdem-cash-table-active .cash-action-buttons.hidden {
  display: none !important;
}

body.holdem-cash-table-active .cash-action-buttons button {
  min-height: var(--cash-layout-action-button-height, 38px) !important;
  padding: 3px 5px !important;
  border-radius: 9px !important;
  line-height: 1.08 !important;
}

body.holdem-cash-table-active .cash-action-buttons button .ab-label {
  font-size: clamp(14px, 3.9vw, 17px) !important;
  letter-spacing: 0 !important;
}

body.holdem-cash-table-active .cash-action-buttons button .ab-amount {
  margin-top: 1px !important;
  font-size: clamp(9px, 2.7vw, 11px) !important;
  letter-spacing: 0 !important;
}

body.holdem-cash-table-active .cash-quick-bet-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin-top: 3px !important;
}

body.holdem-cash-table-active .cash-quick-bet-row.hidden {
  display: none !important;
}

body.holdem-cash-table-active .cash-quick-bet-row button {
  display: grid !important;
  min-width: 0 !important;
  min-height: calc(var(--cash-layout-action-button-height, 38px) - 9px) !important;
  place-items: center !important;
  padding: 2px 3px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(38, 47, 63, 0.96), rgba(13, 20, 32, 0.98)) !important;
  color: #e5e7eb !important;
  font-size: clamp(10px, 2.9vw, 12px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body.holdem-cash-table-active .cash-quick-bet-row .cash-action-settings {
  font-size: var(--cash-layout-action-icon-size, clamp(10px, 2.9vw, 12px)) !important;
}

body.holdem-cash-table-active .cash-quick-bet-row button.is-selected {
  border-color: rgba(250, 204, 21, 0.7) !important;
  background: linear-gradient(180deg, rgba(55, 65, 81, 0.98), rgba(24, 31, 45, 0.98)) !important;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.18), 0 0 10px rgba(250, 204, 21, 0.16) !important;
}

body.holdem-cash-table-active .cash-quick-bet-row button .preset-name,
body.holdem-cash-table-active .cash-quick-bet-row button .preset-amount {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.holdem-cash-table-active .cash-quick-bet-row button .preset-name {
  color: #f8fafc !important;
  font-size: clamp(9px, 2.6vw, 11px) !important;
  font-weight: 900 !important;
}

body.holdem-cash-table-active .cash-quick-bet-row button .preset-amount {
  margin-top: 1px !important;
  color: #facc15 !important;
  font-size: clamp(8px, 2.25vw, 10px) !important;
  font-weight: 950 !important;
  font-variant-numeric: tabular-nums !important;
}

body.holdem-cash-table-active .cash-quick-bet-row .cash-allin {
  color: #f8fafc !important;
}

body.holdem-cash-table-active .cash-quick-bet-row .cash-allin .ab-label {
  font-size: inherit !important;
  line-height: 1 !important;
}

body.holdem-cash-table-active .cash-quick-bet-row button:disabled {
  opacity: 0.48 !important;
}

@media (min-width: 431px) {
  body.holdem-cash-table-active {
    --cash-table-w: min(90vw, 450px);
    --cash-table-h: min(118vw, 636px);
    --cash-seat-w: clamp(76px, 17.5vw, 88px);
    --cash-hero-seat-w: clamp(210px, 52vw, 228px);
  }
}

@media (max-width: 420px) {
  body.holdem-cash-table-active {
    --cash-hero-cards-top: 54px;
    --cash-hero-info-top: 86px;
    --cash-hero-hand-top: 122px;
    --cash-top-info-top: 72px;
  }

  body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .seat-role-stack {
    left: 110px !important;
    top: 84px !important;
  }

  body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .seat-role-stack .dealer-role {
    transform: translate(-96px, -60px) !important;
  }

  body.holdem-cash-table-active .cash-seat[data-display-slot="top-center"] .seat-role-stack .dealer-role {
    transform: translate(1px, calc(var(--cash-top-info-top) + var(--cash-top-info-y-offset) - var(--cash-top-badge-top) - var(--cash-top-badge-y-offset) + 27px)) !important;
  }

  body.holdem-cash-table-active .cash-seat[data-edge="left"] .seat-role-stack .dealer-role {
    transform: translate(5px, -20px) !important;
  }

  body.holdem-cash-table-active .cash-seat[data-edge="right"] .seat-role-stack .dealer-role {
    transform: translate(-5px, -20px) !important;
  }
}

@media (max-width: 389px) {
  body.holdem-cash-table-active {
    --cash-appbar-h: clamp(50px, 6.5dvh, 58px);
    --cash-roombar-h: 0px;
    --cash-layout-y-offset: 0%;
    --cash-table-w: min(91vw, 400px);
    --cash-table-h: min(118vw, 560px);
    --cash-seat-w: 72px;
    --cash-side-seat-inset: clamp(14px, 3.6vw, 22px);
    --cash-hero-seat-w: clamp(198px, 56vw, 212px);
    --cash-avatar-size: var(--cash-layout-avatar-size, clamp(38px, 10.4vw, 46px));
    --cash-hero-avatar-size: var(--cash-layout-hero-avatar-size, clamp(50px, 14vw, 58px));
    --cash-actionbar-height: 108px;
    --cash-hero-actionbar-gap: -32px;
    --cash-action-slot-h: calc(clamp(118px, 16dvh, 144px) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
    --cash-hero-cards-top: 54px;
    --cash-hero-info-top: 84px;
    --cash-hero-hand-top: 122px;
    --cash-top-info-top: 70px;
  }

  body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .seat-role-stack {
    left: 108px !important;
    top: 82px !important;
  }

  body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .seat-role-stack .dealer-role {
    transform: translate(-96px, -58px) !important;
  }

  body.holdem-cash-table-active .cash-seat[data-display-slot="top-center"] .seat-role-stack .dealer-role {
    transform: translate(0, calc(var(--cash-top-info-top) + var(--cash-top-info-y-offset) - var(--cash-top-badge-top) - var(--cash-top-badge-y-offset) + 26px)) !important;
  }

  body.holdem-cash-table-active .cash-seat[data-edge="left"] .seat-role-stack .dealer-role {
    transform: translate(4px, -18px) !important;
  }

  body.holdem-cash-table-active .cash-seat[data-edge="right"] .seat-role-stack .dealer-role {
    transform: translate(-4px, -18px) !important;
  }

  body.holdem-cash-table-active .cash-table-topbar {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px 8px !important;
  }

  body.holdem-cash-table-active .cash-table-actions-top {
    width: 1px !important;
    height: 1px !important;
  }

  body.holdem-cash-table-active .cash-table-actions-top button {
    min-width: 54px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  body.holdem-cash-table-active #cashCardDeckSettingsBtn,
  body.holdem-cash-table-active .cash-card-deck-menu-btn {
    min-width: 62px !important;
  }

  body.holdem-cash-table-active #cashCardDeckSettingsBtn::after {
    content: "카드덱" !important;
    font-size: 12px !important;
  }

  body.holdem-cash-table-active .cash-table-menu-toggle {
    left: 10px !important;
    top: calc(var(--cash-appbar-offset) + var(--cash-appbar-h) + 8px) !important;
    width: 40px !important;
    height: 40px !important;
  }

  body.holdem-cash-table-active .cash-table-menu-popover {
    left: 10px !important;
    top: calc(var(--cash-appbar-offset) + var(--cash-appbar-h) + 54px) !important;
  }

  body.holdem-cash-table-active .cash-seat .name-pill,
  body.holdem-cash-table-active .cash-mobile-seat-card .mobile-player-panel {
    min-height: 34px !important;
    padding-top: 3px !important;
  }

  body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .holes .card {
    width: 24px !important;
    height: 34px !important;
  }

  body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .cash-hero-hand-label {
    font-size: 11px !important;
  }

  body.holdem-cash-table-active .cash-action-buttons {
    gap: 4px !important;
  }

  body.holdem-cash-table-active .cash-action-buttons button {
    min-height: 36px !important;
  }

  body.holdem-cash-table-active .cash-quick-bet-row {
    gap: 4px !important;
    margin-top: 3px !important;
  }

  body.holdem-cash-table-active .cash-quick-bet-row button {
    min-height: 28px !important;
    font-size: 11px !important;
  }

  body.holdem-cash-table-active .cash-bet-slider {
    grid-template-columns: 34px minmax(0, 1fr) 34px 46px !important;
    gap: 4px !important;
    min-height: 28px !important;
    margin-top: 3px !important;
  }

  body.holdem-cash-table-active .cash-bet-slider button,
  body.holdem-cash-table-active .cash-bet-slider output {
    min-height: 28px !important;
  }

  body.holdem-cash-table-active .cash-join-actions button {
    min-height: 48px;
    font-size: 15px;
  }
}

@media (max-height: 820px) {
  body.holdem-cash-table-active .cash-table-menu-toggle {
    top: calc(var(--cash-appbar-offset) + var(--cash-appbar-h) + 8px) !important;
  }

  body.holdem-cash-table-active .cash-table-menu-popover {
    top: calc(var(--cash-appbar-offset) + var(--cash-appbar-h) + 54px) !important;
  }
}

body.holdem-cash-table-active .cash-seat .action-badge {
  font-size: var(--cash-layout-action-badge-size, 12px) !important;
  transform: translate(calc(-50% + var(--cash-layout-action-badge-dx, 0px)), var(--cash-layout-action-badge-dy, 0px)) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .action-badge,
body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .action-badge.toact-badge,
body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]):not(.is-empty) .action-badge {
  font-size: var(--cash-layout-action-badge-size, 12px) !important;
  transform: translate(calc(-50% + var(--cash-layout-action-badge-dx, 0px)), var(--cash-layout-action-badge-dy, 0px)) !important;
}

body.holdem-cash-table-active .cash-seat .toact-badge .toact-sec {
  font-size: var(--cash-layout-action-badge-size, 11px) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .holes {
  transform: translate(var(--cash-layout-cards-dx, 0px), var(--cash-layout-cards-dy, 0px)) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="top-left"] .holes,
body.holdem-cash-table-active .cash-seat[data-display-slot="top-right"] .holes {
  left: 50% !important;
  top: calc(var(--cash-top-cards-top) + var(--cash-top-cards-y-offset)) !important;
  right: auto !important;
  gap: 4px !important;
  z-index: 7 !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="left-mid"] .holes {
  left: 50% !important;
  top: 0 !important;
  right: auto !important;
  gap: 4px !important;
  z-index: 7 !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .holes {
  transform: translate(calc(-50% + var(--cash-layout-cards-dx, 0px)), var(--cash-layout-cards-dy, 0px)) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .holes .card {
  width: var(--cash-layout-hero-hole-card-size, clamp(36px, 9.8vw, 42px)) !important;
  height: var(--cash-layout-hero-hole-card-height, clamp(50px, 13.4vw, 58px)) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .holes .card .rank {
  font-size: var(--cash-layout-hero-hole-card-rank-size, clamp(16px, 5vw, 22px)) !important;
}

body.holdem-cash-table-active .cash-seat[data-display-slot="hero"] .holes .card .suit {
  font-size: var(--cash-layout-hero-hole-card-suit-size, clamp(18px, 5.8vw, 26px)) !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .holes .card {
  width: var(--cash-layout-hole-card-size, clamp(22px, 6.1vw, 26px)) !important;
  height: var(--cash-layout-hole-card-height, clamp(30px, 8.4vw, 36px)) !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .holes .card .rank {
  font-size: var(--cash-layout-hole-card-rank-size, 13px) !important;
}

body.holdem-cash-table-active .cash-seat:not([data-display-slot="hero"]) .holes .card .suit {
  font-size: var(--cash-layout-hole-card-suit-size, 15px) !important;
}