/* ═══════════════════════════════════════════════════════════════
   Costanza Poker — Main Stylesheet
   Dark poker table aesthetic, inspired by modern online clients
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-dark:        #090d12;
  --bg-card:        #111620;
  --bg-card2:       #181e2a;
  --table-felt:     #1a4726;
  --table-felt2:    #153d20;
  --table-rim:      #5c3a1e;
  --table-rim2:     #c8944a;
  --table-rim3:     #7a4e28;

  /* Table color theme vars — overridden by data-table-color on body */
  --felt-primary:   #1a4726;
  --felt-secondary: #153d20;
  --felt-mid:       #1e5238;
  --felt-hi:        #28654a;
  --gold:           #c8944a;
  --gold-light:     #f0c060;
  --gold-dim:       #8a6030;
  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-muted:     #484f58;
  --green:          #3fb950;
  --red:            #f85149;
  --blue:           #58a6ff;
  --purple:         #bc8cff;
  --orange:         #ffa657;
  --chip-red:       #e03030;
  --chip-blue:      #2060d0;
  --chip-black:     #222;
  --chip-green:     #2a8a2a;
  --card-bg:        #fefcf7;
  --card-face:      #1a1a2e;
  --shadow:         0 8px 32px rgba(0,0,0,0.7);
  --shadow-lg:      0 16px 64px rgba(0,0,0,0.85);
  --radius:         12px;
  --radius-sm:      6px;
  --font:           'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:      'Roboto Mono', 'Courier New', monospace;
}

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

html, body {
  width: 100%; height: 100%;
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* ── Lobby ───────────────────────────────────────────────────── */

#lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,60,30,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at center, #0e1820 0%, var(--bg-dark) 70%);
  /* polished scrollbar for lobby overflow */
  scrollbar-width: thin;
  scrollbar-color: #2e3a4a transparent;
}
#lobby::-webkit-scrollbar { width: 5px; }
#lobby::-webkit-scrollbar-track { background: transparent; }
#lobby::-webkit-scrollbar-thumb { background: #2e3a4a; border-radius: 10px; }
#lobby::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.lobby-card {
  background: linear-gradient(160deg, rgba(18,24,36,0.98) 0%, rgba(12,16,24,0.98) 100%);
  border: 1px solid #252d3a;
  border-radius: var(--radius);
  padding: 2.5rem;
  width: 100%;
  max-width: 680px;
  margin: auto;
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.lobby-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.lobby-logo h1 {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #fff8e0 0%, var(--gold-light) 40%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(200,148,74,0.35));
}

.lobby-logo p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-top: 0.4rem;
  font-style: italic;
  letter-spacing: 0.3px;
}

.lobby-logo .suits {
  font-size: 1.8rem;
  letter-spacing: 8px;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 1px 4px rgba(200,148,74,0.3));
}

/* Mode selector */
.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mode-tab {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid #252d3a;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.75rem;
  text-align: center;
  transition: all 0.2s ease;
}

.mode-tab:hover { border-color: var(--gold); color: var(--gold); background: rgba(200,148,74,0.05); }
.mode-tab.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(200, 148, 74, 0.1);
  box-shadow: 0 0 12px rgba(200,148,74,0.15);
}

/* Forms */
.form-group { margin-bottom: 1rem; }

.form-group label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.form-group input {
  width: 100%;
  background: var(--bg-dark);
  border: 1px solid #30363d;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
  padding: 0.65rem 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus { border-color: var(--gold); }
.form-group input::placeholder { color: var(--text-muted); }

/* Buttons */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0.75rem 1.5rem;
  transition: all 0.15s;
  text-transform: uppercase;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), #a06820);
  color: #1a0e00;
  width: 100%;
}
.btn-primary:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.95); }

.btn-secondary {
  background: var(--bg-card2);
  border: 1px solid #30363d;
  color: var(--text-secondary);
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

.btn-danger { background: var(--red); color: #fff; }
.btn-green  { background: var(--green); color: #0d2009; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Join panel */
.join-panel { display: none; }
.join-panel.active { display: block; }

/* Game code display */
.game-code-box {
  background: var(--bg-dark);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-sm);
  color: var(--gold-light);
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 1rem 0;
  padding: 0.85rem;
  text-align: center;
  user-select: all;
}
.share-link-box {
  background: var(--bg-dark);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-sm);
  color: var(--gold-light);
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  word-break: break-all;
  margin: 1rem 0;
  padding: 0.75rem;
  text-align: center;
  user-select: all;
}

.waiting-msg {
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.waiting-msg .dot-anim::after {
  content: '';
  animation: dots 1.5s infinite;
}
@keyframes dots {
  0%   { content: ''; }
  33%  { content: '.'; }
  66%  { content: '..'; }
  100% { content: '...'; }
}

.error-msg {
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 0.88rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  display: none;
}
.error-msg.visible { display: block; }

/* ── Table Layout ────────────────────────────────────────────── */

#table-screen {
  display: none;
  flex-direction: column;
  height: 100vh;
  background: #0a0e14;
  overflow: hidden;
}

#table-screen.active { display: flex; }

.table-header {
  flex-shrink: 0;
  background: linear-gradient(180deg, #111620 0%, #0d1118 100%);
  border-bottom: 1px solid #1a1f2a;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.5rem;
  height: 40px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.4);
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.table-header .brand {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #fff0c0 0%, var(--gold-light) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  flex-shrink: 0;
}

.table-header .blind-info {
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(200,148,74,0.08);
  border: 1px solid rgba(200,148,74,0.3);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.table-header .hand-num {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.btn-header {
  background: transparent;
  border: 1px solid #2d3748;
  color: var(--text-secondary);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-header:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}
.btn-header--icon {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

/* ── Header nav group ─────────────────────────────────────────── */
.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Hamburger button — hidden on desktop ─────────────────────── */
.btn-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #2d3748;
  color: var(--text-secondary);
  width: 28px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-hamburger:hover,
.btn-hamburger[aria-expanded="true"] {
  border-color: var(--gold);
  color: var(--gold-light);
}

/* Table canvas area — fills all space between header and bottom zone */
.table-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 1rem;
  overflow: visible;
  position: relative;
  background:
    radial-gradient(ellipse at center, #0f1820 0%, var(--bg-dark) 70%);
}

.poker-table {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%,
      rgba(255,255,255,0.03) 0%,
      transparent 70%
    ),
    radial-gradient(ellipse at center,
      var(--felt-hi) 0%, var(--felt-mid) 30%, var(--felt-primary) 60%, var(--felt-secondary) 100%
    );
  border-radius: 50%;
  /* Triple border: outer highlight, main wood rim, inner dark border */
  border: 10px solid var(--table-rim);
  box-shadow:
    0 0 0 2px rgba(200,148,74,0.2),
    0 0 0 3px #3a2010,
    0 0 0 5px var(--table-rim2),
    0 0 0 7px #2a1808,
    inset 0 0 0 8px rgba(0,0,0,0.18),
    inset 0 0 80px rgba(0,0,0,0.5),
    inset 0 0 160px rgba(0,0,0,0.3),
    0 20px 80px rgba(0,0,0,0.8),
    var(--shadow-lg);
  width: min(780px, 92vw);
  aspect-ratio: 2/1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Felt texture overlay */
.poker-table::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='none'/%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(0,0,0,0.06)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Center logo / felt logo mark */
.poker-table::after {
  content: '♠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: rgba(255,255,255,0.035);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  letter-spacing: 0;
}

/* All direct children sit above felt overlays */
.poker-table > * { position: relative; z-index: 1; }

/* ── Bottom zone — action controls below the table ─────────────── */
.bottom-zone {
  flex-shrink: 0;
  height: 148px;     /* fixed: buttons(72) + sizing(38) + timer(20) + border(1) */
  background: #090d12;
  border-top: 1px solid #1a1f2a;
  position: relative;   /* log is absolute inside; action panel spans full width */
  overflow: hidden;
}

/* Left column: docked activity log — absolutely positioned so it doesn't affect centering */
.bottom-zone-log {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1a1f2a;
  background: #07090e;
  width: 220px;
  z-index: 2;
}

/* Full-width column: timer + action panel — centers relative to the whole viewport */
.bottom-zone-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Opponent (top) ──────────────────────────────────────────── */
.player-area {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* Spotlight behind the active player — breathes in sync with the plaque glow */
.player-area::before {
  content: '';
  position: absolute;
  inset: -40px -80px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(200,148,74,0.0) 0%,
    rgba(200,148,74,0.0) 100%
  );
  pointer-events: none;
  z-index: 0;
  transition: none;
}
.player-area.active-turn::before {
  animation: spotlightBreathe 1.8s ease-in-out infinite alternate;
}
@keyframes spotlightBreathe {
  from {
    background: radial-gradient(ellipse at center,
      rgba(200,148,74,0.07) 0%,
      rgba(200,148,74,0.03) 40%,
      transparent 70%
    );
  }
  to {
    background: radial-gradient(ellipse at center,
      rgba(200,148,74,0.18) 0%,
      rgba(200,148,74,0.07) 40%,
      transparent 70%
    );
  }
}

.player-area.opponent {
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
}

.player-area.self {
  bottom: -126px;
  left: 50%;
  transform: translateX(-50%);
}

.player-info-box {
  background: linear-gradient(160deg, rgba(18,24,36,0.97) 0%, rgba(12,16,26,0.97) 100%);
  border: 1.5px solid #2a3340;
  border-radius: 10px;
  padding: 0.45rem 0.85rem 0.45rem 0.55rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  min-width: 160px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  overflow: hidden; /* clip the timer bar to rounded corners */
}

/* ── In-plaque countdown timer bar ───────────────────────── */
.p-timer-bar-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  pointer-events: none;
}
.p-timer-bar-wrap.hidden {
  display: none;
}
.p-timer-bar {
  height: 100%;
  width: 100%;
  background: var(--green);
  border-radius: 0 0 10px 10px;
  transition: background 0.3s;
}
.p-timer-bar-wrap.warning .p-timer-bar {
  background: var(--red);
}

/* Avatar portrait circle */
.p-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
  background-color: #1e2535;
  border: 2px solid #2a3a50;
  display: block;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.player-info-box.active-turn .p-avatar-img {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(200,148,74,0.5);
}

/* Text column */
.p-info-text {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  align-items: start;
  min-width: 0;
  position: relative;
}

.player-info-box.active-turn {
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.2),
    0 0 22px rgba(200,148,74,0.5),
    0 4px 18px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(200,148,74,0.08);
  animation: activeTurnBreathe 1.8s ease-in-out infinite alternate;
}

@keyframes activeTurnPulse {
  /* legacy — superseded by activeTurnBreathe */
  0%, 100% { opacity: 1; }
  50%       { opacity: 1; }
}

/* Folded state: dim the whole box */
.player-info-box.is-folded {
  opacity: 0.48;
  border-color: #22282e;
  filter: saturate(0.4);
}

.player-info-box .p-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  max-width: 140px;
  overflow: hidden;
}

.player-info-box .p-name .p-name-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

/* Seat avatar — single letter circle to the left of name */
.p-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #1a0e00;
  font-size: 0.66rem;
  font-weight: 900;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0;
}

.p-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 2px;
}

/* .player-info-box .p-last-action styles defined in feature block below */

.player-info-box .p-stack {
  grid-row: 2;
  grid-column: 1;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gold-light);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* Remove old ::before empty content rule below */
.player-info-box .p-stack-low  { color: #f0a040; }
.player-info-box .p-stack-crit { color: var(--red); animation: stackCritPulse 1.6s ease-in-out infinite; }

@keyframes stackCritPulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.6; }
}

/* ── Action feed — top-right corner overlay ───────────────────── */
.action-feed {
  position: fixed;
  top: 3.2rem;       /* just below table header */
  right: 1rem;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 150;
  pointer-events: none;
}

.action-feed-item {
  background: rgba(10, 14, 20, 0.88);
  border: 1px solid rgba(200,148,74,0.35);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  animation: feedSlideIn 0.2s ease-out;
  transition: opacity 0.4s ease;
}

.action-feed-item.feed-opp {
  border-left-color: #e05050;
}

.action-feed-item .feed-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.action-feed-item .feed-action {
  color: var(--gold-light);
  font-weight: 700;
}

.action-feed-item.feed-opp .feed-action {
  color: #f07070;
}

@keyframes feedSlideIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* p-stack override for old rule removed — handled in redesign block above */

/* ── Emotes ──────────────────────────────────────────────────── */
.emote-trigger-btn {
  position: absolute;
  right: -11px;
  bottom: -11px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #2a3a50;
  background: rgba(13,17,23,0.92);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  z-index: 40;
  padding: 0;
}
.emote-trigger-btn:hover {
  border-color: var(--gold);
  background: rgba(200,148,74,0.14);
  color: var(--gold-light);
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(200,148,74,0.25);
}
.emote-trigger-btn.emote-open {
  border-color: var(--gold);
  background: rgba(200,148,74,0.18);
  color: var(--gold-light);
  transform: scale(1.08);
}
.emote-trigger-btn.emote-cooling {
  opacity: 0.4;
  pointer-events: none;
}

.emote-picker {
  position: absolute;
  left: calc(100% + 14px);
  bottom: -6px;
  background: #111820;
  border: 1.5px solid #2a3a50;
  border-radius: 14px;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
  transform-origin: left bottom;
  animation: emotePickerIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.emote-picker::after {
  content: '';
  position: absolute;
  left: -7px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  background: #111820;
  border-left: 1.5px solid #2a3a50;
  border-bottom: 1.5px solid #2a3a50;
  transform: rotate(45deg);
}
.emote-picker.hidden { display: none; }

@keyframes emotePickerIn {
  from { opacity: 0; transform: scale(0.72) translateX(-8px); }
  to   { opacity: 1; transform: scale(1)    translateX(0); }
}

.emote-picker-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 2px 2px;
  border-bottom: 1px solid #1e2d3d;
  margin-bottom: 2px;
}

.emote-picker-row {
  display: flex;
  gap: 4px;
}

.emote-opt {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,0.04);
  font-size: 1.45rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  padding: 0;
  line-height: 1;
}
.emote-opt:hover {
  background: rgba(200,148,74,0.15);
  border-color: var(--gold);
  transform: scale(1.2);
}

/* Avatar emote state — no visual change, overlay handles the display */
.p-avatar-img.avatar-emoting {
  transition: none;
}

/* Emoji overlay that sits on top of the avatar */
.avatar-emote-overlay {
  position: fixed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: #1e2535;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.avatar-emote-overlay.avatar-emote-visible {
  opacity: 1;
  transform: scale(1);
}

/* Avatar shake when hit by a throwable */
@keyframes avatarHit {
  0%   { transform: translate(0,0) rotate(0deg); }
  20%  { transform: translate(-5px,-3px) rotate(-6deg); }
  40%  { transform: translate(5px,2px) rotate(5deg); }
  60%  { transform: translate(-4px,-2px) rotate(-3deg); }
  80%  { transform: translate(3px,1px) rotate(2deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.p-avatar-img.avatar-hit {
  animation: avatarHit 0.45s ease-out;
}

/* Throwable projectile that flies across the screen */
.throwable-projectile {
  position: fixed;
  font-size: 3rem;
  line-height: 1;
  pointer-events: none;
  z-index: 9999;
  /* offset so the emoji is centred on the start point */
  transform: translate(-50%, -50%);
  animation: throwableFly 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes throwableFly {
  0%   { transform: translate(-50%,-50%) scale(1)    rotate(0deg);   opacity: 1; }
  50%  { transform: translate(calc(-50% + calc(var(--tx) * 0.5)),
                               calc(-50% + calc(var(--ty) * 0.5) - 60px))
                    scale(1.4) rotate(180deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)),
                               calc(-50% + var(--ty)))
                    scale(0.7) rotate(360deg); opacity: 0.2; }
}

/* Throwable row separator */
.emote-throwable-row {
  border-top: 1px solid #1e2d3d;
  padding-top: 4px;
  margin-top: 2px;
}
.emote-throwable {
  font-size: 2rem;
  position: relative;
}
.emote-throwable::after {
  content: '🎯';
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Whole plaque shakes when hit by a throwable */
@keyframes plaqueHit {
  0%   { transform: translate(0,0) rotate(0deg); }
  15%  { transform: translate(-8px,-4px) rotate(-4deg); }
  30%  { transform: translate(8px,3px) rotate(4deg); }
  50%  { transform: translate(-6px,-3px) rotate(-2deg); }
  70%  { transform: translate(5px,2px) rotate(2deg); }
  85%  { transform: translate(-3px,-1px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.player-info-box.plaque-hit {
  animation: plaqueHit 0.55s ease-out;
}

/* Confetti burst (pieces styled inline by JS) */
@keyframes confettiBurst {
  0%   { transform: translate(-50%,-50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)); opacity: 0; }
}
.confetti-piece {
  position: fixed; /* geometry + colour set inline by _launchConfetti() */
  pointer-events: none;
}

/* Leaderboard coming-soon notice */
.lb-coming-soon {
  display: block;
  font-size: 0.78rem;
  color: var(--gold-light, #f59e0b);
  opacity: 0.8;
  margin-bottom: 4px;
}

.p-badges {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 18px;
}

/* Chip count pill shown below hole cards */
.p-chips {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-light);
  background: rgba(13, 17, 23, 0.82);
  border: 1px solid rgba(200, 148, 74, 0.35);
  border-radius: 20px;
  padding: 1px 10px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.p-chips.p-chips-bust {
  color: var(--red);
  border-color: rgba(248, 81, 73, 0.4);
}

.badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
}

.badge-btn  { background: var(--gold);   color: #000; }
.badge-sb   { background: #444;          color: var(--text-secondary); }
.badge-bb   { background: #333;          color: var(--text-secondary); }
.badge-allin{ background: var(--red);    color: #fff; }
.badge-fold { background: #333;          color: var(--text-muted);    }
.badge-dealer { background: #fff;        color: #000; font-weight:900; }

/* Hole cards */
.hole-cards {
  display: flex;
  gap: 6px;
}
/* Omaha: 4 hole cards — shrink to fit */
.hole-cards[data-variant="omaha"] .card {
  width: 42px;
  height: 62px;
}
.hole-cards[data-variant="omaha"] .card .rank {
  font-size: 1.35rem;
  top: 3px;
  left: 4px;
  letter-spacing: -1px;
}
.hole-cards[data-variant="omaha"] .card .suit {
  font-size: 1.45rem;
}
.hole-cards[data-variant="omaha"] {
  gap: 4px;
}

/* Wrapper that holds hole-cards side by side */
.card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* ── Dealer button — pinned to the top-right corner of the plaque ── */
.dealer-btn-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff 0%, #d8d8d8 60%, #bbb 100%);
  color: #111;
  font-size: 0.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 0 0 2px #c8944a, 0 0 0 4px rgba(200,148,74,0.3), inset 0 1px 2px rgba(255,255,255,0.6);
  user-select: none;
  z-index: 35;
  /* sit on the top-right corner of the plaque */
  right: -11px;
  top: -11px;
  transition: opacity 0.2s ease;
}
.dealer-btn-corner.hidden { display: none; }

/* ── Blind labels — left of info-box, symmetric to dealer btn ─── */
.blind-label {
  position: absolute;
  min-width: 30px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 6px;
  user-select: none;
  z-index: 30;
  /* bottom-left corner of plaque — mirrors dealer-btn at top-right */
  left: -4px;
  bottom: -11px;
  transition: opacity 0.3s ease;
}

.blind-label.hidden { opacity: 0; pointer-events: none; }

/* Variant classes kept for JS compatibility — no-op now that labels are plaque-relative */
.blind-label--top,
.blind-label--bottom,
.blind-label--plaque { /* anchor handled by .blind-label base rule */ }

.blind-label.is-sb {
  background: #3a3010;
  border: 1px solid #a07020;
  color: #d4a030;
}

.blind-label.is-bb {
  background: #102030;
  border: 1px solid #206890;
  color: #40a0d0;
}

/* BB with ante: slightly wider, ante sub-tag in gold */
.blind-label.is-bb-ante {
  gap: 4px;
  padding: 0 5px 0 6px;
}
.blind-ante-tag {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #d4a030;
  background: rgba(212,160,48,0.15);
  border: 1px solid rgba(212,160,48,0.4);
  border-radius: 5px;
  padding: 1px 3px;
  line-height: 1;
}

/* ── Chip bet stacks in front of each player ─────────────────── */
/* Wrapper — position:relative so dealer-btn-corner can anchor to plaque corner */
.plaque-row {
  position: relative;
  display: inline-flex;   /* shrink-wrap to plaque width */
  flex-direction: row;
  align-items: center;
}

/* Bet stack — absolutely positioned beside the plaque, on the felt */
.bet-stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 25;
  transition: opacity 0.2s ease;
  pointer-events: none;
  /* allow ante label to be positioned relative to this container */
  /* (already position:absolute on the plaque-row, so children use it as anchor) */
}

/* Top player (opponent): bet stack to the LEFT of plaque, 50px below bottom */
.bet-stack--top {
  right: calc(100% + 20px);
  bottom: -50px;
  top: auto;
  left: auto;
  transform: none;
}
.bet-stack--top.is-allin {
  bottom: -74px; /* shift down 24px more to clear the larger tower */
}
/* Top player ante stack: to the RIGHT, vertically aligned with bet stack */
.bet-stack--ante-top {
  left: calc(100% + 20px);
  bottom: -50px;
  top: auto;
  right: auto;
  transform: none;
}

/* Bottom player (self): bet stack to the right of plaque, top-aligned */
.bet-stack--bottom {
  left: calc(100% + 30px);
  top: 0;
  bottom: auto;
  transform: none;
}
.bet-stack--bottom.is-allin {
  top: -10px; /* shift up 10px for taller all-in stack */
}
/* Bottom player ante stack: to the LEFT of plaque, top-aligned with bet stack */
.bet-stack--ante-bottom {
  right: calc(100% + 24px);
  top: 0;
  bottom: auto;
  transform: none;
}

/* Ante label — styled identically to .blind-label.is-bb, sits below chip tower */
.ante-stack-label {
  min-width: 30px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 6px;
  white-space: nowrap;
  user-select: none;
  margin-top: 4px;
  background: #102030;
  border: 1px solid #206890;
  color: #40a0d0;
  text-shadow: none;
  font-family: inherit;
}

.bet-stack.hidden { display: none; }

@keyframes stackPopIn {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.65); }
  65%  { transform: translateY(-50%) scale(1.07); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

.bet-stack:not(.hidden) {
  animation: stackPopIn 0.22s ease-out both;
}

/* ── Amount label below tower ──────────────────────── */
.bet-stack-amount {
  font-size: 0.78rem;
  font-weight: 900;
  color: #ffe88a;
  white-space: nowrap;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(200,148,74,0.45);
  border-radius: 10px;
  padding: 2px 7px;
  margin-top: 4px;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 4px rgba(0,0,0,1);
  font-family: 'Courier New', monospace;
}

/* The chip tower — horizontal row of per-denomination columns */
.chip-tower {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 3px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.85));
}

/* One vertical column of same-denomination chips */
.chip-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/*
  Professional top-down poker chip:
  - Circle with edge notch pattern (conic-gradient dashes around rim)
  - Outer ring in chip color
  - Inner white band
  - Center face in chip color
  - ::before = notch/dash ring around edge
  - ::after  = center inlay circle
*/
.chip-disc {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 1px 1px rgba(0,0,0,0.9),
    inset 0 1px 1px rgba(255,255,255,0.18);
}

/* Stack overlap — chips within a column overlap tightly */
.chip-col .chip-disc:not(:last-child) {
  margin-bottom: -13px;
}

/* Notch ring — white dashes around the outer rim (classic clay chip edge marks) */
.chip-disc::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 50%;
  /* 8 white notch dashes evenly spaced around the edge */
  background: conic-gradient(
    rgba(255,255,255,0.80)  0deg   8deg,
    transparent             8deg  45deg,
    rgba(255,255,255,0.80)  45deg  53deg,
    transparent             53deg  90deg,
    rgba(255,255,255,0.80)  90deg  98deg,
    transparent             98deg 135deg,
    rgba(255,255,255,0.80) 135deg 143deg,
    transparent            143deg 180deg,
    rgba(255,255,255,0.80) 180deg 188deg,
    transparent            188deg 225deg,
    rgba(255,255,255,0.80) 225deg 233deg,
    transparent            233deg 270deg,
    rgba(255,255,255,0.80) 270deg 278deg,
    transparent            278deg 315deg,
    rgba(255,255,255,0.80) 315deg 323deg,
    transparent            323deg 360deg
  );
  pointer-events: none;
}

/* Center inlay circle — slightly lighter chip color face */
.chip-disc::after {
  content: '';
  position: absolute;
  inset: 4.5px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.45);
}

/* ── Denomination colours ───────────────────────────────── */

/* White / $1 */
.chip-disc.c-white {
  background: radial-gradient(circle at 38% 35%, #f0f0f0 0%, #c8c8c8 60%, #a0a0a0 100%);
  border: 2px solid #b0b0b0;
}
.chip-disc.c-white::before { /* grey notches */ }
.chip-disc.c-white::after  { background: radial-gradient(circle at 40% 35%, #e8e8e8, #bdbdbd); }

/* Red / $5 */
.chip-disc.c-red {
  background: radial-gradient(circle at 38% 35%, #f03030 0%, #c01010 60%, #800000 100%);
  border: 2px solid #a01010;
}
.chip-disc.c-red::after { background: radial-gradient(circle at 40% 35%, #f05050, #c02020); }

/* Blue / $10 */
.chip-disc.c-blue {
  background: radial-gradient(circle at 38% 35%, #4488ff 0%, #1a50d8 60%, #0a2880 100%);
  border: 2px solid #1040c0;
}
.chip-disc.c-blue::after { background: radial-gradient(circle at 40% 35%, #5599ff, #1a50d8); }

/* Green / $25 */
.chip-disc.c-green {
  background: radial-gradient(circle at 38% 35%, #3ab855 0%, #1a8030 60%, #0a4818 100%);
  border: 2px solid #157028;
}
.chip-disc.c-green::after { background: radial-gradient(circle at 40% 35%, #40cc60, #1a8030); }

/* Orange / $50 */
.chip-disc.c-orange {
  background: radial-gradient(circle at 38% 35%, #ff8c20 0%, #d45f00 60%, #8a3a00 100%);
  border: 2px solid #c05800;
}
.chip-disc.c-orange::after { background: radial-gradient(circle at 40% 35%, #ffa040, #d46010); }

/* Black / $100 */
.chip-disc.c-black {
  background: radial-gradient(circle at 38% 35%, #505050 0%, #1c1c1c 60%, #050505 100%);
  border: 2px solid #c8944a;
}
.chip-disc.c-black::before {
  inset: 1.5px;
  background: conic-gradient(
    rgba(200,148,74,0.90)  0deg   8deg,
    transparent             8deg  45deg,
    rgba(200,148,74,0.90)  45deg  53deg,
    transparent             53deg  90deg,
    rgba(200,148,74,0.90)  90deg  98deg,
    transparent             98deg 135deg,
    rgba(200,148,74,0.90) 135deg 143deg,
    transparent            143deg 180deg,
    rgba(200,148,74,0.90) 180deg 188deg,
    transparent            188deg 225deg,
    rgba(200,148,74,0.90) 225deg 233deg,
    transparent            233deg 270deg,
    rgba(200,148,74,0.90) 270deg 278deg,
    transparent            278deg 315deg,
    rgba(200,148,74,0.90) 315deg 323deg,
    transparent            323deg 360deg
  );
}
.chip-disc.c-black::after  { background: radial-gradient(circle at 40% 35%, #484848, #181818); }

/* Community cards */
.community-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 28px;
}

/* Center column — round badge + board cards + pot pill */
.community-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Left/right side columns flanking the board */
.pot-chips-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
}
.pot-chips-spacer { visibility: hidden; }

/* The chip pill for the pot */
.pot-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* Pot chip tower — slightly wider column gap for the larger pot display */
.pot-chip-tower {
  gap: 4px;
}

.pot-chips-amount {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold-light);
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(200,148,74,0.35);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
  margin-top: 2px;
}

/* Per-street tally line */
.pot-breakdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.4;
}

.sb-entry {
  display: inline;
  color: var(--text-secondary);
}
.sb-entry em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-primary);
}
.sb-entry.sb-current em {
  color: var(--gold-light);
}
.sb-dot {
  margin: 0 3px;
  color: var(--text-muted);
}

.community-cards {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── Playing Card ────────────────────────────────────────────── */
.card {
  background: linear-gradient(160deg, #fefcf7 0%, #f5f0e8 100%);
  border-radius: 7px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.18),
    2px 4px 10px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.9);
  color: #1a1a2e;
  display: block;
  font-weight: 900;
  height: 96px;
  width: 68px;
  position: relative;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
}

.card.lg {
  height: 118px;
  width: 84px;
}

.card.sm {
  height: 72px;
  width: 50px;
}

.card.back {
  background: linear-gradient(150deg, #1e3f96 0%, #0f1d5e 50%, #0a1240 100%);
  color: transparent;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    2px 4px 10px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.card.back::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

.card.back::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 6px
    );
}

.card.empty {
  background: rgba(255,255,255,0.05);
  border: 2px dashed rgba(255,255,255,0.1);
  box-shadow: none;
}

/* Top-left rank */
.card .rank {
  position: absolute;
  top: 5px;
  left: 6px;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}
.card.lg .rank { font-size: 2.7rem; top: 6px; left: 8px; }
.card.sm .rank { font-size: 1.7rem; top: 4px; left: 5px; }

/* Large centered suit pip */
.card .suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.43rem;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}
.card.lg .suit { font-size: 2.97rem; }
.card.sm .suit { font-size: 1.8rem; }

.card .corner { display: none; }

.card.red  { color: #c41a1a; }

/* ── Pot display — pill badge in table centre ─────────────────── */
.pot-area {
  text-align: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pot-area.pot-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.88);
}

/* Single pill that reads "Pot: 750" */
.pot-total {
  display: inline-block;
  background: linear-gradient(135deg, rgba(20,12,4,0.88), rgba(12,8,2,0.88));
  border: 1px solid rgba(200,148,74,0.55);
  border-radius: 24px;
  color: var(--gold-light);
  font-size: 0.9rem;
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 16px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 8px rgba(200,148,74,0.15);
}

.pot-total::before { content: 'Pot\00a0'; color: rgba(200,148,74,0.6); font-weight: 600; font-family: var(--font); font-size: 0.76rem; }

/* ── Chip sweep animation — stacks slide toward pot center ──── */
/* bottom stack is RIGHT of self plaque → sweep left + up toward pot   */
@keyframes chipSweepToCenter_bottom {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-80px) translateX(-140px) scale(0.3); }
}
/* top stack is LEFT of opp plaque → sweep right + down toward pot     */
@keyframes chipSweepToCenter_top {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(80px) translateX(140px) scale(0.3); }
}
.bet-stack--bottom.sweeping {
  animation: chipSweepToCenter_bottom 0.38s ease-in forwards;
  pointer-events: none;
}
.bet-stack--top.sweeping {
  animation: chipSweepToCenter_top 0.38s ease-in forwards;
  pointer-events: none;
}

/* ── Pot pulse when chips land ─────────────────────────────── */
@keyframes potPulse {
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(1.18); filter: brightness(1.4); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.pot-area.pot-pulse .pot-total {
  animation: potPulse 0.45s ease-out;
}

/* ── Pot-push-to-player animation (fires when local player wins) ─── */
/* A cloned chip tower is absolutely positioned over the table and flies
   from the pot area down toward the self plaque, then fades out.       */
.pot-push-clone {
  position: absolute;
  pointer-events: none;
  z-index: 80;
  transform-origin: center bottom;
  will-change: transform, opacity;
}

@keyframes potPushFly {
  0%   { opacity: 1;   transform: translate(0, 0)          scale(1);    }
  60%  { opacity: 1;   transform: translate(var(--pp-dx), calc(var(--pp-dy) * 0.6)) scale(1.18); }
  100% { opacity: 0;   transform: translate(var(--pp-dx), var(--pp-dy)) scale(0.55); }
}
.pot-push-clone.flying {
  animation: potPushFly 0.65s cubic-bezier(0.4, 0, 0.8, 1) forwards;
}

/* Pot area shrinks away as chips leave */
@keyframes potShrinkOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.35); }
}
.pot-area.pot-pushing {
  animation: potShrinkOut 0.5s ease-in forwards;
  pointer-events: none;
}

/* Stack number counter flash on the winning player's plaque */
@keyframes stackWinPop {
  0%   { transform: scale(1);    color: var(--gold-light); }
  35%  { transform: scale(1.35); color: #ffe060;           filter: brightness(1.6); }
  100% { transform: scale(1);    color: var(--gold-light); }
}
.p-stack.win-pop {
  animation: stackWinPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Winner banner — absolute inside poker-table, near winning player ── */
.winner-banner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(160deg, rgba(14,10,4,0.97) 0%, rgba(8,6,2,0.97) 100%);
  border: 1px solid rgba(200,148,74,0.6);
  border-radius: 12px;
  padding: 0.55rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  z-index: 70;
  pointer-events: none;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.12),
    0 6px 32px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.06);
  white-space: nowrap;
}
.winner-banner.wb-hidden { display: none; }

/* Win banner: gold glow border */
.winner-banner.wb-win-glow {
  border-color: rgba(200,148,74,0.8);
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.3),
    0 0 24px rgba(200,148,74,0.3),
    0 6px 32px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(200,148,74,0.12);
}

/* Above opponent area (opp wins) */
.winner-banner.wb-pos-top {
  top: -152px;
  animation: wbSlideDown 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Below self area (I win) */
.winner-banner.wb-pos-bottom {
  bottom: -166px;
  animation: wbSlideUp 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Split — centered on felt */
.winner-banner.wb-pos-center {
  top: 50%;
  transform: translate(-50%, -50%);
  animation: wbPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes wbSlideDown {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.88); }
  70%  { transform: translateX(-50%) translateY(2px) scale(1.02); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes wbSlideUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.88); }
  70%  { transform: translateX(-50%) translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes wbPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.80); }
  65%  { transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.wb-title {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}
.wb-win   {
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(240,192,96,0.7), 0 0 40px rgba(200,148,74,0.4);
}
.wb-lose  { color: #f08080; }
.wb-split { color: #80c8ff; }

.wb-hands {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
  border-left: 1px solid rgba(255,255,255,0.08);
  padding-left: 1.2rem;
}
.wb-you  { color: #6ddd78; font-weight: 700; }
.wb-opp  { color: #e07070; font-weight: 700; }

/* Current bets */
.current-bets {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 0.25rem 0;
}

.bet-chip {
  background: var(--bg-dark);
  border: 1px solid #333;
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 2px 10px;
}

.bet-chip span { color: var(--gold); font-weight: 700; }

/* Round indicator */
.round-badge {
  background: rgba(200, 148, 74, 0.1);
  border: 1px solid rgba(200, 148, 74, 0.35);
  border-radius: 24px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 14px;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(200,148,74,0.1);
}

/* Street announcement banner */
/* ── Table toast — blind-up notice ────────────────────────────
   Appears at a fixed mid-table position, same visual weight as
   the street-announce banner. Uses a single shared animation. */
.blind-up-notice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(160deg, rgba(14,10,4,0.97), rgba(8,6,2,0.97));
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  color: var(--gold-light);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 0.5rem 1.8rem;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  z-index: 55;
  opacity: 0;
  display: none;
}
.blind-up-notice.show {
  display: block;
  animation: streetPop 2.6s forwards;
}

.street-announce {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(160deg, rgba(14,10,4,0.95), rgba(8,6,2,0.95));
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  color: var(--gold-light);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 3px;
  padding: 0.45rem 1.6rem;
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 50;
}
.street-announce.show {
  animation: streetPop 1.4s forwards;
}
@keyframes streetPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.65); text-shadow: none; }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); text-shadow: 0 0 24px rgba(200,148,74,0.5); }
  32%  { transform: translate(-50%, -50%) scale(0.98); }
  40%  { transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* Card deal-in animation — used for hole cards and community cards */
@keyframes cardDealIn {
  0%   { opacity: 0; transform: translateY(-24px) rotateY(40deg) scale(0.78); }
  60%  { transform: translateY(3px) rotateY(-4deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotateY(0deg) scale(1); }
}
.card.deal-in {
  animation: cardDealIn 0.32s cubic-bezier(0.22, 0.8, 0.36, 1) both;
}

/* Legacy class — kept for compat */
.card.new-card {
  animation: cardDealIn 0.32s cubic-bezier(0.22, 0.8, 0.36, 1) both;
}

/* ── Action panel ───────────────────────────────────────────── */
.action-panel {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: none;
  overflow: hidden;
  min-height: 0;
}

/* Button row: buttons truly centered on the full width; hand panel pinned to right edge */
.action-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #090d12;
  min-height: 80px;
  position: relative;
  justify-content: center;
}

/* Thin status strip — hidden */
.action-status-strip {
  display: none;
}
/* LEFT — status: moved above the button row as a full-width strip */
.action-status-col {
  display: none;
}

.action-status-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
}
.action-status-label.my-turn {
  color: var(--gold-light);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(200,148,74,0.3);
}
.action-status-label.opp-turn {
  color: var(--text-muted);
}

/* CENTER — button grid + sizing row — fixed width, truly centered via margin auto */
.action-btns-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 430px;
  flex-shrink: 0;
  margin: 0 auto;
}

/* 2×2 (or 1×2) grid of equal-sized action buttons */
.action-btn-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 8px 10px;
  background: #0a0e14;
  border-bottom: 1px solid #1a1f2a;
}

.btn-action {
  flex: 1 1 0;
  min-width: 76px;
  max-width: 120px;
  height: 56px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: filter 0.1s ease, transform 0.08s ease, box-shadow 0.1s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  white-space: pre-line;
  position: relative;
  overflow: hidden;
}

/* Subtle top-edge highlight for depth */
.btn-action::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.12);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

.btn-fold {
  background: linear-gradient(160deg, #8a2020 0%, #5c1212 100%);
  border-color: rgba(220,60,60,0.3);
  color: #ffa0a0;
}
.btn-check {
  background: linear-gradient(160deg, #1e2535 0%, #141924 100%);
  border-color: rgba(100,120,160,0.3);
  color: #8ea8c8;
}
.btn-call {
  background: linear-gradient(160deg, #1e4822 0%, #122e14 100%);
  border-color: rgba(60,180,80,0.3);
  color: #7ee898;
}
.btn-bet {
  background: linear-gradient(160deg, #1e3d7a 0%, #10234a 100%);
  border-color: rgba(80,140,255,0.3);
  color: #80b0ff;
}
.btn-raise {
  background: linear-gradient(160deg, #4a2a80 0%, #2c1454 100%);
  border-color: rgba(160,100,255,0.4);
  color: #c090ff;
}
.btn-allin {
  background: linear-gradient(160deg, #8a1a1a 0%, #6a0000 100%);
  border-color: rgba(255,60,60,0.45);
  color: #ffaaaa;
  letter-spacing: 0.3px;
}

.btn-action:hover:not(:disabled) {
  filter: brightness(1.28);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.btn-action:active:not(:disabled) {
  filter: brightness(0.82);
  transform: translateY(0);
  box-shadow: none;
}
.btn-action:disabled { opacity: 0.25; cursor: not-allowed; }

/* Fold is slightly less prominent when disabled */
.btn-fold:disabled { opacity: 0.2; }

/* Sizing row — below buttons, always occupies space to prevent layout jump */
.sizing-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #0a0e14;
  border-top: 1px solid #1a1f2a;
  height: 38px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.sizing-row.hidden {
  visibility: hidden !important;
  display: flex !important;   /* override global .hidden display:none — must keep height */
  pointer-events: none;
}

.sizing-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* RIGHT — hand strength: absolutely pinned so it doesn't offset button centering */
.action-hand-col {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.75rem;
  border-left: 1px solid #1a1f2a;
  gap: 0.5rem;
  width: 240px;
  overflow: hidden;
}

.action-hand-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 2px;
}

.action-hand-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.action-hand-value {
  font-size: 0.88rem;
  font-weight: 800;
  color: #7ee8a2;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.action-hand-value.weak  { color: #e07070; }
.action-hand-value.mid   { color: #e0c060; }
.action-hand-value.empty { color: var(--text-muted); font-weight: 400; font-size: 0.78rem; }

/* Best-5 mini cards in action hand panel — small but real casino card style */
.action-hand-cards {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}
.ahc-card {
  width: 22px;
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(160deg, #fefcf7 0%, #f0ebe0 100%);
  border: 1px solid rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 5px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.8);
  user-select: none;
  flex-shrink: 0;
  position: relative;
}
.ahc-card.red   { color: #c41a1a; }
.ahc-card.black { color: #1a1a1a; }
.ahc-card.facedown { background: linear-gradient(150deg, #1e3f96 0%, #0a1240 100%); border-color: #2d4a7a; }
.ahc-rank { font-size: 0.75rem; line-height: 1; letter-spacing: -0.5px; }
.ahc-suit { font-size: 0.7rem; line-height: 1; }

/* — keep old raise-col / raise-sizing / btn-raise-big harmless — */
.raise-col    { display: contents; }
.raise-sizing { display: none; }
.btn-raise-big { display: none; }

/* Bet sizing controls */
.bet-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.bet-controls label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.bet-slider {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, var(--gold) var(--pct, 0%), #2a3040 var(--pct, 0%));
  border-radius: 4px;
  cursor: pointer;
  height: 5px;
  outline: none;
  flex: 1;
  min-width: 80px;
}
.bet-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: radial-gradient(circle at 40% 35%, #f8d888, var(--gold));
  border: 2px solid rgba(0,0,0,0.4);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  cursor: pointer;
  height: 16px;
  width: 16px;
}
.bet-slider::-moz-range-thumb {
  background: var(--gold);
  border: 2px solid rgba(0,0,0,0.4);
  border-radius: 50%;
  cursor: pointer;
  height: 16px;
  width: 16px;
}

.bet-input {
  background: #0d1117;
  border: 1px solid #2a3040;
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 0.9rem;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0.28rem 0.45rem;
  text-align: center;
  width: 68px;
  flex-shrink: 0;
}
.bet-input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px rgba(200,148,74,0.2); }

/* Quick bet buttons */
.quick-bets {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.btn-quick {
  background: rgba(200,148,74,0.08);
  border: 1px solid rgba(200,148,74,0.25);
  border-radius: 16px;
  color: var(--gold);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  transition: all 0.12s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.btn-quick:hover {
  background: rgba(200,148,74,0.2);
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-1px);
}
.btn-quick:active { transform: translateY(0); }

/* ── Game-over panel — replaces action buttons when match ends ── */
.game-over-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 0 0.25rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.game-over-title {
  font-size: 1.3rem;
  font-weight: 800;
}

.game-over-title.win  { color: var(--gold-light); }
.game-over-title.lose { color: var(--red); }

.game-over-btns {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Activity log — docked left panel in bottom bar ──────────────────────── */
.activity-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  overflow: hidden;
  min-height: 0;
  transition: opacity 0.2s ease;
}

.activity-log.hidden {
  opacity: 0;
  pointer-events: none;
}

.activity-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid #1a1f2a;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gold);
  flex-shrink: 0;
  cursor: default;
  user-select: none;
  background: rgba(200,148,74,0.04);
}

.activity-log-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s;
}
.activity-log-toggle:hover { color: var(--text-secondary); }

.activity-log-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.2rem 0;
  scrollbar-width: thin;
  scrollbar-color: #30363d transparent;
}

.activity-log-body::-webkit-scrollbar { width: 3px; }
.activity-log-body::-webkit-scrollbar-track { background: transparent; }
.activity-log-body::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }

/* Collapsed: hide the body, log column shrinks to header only */
.activity-log.collapsed .activity-log-body { display: none; }

/* Left log column width transitions for open/close */
.bottom-zone-log {
  transition: width 0.22s ease;
  overflow: hidden;
}
.bottom-zone-log.log-collapsed {
  width: 80px;
}

.activity-log-entry {
  padding: 0.12rem 0.5rem;
  line-height: 1.45;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-log-entry.al-hand-divider {
  color: #3d4a5c;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 0.35rem;
  margin-top: 0.1rem;
  border-left: none;
  border-top: 1px solid #1a1f2a;
}

.activity-log-entry.al-street {
  color: #4a7a9b;
  font-size: 0.70rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-top: 0.30rem;
  padding-bottom: 0.05rem;
  margin-top: 0.15rem;
  border-left: 2px solid #2a4a6a;
  border-top: none;
}

.activity-log-entry.al-action {
  color: var(--text-secondary);
}

.activity-log-entry.al-result {
  font-weight: 700;
  border-left-color: var(--gold);
  color: var(--gold-light);
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.activity-log-entry.al-result.al-lose {
  border-left-color: var(--red);
  color: #e06060;
}

.activity-log-entry.al-result.al-split {
  border-left-color: var(--blue);
  color: var(--blue);
}

.activity-log-entry.al-cards {
  color: #556070;
  font-size: 0.72rem;
  padding-bottom: 0.25rem;
}

/* mobile block consolidated below — see ═══ MOBILE ═══ section */

/* ── Status bar — kept for JS compat but visually hidden ─────── */
.status-bar { display: none; }


/* ── Chip stack display ──────────────────────────────────────── */
.chip-stack {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 4px;
}

.chip {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: inline-block;
  height: 18px;
  width: 18px;
}

.chip-1    { background: #aaa; }
.chip-5    { background: #c82020; }
.chip-25   { background: #2060c0; }
.chip-100  { background: #1a7a1a; }
.chip-500  { background: #6030c0; }
.chip-1000 { background: #222; border-color: var(--gold); }

/* ── Waiting for opponent ────────────────────────────────────── */
.waiting-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.85);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.waiting-content {
  text-align: center;
}

.waiting-content h3 {
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.waiting-content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.spinner {
  border: 3px solid #333;
  border-top-color: var(--gold);
  border-radius: 50%;
  height: 36px;
  width: 36px;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 1rem;
}

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

/* ── Desktop lobby layout — side-by-side config columns ─────── */
@media (min-width: 769px) {
  .config-row {
    flex-direction: row;
    align-items: stretch;
  }
  .config-col {
    flex: 1;
  }
}

/* ── Desktop lobby: side-by-side config columns ─────────────── */
@media (min-width: 769px) {
  .config-row     { flex-direction: row; align-items: stretch; }
  .config-col     { flex: 1; }
}

/* ── Responsive ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   MOBILE  —  max-width: 768px
   Only adjusts scaling, spacing, font sizes, and positioning.
   Desktop and tablet layouts are completely untouched.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Base font ─────────────────────────────────────────────── */
  html, body { font-size: 13px; }

  /* ── Table header ──────────────────────────────────────────── */
  .table-header {
    height: 36px;
    padding: 0 0.6rem;
  }
  .table-header .brand       { font-size: 0.82rem; letter-spacing: 1px; }
  .table-header .blind-info  { font-size: 0.68rem; padding: 2px 7px; }
  .table-header .hand-num    { font-size: 0.65rem; }

  /* ── Hamburger + dropdown nav ──────────────────────────────── */
  .btn-hamburger {
    display: flex;
  }
  .header-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 36px;
    right: 0.6rem;
    background: #111620;
    border: 1px solid #2d3748;
    border-radius: var(--radius-sm);
    padding: 0.35rem;
    gap: 4px;
    z-index: 200;
    min-width: 165px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  }
  .header-nav.open {
    display: flex;
  }
  .header-nav .btn-header {
    width: 100%;
    text-align: left;
    font-size: 0.78rem;
    padding: 0.4rem 0.65rem;
  }

  /* ── Table canvas area ─────────────────────────────────────── */
  .table-area {
    padding: 4.5rem 0.5rem 3.5rem;
  }

  /* ── Poker table oval ──────────────────────────────────────── */
  .poker-table {
    width: min(96vw, 420px);
    aspect-ratio: 2 / 1;
    border-width: 7px;
  }
  .poker-table::after { font-size: 2.8rem; }

  /* ── Player areas — tighter offsets ────────────────────────── */
  .player-area.opponent { top: -82px; }
  .player-area.self     { bottom: -88px; }

  /* ── Player info plaque ─────────────────────────────────────── */
  .player-info-box {
    min-width: 130px;
    padding: 0.35rem 0.6rem 0.35rem 0.4rem;
    gap: 0.45rem;
    border-radius: 8px;
  }
  .p-avatar-img      { width: 38px; height: 38px; }
  .p-name-text       { font-size: 0.72rem; max-width: 80px; }
  .p-stack           { font-size: 0.82rem; }
  .p-last-action     { font-size: 0.65rem; }

  /* Dealer button */
  .dealer-btn-corner { width: 18px; height: 18px; font-size: 0.52rem; right: -9px; top: -9px; }

  /* Blind label */
  .blind-label       { height: 17px; font-size: 0.6rem; padding: 0 4px; bottom: -9px; }

  /* Emote button — stays but tucks closer */
  .emote-trigger-btn { right: -9px; bottom: -9px; width: 24px; height: 24px; font-size: 0.9rem; }

  /* ── Bet / ante chip stacks ─────────────────────────────────── */
  .chip-disc         { width: 14px; height: 14px; }
  .chip-col .chip-disc:not(:last-child) { margin-bottom: -10px; }
  .bet-stack-amount  { font-size: 0.66rem; padding: 1px 5px; }
  .ante-stack-label  { height: 17px; font-size: 0.6rem; padding: 0 4px; }

  /* Stack positions — pull inward so they sit on the felt, not off-screen */
  .bet-stack--top         { right: calc(100% + 20px); bottom: -50px; top: auto; left: auto; }
  .bet-stack--ante-top    { left: calc(100% + 20px);  bottom: -50px; top: auto; right: auto; }
  .bet-stack--bottom      { left: calc(100% + 18px);  top: 0; bottom: auto; }
  .bet-stack--ante-bottom { right: calc(100% + 14px); top: 0; bottom: auto; }

  /* ── Community area ─────────────────────────────────────────── */
  .community-area   { gap: 0.4rem; margin-top: 16px; }
  .pot-chips-side   { min-width: 44px; }
  .community-cards  { gap: 5px; }

  /* ── Standard cards ─────────────────────────────────────────── */
  .card             { height: 58px; width: 40px; border-radius: 5px; }
  .card .rank       { font-size: 1.6rem; top: 3px; left: 4px; }
  .card .suit       { font-size: 1.75rem; }
  .card.lg          { height: 74px; width: 52px; }
  .card.lg .rank    { font-size: 1.95rem; top: 4px; left: 5px; }
  .card.lg .suit    { font-size: 2.1rem; }
  .card.sm          { height: 50px; width: 34px; }
  .card.sm .rank    { font-size: 1.2rem; top: 2px; left: 3px; }
  .card.sm .suit    { font-size: 1.3rem; }

  /* Omaha hole cards — 4 cards on a narrow screen */
  .hole-cards[data-variant="omaha"] .card { width: 32px; height: 48px; }
  .hole-cards[data-variant="omaha"] .card .rank { font-size: 1.0rem; top: 2px; left: 3px; }
  .hole-cards[data-variant="omaha"] .card .suit { font-size: 1.1rem; }

  /* ── Pot pill ───────────────────────────────────────────────── */
  .pot-total      { font-size: 0.75rem; padding: 3px 11px; }
  .round-badge    { font-size: 0.62rem; padding: 2px 10px; }
  .pot-chips-amount { font-size: 0.68rem; padding: 1px 6px; }
  .street-announce  { font-size: 1.0rem; padding: 0.35rem 1.1rem; letter-spacing: 2px; }

  /* ── Winner banner ──────────────────────────────────────────── */
  .winner-banner       { padding: 0.4rem 1rem; gap: 0.9rem; border-radius: 9px; }
  .wb-title            { font-size: 0.88rem; letter-spacing: 1px; }
  .wb-hands            { font-size: 0.66rem; padding-left: 0.8rem; }
  .winner-banner.wb-pos-top    { top: -124px; }
  .winner-banner.wb-pos-bottom { bottom: -138px; }

  /* ── Bottom zone ────────────────────────────────────────────── */
  .bottom-zone        { height: 136px; }

  /* Activity log column — narrower on mobile */
  .bottom-zone-log    { width: 110px; }
  .bottom-zone-log.log-collapsed { width: 60px; }
  .activity-log-entry { font-size: 0.67rem; }
  .activity-log-header { font-size: 0.6rem; padding: 0.25rem 0.4rem; }

  /* ── Action timer ───────────────────────────────────────────── */
  .action-timer       { padding: 3px 0.75rem; }

  /* ── Action buttons ─────────────────────────────────────────── */
  .action-btns-col    { width: 100%; }
  .action-btn-grid    { gap: 5px; padding: 6px 8px; }
  .btn-action {
    height: 48px;
    font-size: 0.74rem;
    letter-spacing: 0.3px;
    min-width: 60px;
    border-radius: 7px;
  }

  /* ── Sizing / bet controls row ──────────────────────────────── */
  .sizing-row         { padding: 5px 8px; height: 34px; gap: 5px; }
  .sizing-label       { font-size: 0.64rem; }
  .bet-slider         { min-width: 60px; }
  .bet-slider::-webkit-slider-thumb { width: 20px; height: 20px; } /* bigger touch target */
  .bet-slider::-moz-range-thumb     { width: 20px; height: 20px; }
  .bet-input          { width: 56px; font-size: 0.8rem; padding: 0.22rem 0.35rem; }
  .btn-quick          { font-size: 0.64rem; padding: 3px 6px; }

  /* ── Hand strength panel — hide on mobile (too cramped) ─────── */
  .action-hand-col    { display: none; }

  /* ── Action feed overlay ────────────────────────────────────── */
  .action-feed        { width: 150px; right: 0.4rem; top: 2.6rem; }
  .action-feed-item   { font-size: 0.68rem; padding: 4px 8px; }
  .action-feed-item .feed-name { font-size: 0.62rem; }

  /* ── Game-over panel ────────────────────────────────────────── */
  .game-over-title    { font-size: 1.05rem; }
  .game-over-btns .btn { font-size: 0.78rem; padding: 0.55rem 1rem; }

  /* ── Lobby ──────────────────────────────────────────────────── */
  #lobby              { padding: 0.75rem; align-items: stretch; }
  .lobby-card         { padding: 1.25rem; max-width: 100%; width: 100%; box-sizing: border-box; }
  .lobby-logo h1      { font-size: 2rem; }
  .lobby-logo .suits  { font-size: 1.4rem; }

  /* Nav buttons — touch-friendly sizing */
  .lobby-util-row .btn {
    text-align: center;
    justify-content: center;
    font-size: 0.92rem;
    padding: 0.72rem 0.5rem;
    white-space: nowrap;
    box-sizing: border-box;
  }
  /* Hide hamburger — buttons always shown */
  .lobby-hamburger { display: none; }

  /* Gate: input + Enter both full width, consistent sizing */
  .lobby-gate-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .lobby-gate-input {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 0.65rem 0.75rem;
  }
  #lobby-gate-btn {
    width: 100%;
    font-size: 1rem;
    padding: 0.72rem;
  }

  /* Mode tabs — single column */
  .mode-tabs {
    flex-direction: column;
  }

  /* ── Opponent + Game Mode ───────────────────────────────────── */
  /* Already column + 2-col wrap by default (mobile-first base rules) */
  /* Nothing to override here */

  /* Settings modal 2-col row: stack vertically */
  .settings-row-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* ── Card rank/suit — fix pip overlap on mobile ─────────────── */
  /* Standard card */
  .card .rank       { font-size: 1.55rem; top: 2px; left: 4px; letter-spacing: -1px; }
  .card .suit       { font-size: 1.55rem; }
  /* Large card */
  .card.lg .rank    { font-size: 1.85rem; top: 3px; left: 5px; }
  .card.lg .suit    { font-size: 1.85rem; }
  /* Small card */
  .card.sm .rank    { font-size: 1.15rem; top: 2px; left: 3px; }
  .card.sm .suit    { font-size: 1.15rem; }

  /* ── Hand History modal — mobile ───────────────────────────── */
  .history-modal {
    align-items: stretch;
    justify-content: stretch;
  }
  .history-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  /* Stack sidebar above detail */
  .history-body {
    flex-direction: column;
  }
  .history-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #21262d;
    max-height: 140px;
  }
  .history-hand-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0.5rem;
    gap: 0.4rem;
  }
  .history-hand-item {
    flex-shrink: 0;
    border-bottom: none;
    border-radius: 6px;
    border: 1px solid #21262d;
    padding: 0.4rem 0.6rem;
    min-width: 90px;
  }
  .history-hand-item.active {
    border-color: var(--gold);
    border-left-width: 1px;
    padding-left: 0.6rem;
  }
  .history-sidebar-label { display: none; }

  /* ── Settings modal — mobile ────────────────────────────────── */
  .modal-overlay {
    align-items: flex-end;
  }
  .modal-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    animation: modalSlideUpMobile 0.25s cubic-bezier(0.34, 1.1, 0.64, 1);
  }
  @keyframes modalSlideUpMobile {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}

/* ── Small mobile — phones ≤ 480px ──────────────────────────── */
@media (max-width: 480px) {
  /* Opponent: one per row — avatar + text horizontal, full width */
  .opponent-picker .opponent-btn {
    flex: 1 1 100%;
  }

  /* Game mode: still 2-col — icon + text fits fine at this size */
  .game-mode-picker .game-mode-btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  /* Ante/Omaha: stack vertically on tiny screens */
  .toggle-pair {
    flex-direction: column;
  }
}

/* ── Utility ─────────────────────────────────────────────────── */
.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }

/* Divider */
.divider {
  border: none;
  border-top: 1px solid #21262d;
  margin: 1.25rem 0;
}

/* ── Action toast (legacy — replaced by action-feed) ─────────── */
/* Kept as dead CSS; #action-toast element is no longer created */
#action-toast { display: none; }

/* ── Action timer — thin bar just above action buttons ────────── */
.action-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 1.2rem;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.action-timer.hidden {
  display: flex !important;   /* override global .hidden — must keep height in flow */
  visibility: hidden !important;
  opacity: 0;
  pointer-events: none;
}

.action-timer-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
  overflow: hidden;
}

.action-timer-bar {
  height: 100%;
  width: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: background 0.3s;
}

.action-timer.warning .action-timer-bar {
  background: var(--red);
}

.action-timer-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 18px;
  text-align: right;
  transition: color 0.3s;
}

.action-timer.warning .action-timer-label {
  color: var(--red);
  animation: timerPulse 0.5s ease-in-out infinite alternate;
}

@keyframes timerPulse {
  from { opacity: 1; }
  to   { opacity: 0.45; }
}

/* ═══════════════════════════════════════════════════════════════
   HAND HISTORY MODAL
   ═══════════════════════════════════════════════════════════════ */

/* Modal overlay */
.history-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.history-modal.hidden { display: none; }

.history-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

/* Dialog */
.history-dialog {
  position: relative;
  z-index: 1;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: var(--radius);
  width: min(900px, 96vw);
  height: min(620px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}

/* Header */
.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #21262d;
  background: #0a0e14;
  flex-shrink: 0;
}
.history-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.04em;
}
.history-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.25rem;
  transition: color 0.15s;
}
.history-close:hover { color: #fff; }

/* Body: sidebar + detail */
.history-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar */
.history-sidebar {
  width: 160px;
  flex-shrink: 0;
  border-right: 1px solid #21262d;
  background: #0a0e14;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.history-sidebar-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.6rem 0.75rem 0.4rem;
  border-bottom: 1px solid #21262d;
  flex-shrink: 0;
}
.history-hand-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.history-hand-item {
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid #12171f;
  transition: background 0.1s;
}
.history-hand-item:hover   { background: #161b22; }
.history-hand-item.active  { background: #1c2333; border-left: 3px solid var(--gold); padding-left: calc(0.75rem - 3px); }
.hhi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}
.hhi-num  { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
.hhi-result { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 3px; }
.hhi-result.win   { background: #1a3a1f; color: #7ee8a2; }
.hhi-result.loss  { background: #3a1a1a; color: #e07070; }
.hhi-result.split { background: #2a2a1a; color: var(--gold-light); }
.hhi-board { font-size: 0.72rem; margin-bottom: 0.15rem; line-height: 1.3; }
.hhi-board .red { color: #e07070; }
.hhi-board .black { color: #c8d0dc; }
.hhi-meta  { font-size: 0.67rem; color: var(--text-muted); }

/* Detail pane */
.history-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Street tabs */
.history-street-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #21262d;
  background: #0a0e14;
  flex-shrink: 0;
}
.hst-tab {
  flex: 1;
  padding: 0.55rem 0.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.hst-tab:hover:not(:disabled)  { color: var(--text-primary); }
.hst-tab.active                 { color: var(--gold-light); border-bottom-color: var(--gold); }
.hst-tab.unavailable,
.hst-tab:disabled               { opacity: 0.3; cursor: default; }

/* Cards area */
.history-cards-area {
  padding: 1rem 1.25rem 0.5rem;
  flex-shrink: 0;
}
.history-hole-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}
.history-player-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color 0.2s;
  min-width: 90px;
}
.history-player-slot.winner {
  border-color: var(--gold);
  background: rgba(218, 165, 32, 0.07);
}
.history-community-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 130px;
}
.history-player-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.history-hand-cards,
.history-community-cards {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.history-hand-rank {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold-light);
  min-height: 1rem;
  text-align: center;
}

/* Cards */
.hh-card {
  width: 34px;
  height: 48px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.1;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hh-card.red   { color: #c0392b; }
.hh-card.black { color: #1a1a1a; }
.hh-card.facedown { background: #1a2a4a; border-color: #2d4a7a; color: #5580b0; font-size: 1.2rem; }
.hh-rank { font-size: 0.78rem; line-height: 1; }
.hh-suit { font-size: 0.82rem; line-height: 1; }
.hh-no-board, .hh-no-cards {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* Result badge */
.history-result {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.3rem 1rem;
  margin: 0 1.25rem 0.5rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.history-result.win   { background: #1a3a1f; color: #7ee8a2; }
.history-result.loss  { background: #3a1a1a; color: #e07070; }
.history-result.split { background: #2a2a1a; color: var(--gold-light); }

/* Log */
.history-log-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 1.25rem 0.25rem;
  flex-shrink: 0;
}
.history-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.25rem 1rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.hh-log-line { padding: 0.1rem 0; border-bottom: 1px solid #12171f; }
.hh-log-street {
  color: var(--gold-light);
  font-weight: 700;
  padding-top: 0.35rem;
  border-bottom-color: #21262d;
}
.hh-log-empty { color: var(--text-muted); font-style: italic; font-size: 0.8rem; }

/* Empty state */
.history-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.8;
  padding: 2rem;
}
.history-empty.hidden { display: none; }

/* Prevent body scroll when modal open */
body.modal-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   Feature 1: Last-action label — replaces stack for 1 second
   ═══════════════════════════════════════════════════════════════ */

.p-last-action {
  grid-row: 2;
  grid-column: 1;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74,222,128,0.55);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.3;
  transition: opacity 0.12s ease;
  font-family: var(--font-mono);
}

.p-last-action--show {
  opacity: 1;
  animation: actionFlashIn 0.1s ease-out;
}

/* Hide the stack chip amount while action label is showing — keep opacity so grid slot holds its size */
.p-info-text:has(.p-last-action--show) .p-stack {
  opacity: 0;
}

@keyframes actionFlashIn {
  from { opacity: 0; transform: translateY(-3px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ═══════════════════════════════════════════════════════════════
   Feature 2: Bot "thinking…" badge
   ═══════════════════════════════════════════════════════════════ */

.badge-thinking {
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.4);
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 7px;
  border-radius: 10px;
  animation: thinkingPulse 1s ease-in-out infinite;
}

@keyframes thinkingPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   Feature 3: Winning card highlight at showdown
   ═══════════════════════════════════════════════════════════════ */

.card.winning-card {
  z-index: 10;
}

.card.non-winning-card {
  opacity: 0.45;
  filter: grayscale(0.4);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Feature 5: Rank position bar in hand strength panel
   ═══════════════════════════════════════════════════════════════ */

.action-rank-bar {
  width: 80px;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.action-rank-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease, background-color 0.4s ease;
}

.action-rank-bar-fill.rank-good { background: #3fb950; }
.action-rank-bar-fill.rank-mid  { background: #e0c060; }
.action-rank-bar-fill.rank-bad  { background: #e07070; }

.action-rank-bar-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin-top: 2px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   Improved active-turn highlight (overrides earlier rules)
   ═══════════════════════════════════════════════════════════════ */
.player-info-box.active-turn {
  border-color: var(--gold) !important;
  transform: none !important;
  animation: activeTurnBreathe 1.8s ease-in-out infinite alternate !important;
}
@keyframes activeTurnBreathe {
  from {
    box-shadow:
      0 0 0 1px rgba(200,148,74,0.28),
      0 0 12px rgba(200,148,74,0.22),
      0 4px 18px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(200,148,74,0.06);
    border-color: rgba(200,148,74,0.50) !important;
  }
  to {
    box-shadow:
      0 0 0 1px rgba(200,148,74,0.55),
      0 0 26px rgba(200,148,74,0.52),
      0 0 42px rgba(200,148,74,0.13),
      0 4px 18px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(200,148,74,0.12);
    border-color: rgba(200,148,74,0.92) !important;
  }
}
/* Gold accent bar on left edge of active player box */
.player-info-box { position: relative; }
.player-info-box.active-turn::before {
  content: '';
  position: absolute;
  left: -1px; top: 15%; bottom: 15%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg,
    transparent 0%, var(--gold) 40%,
    var(--gold) 60%, transparent 100%);
  animation: accentBarPulse 1.8s ease-in-out infinite alternate;
}
@keyframes accentBarPulse {
  from { opacity: 0.45; }
  to   { opacity: 1.0; }
}

/* ═══════════════════════════════════════════════════════════════
   Winning card highlight at showdown — static lift + glow, no loop
   ═══════════════════════════════════════════════════════════════ */
.card.winning-card {
  transform: translateY(-6px) scale(1.05) !important;
  box-shadow:
    0 0 0 2px #f0c060,
    0 0 20px 6px rgba(240,192,96,0.60),
    0 0 44px 10px rgba(240,192,96,0.18),
    0 10px 24px rgba(0,0,0,0.55) !important;
  z-index: 10 !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
   Lobby utility row
   ═══════════════════════════════════════════════════════════════ */
.lobby-util-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 1rem;
}
.lobby-util-row .btn:first-child {
  flex: 1 1 100%;
}
.lobby-util-row .btn:not(:first-child) {
  flex: 1 1 calc(50% - 0.25rem);
}

/* Hamburger trigger — hidden on desktop, shown only on mobile via media query */
.lobby-hamburger {
  display: none;
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid #252d3a;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.75rem;
}
.lobby-hamburger:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(200,148,74,0.06);
}
.lobby-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 0 0 1rem;
}

/* ── Lobby footer ───────────────────────────────────────────── */
.lobby-footer {
  text-align: center;
  padding: 1.2rem 1rem 1.6rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.55;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.lobby-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: opacity 0.15s;
}
.lobby-footer a:hover { opacity: 1; color: var(--gold-light); }
.lobby-footer-sep { opacity: 0.4; }
.btn-sm { padding: 6px 14px !important; font-size: 0.78rem !important; }

/* ── Game mode picker ───────────────────────────────────────── */
.game-mode-picker {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
  align-items: stretch;
}

.game-mode-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid #252d3a;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  flex: 1 1 calc(50% - 0.25rem);
  max-width: calc(50% - 0.25rem);
  align-self: stretch;
  box-sizing: border-box;
}
.game-mode-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200,148,74,0.05);
}
.game-mode-btn.active {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(200,148,74,0.10);
  box-shadow: 0 0 10px rgba(200,148,74,0.12);
}
.gmb-icon  { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.gmb-text  { display: flex; flex-direction: column; gap: 1px; }
.gmb-name  { font-size: 0.80rem; font-weight: 700; letter-spacing: 0.2px; }
.gmb-desc  { font-size: 0.65rem; color: var(--text-muted); }
.game-mode-btn.active .gmb-desc { color: rgba(200,148,74,0.7); }

/* ── Ante toggle ────────────────────────────────────────────── */
.toggle-pair {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
}
.toggle-pair .ante-toggle-row {
  margin: 0;
  flex: 1;
  align-items: center;
}
.ante-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #252d3a;
  border-radius: var(--radius-sm);
}
.ante-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: default;
  flex: 1;
}
.ante-toggle-label > span:first-child {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ante-toggle-desc {
  font-size: 0.70rem;
  color: var(--text-muted);
}

/* Reusable toggle row for settings panel */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #252d3a;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.settings-toggle-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  flex: 1;
}

/* Toggle switch */
.toggle-switch {
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { display: none; }
.toggle-track {
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: #2a3142;
  border: 1px solid #3a4560;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-thumb {
  position: absolute;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5a6478;
  transition: left 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-track {
  background: rgba(200,148,74,0.3);
  border-color: var(--gold);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  left: 20px;
  background: var(--gold);
}

/* ── Blind level badge in table header ──────────────────────── */
.blind-level-badge {
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: rgba(200,148,74,0.1);
  border: 1px solid rgba(200,148,74,0.35);
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Shared modal overlay + dialog
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: modalFadeIn 0.18s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-dialog {
  background: #111820;
  border: 1px solid #2a3040;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
  width: min(620px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes modalSlideUp {
  from { transform: translateY(24px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid #1e2530;
  flex-shrink: 0;
}
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.3px;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: #2a3040; color: #fff; }
.modal-body {
  overflow-y: auto;
  padding: 1.25rem;
  flex: 1;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #2e3a4a transparent;
}
/* WebKit */
.modal-body::-webkit-scrollbar {
  width: 5px;
}
.modal-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #2e3a4a;
  border-radius: 10px;
  transition: background 0.2s;
}
.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}
.modal-footer {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #1e2530;
  background: #111820;
  border-radius: 0 0 14px 14px;
}

/* Locked avatars — blurred/dimmed until magic word is entered */
.avatar-btn.avatar-locked {
  cursor: default;
  position: relative;
}
.avatar-btn.avatar-locked img.avatar-img {
  opacity: 0.35;
  filter: blur(3px) grayscale(0.4);
  transition: opacity 0.15s, filter 0.15s;
}
.avatar-btn.avatar-locked .avatar-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(0,0,0,0);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 10;
  pointer-events: none;
  /* No filter here — parent button has no filter so this is always sharp */
}
.avatar-btn.avatar-locked:hover .avatar-img {
  opacity: 0.55;
  filter: blur(2px) grayscale(0.2);
}
.avatar-btn.avatar-locked:hover .avatar-lock-overlay {
  opacity: 1;
  background: rgba(0,0,0,0.55);
}
.avatar-btn.avatar-locked.unlocked {
  cursor: pointer;
}
.avatar-btn.avatar-locked.unlocked .avatar-img {
  opacity: 1;
  filter: none;
}
.avatar-btn.avatar-locked.unlocked .avatar-lock-overlay {
  display: none;
}

/* ── How to Play ─────────────────────────────────────────────── */
.htp-tabs {
  display: flex;
  border-bottom: 1px solid #1e2530;
  flex-shrink: 0;
  padding: 0 1.25rem;
  gap: 2px;
}
.htp-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.6rem 0.9rem;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.htp-tab:hover { color: var(--text-secondary); }
.htp-tab.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}
.htp-body { font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); }
.htp-tagline {
  background: linear-gradient(135deg, #1a2030 0%, #141c28 100%);
  border: 1px solid #2a3850;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.65;
}
.htp-section { margin-bottom: 1.4rem; }
.htp-section h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--gold);
  margin: 0 0 0.65rem;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(200,148,74,0.18);
}
.htp-ranks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  counter-reset: rank-counter;
}
.htp-ranks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.04);
  counter-increment: rank-counter;
}
.htp-ranks li::before {
  content: counter(rank-counter);
  font-weight: 800;
  font-size: 0.7rem;
  color: var(--text-muted);
  min-width: 18px;
  text-align: right;
}
.htp-rank-name        { font-weight: 700; color: var(--text-primary); min-width: 150px; }
.htp-rank-name.best   { color: #3fb950; }
.htp-rank-name.worst  { color: #f05050; }
.htp-rank-note        { color: var(--text-muted); font-size: 0.8rem; }
.htp-list {
  padding-left: 1.1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.htp-struct-note {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: -0.3rem 0 0.75rem;
}

.htp-speed-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.htp-speed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: 0.84rem;
}
.htp-speed-name { font-weight: 700; color: var(--text-primary); min-width: 90px; }
.htp-speed-desc { color: var(--text-muted); }
.htp-speed-desc strong { color: var(--text-secondary); }

.htp-blind-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.htp-blind-table th {
  text-align: left;
  color: var(--text-muted);
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 10px 6px;
  border-bottom: 1px solid #1e2530;
}
.htp-blind-table td {
  padding: 5px 10px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.htp-blind-table tr:last-child td { border-bottom: none; }
.htp-blind-table td:first-child {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-weight: 700;
}
.htp-blind-table td:nth-child(2),
.htp-blind-table td:nth-child(3) {
  color: var(--text-primary);
  font-weight: 600;
}
.htp-blind-table td.ante-none { color: var(--text-muted); }
.htp-blind-table tr.ante-start td:nth-child(4) {
  color: #c8944a;
  font-weight: 700;
}
.htp-blind-table tr:hover td { background: rgba(255,255,255,0.025); }

/* ── Settings ────────────────────────────────────────────────── */
.settings-body { display: flex; flex-direction: column; gap: 1rem; }
.settings-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.settings-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--gold);
  margin-bottom: 0.45rem;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(200,148,74,0.18);
}
.settings-input {
  width: 100%;
  background: #0d1117;
  border: 1px solid #2a3040;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.92rem;
  padding: 9px 12px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.settings-input:focus { border-color: var(--gold); }

/* Twitter handle input */
.twitter-input-wrap {
  display: flex;
  align-items: center;
  background: #0d1117;
  border: 1.5px solid #252d3a;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.twitter-input-wrap:focus-within { border-color: var(--gold); }
.twitter-at {
  padding: 0 8px 0 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 36px;
  user-select: none;
}
.twitter-input-wrap .settings-input {
  border: none;
  background: transparent;
  padding-left: 0;
  flex: 1;
}
.twitter-input-wrap .settings-input:focus { box-shadow: none; }

/* Twitter PFP avatar button — first in picker, has a ring */
.avatar-btn.avatar-twitter {
  position: relative;
}
.avatar-btn.avatar-twitter .avatar-img {
  object-fit: cover;
  background-position: center;
}
.avatar-btn.avatar-twitter::after {
  content: '𝕏';
  position: absolute;
  bottom: 22px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: #000;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  line-height: 16px;
  text-align: center;
}
/* hint label under settings-label */
.settings-label-hint {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}

/* Delete button on Twitter avatar buttons */
.avatar-twitter-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  border: 1.5px solid rgba(0,0,0,0.5);
  transition: background 0.15s;
  display: none;
}
.avatar-btn.avatar-twitter:hover .avatar-twitter-del { display: block; }
.avatar-twitter-del:hover { background: #e74c3c; }

.avatar-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #0d1117;
  border: 2px solid #2a3040;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}
.avatar-btn:hover    { border-color: rgba(200,148,74,0.5); background: #141c28; transform: translateY(-1px); }
.avatar-btn.selected { border-color: var(--gold); background: #1c2438; color: var(--gold-light); }
.avatar-btn span     { display: none; }

.avatar-img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background-color: #1e2535;
  border: 2px solid #2a3040;
  display: block;
  overflow: hidden;
}
.avatar-btn.selected .avatar-img { border-color: var(--gold); }

/* ── Opponent picker (lobby) ──────────────────────────────── */
/* ── Lobby side-by-side config panels ──────────────────────── */
.config-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.config-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
}
.config-col-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 0 2px;
}

/* ── Lobby Accordions ───────────────────────────────────────── */
/* (kept for potential future use but not active) */

.opponent-picker {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}
.opponent-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1 1 calc(50% - 0.25rem);
  max-width: calc(50% - 0.25rem);
  min-width: 0;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid #252d3a;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  box-sizing: border-box;
  color: inherit;
}
.opponent-btn:hover  { border-color: var(--gold); color: var(--gold); background: rgba(200,148,74,0.05); }
.opponent-btn.active { border-color: var(--gold); color: var(--gold-light); background: rgba(200,148,74,0.10); box-shadow: 0 0 10px rgba(200,148,74,0.12); }
.opponent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background-color: #1e2535;
  flex-shrink: 0;
  border: 1.5px solid #2a3040;
}
.opponent-btn.active .opponent-avatar { border-color: var(--gold); }
.opponent-info { display: flex; flex-direction: column; gap: 1px; }
.opponent-name { font-size: 0.80rem; font-weight: 700; color: inherit; }
.opponent-desc { font-size: 0.65rem; color: var(--text-muted); }
.opponent-btn.active .opponent-desc { color: rgba(200,148,74,0.7); }

.deck-picker { display: flex; gap: 12px; }
.deck-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: #0d1117;
  border: 2px solid #2a3040;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}
.deck-btn:hover    { border-color: rgba(200,148,74,0.5); background: #141c28; transform: translateY(-1px); }
.deck-btn.selected { border-color: var(--gold); background: #1c2438; color: var(--gold-light); }

/* ── Bot settings pickers ─────────────────────────────────── */
.bot-picker {
  display: flex;
  gap: 6px;
}

.bot-speed-btn,
.bot-skill-btn {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  background: #0d1320;
  border: 1.5px solid #2a3340;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s;
  line-height: 1.2;
  white-space: nowrap;
}
.bot-speed-btn:hover,
.bot-skill-btn:hover {
  border-color: rgba(200,148,74,0.5);
  background: #141c28;
  transform: translateY(-1px);
}
.bot-speed-btn.selected,
.bot-skill-btn.selected {
  border-color: var(--gold);
  background: #1c2438;
  color: var(--gold-light);
}
.bot-btn-icon {
  font-size: 1rem;
  line-height: 1;
}

.settings-hint {
  margin-top: 5px;
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.deck-preview {
  width: 40px;
  height: 54px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.14);
  position: relative;
}
.deck-preview::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.12);
}
.deck-blue  { background: linear-gradient(160deg, #1a3a7a 0%, #0d1f4a 100%); }
.deck-red   { background: linear-gradient(160deg, #7a1a1a 0%, #4a0d0d 100%); }
.deck-green { background: linear-gradient(160deg, #1a5a2a 0%, #0d3a16 100%); }

/* Card back colour theming applied via body[data-deck] attribute */
body[data-deck="red"]   .card.back { background: linear-gradient(160deg, #6a1010 0%, #3a0808 100%) !important; }
body[data-deck="green"] .card.back { background: linear-gradient(160deg, #0e4a1e 0%, #082c10 100%) !important; }

/* ── Table felt color theming ─────────────────────────────── */
/* Default (green) is in :root. Red and blue override via data-table-color. */
body[data-table-color="red"] {
  --felt-primary:   #4a1515;
  --felt-secondary: #3a0e0e;
  --felt-mid:       #5a1c1c;
  --felt-hi:        #6e2424;
}
body[data-table-color="blue"] {
  --felt-primary:   #0f2d4a;
  --felt-secondary: #0a2038;
  --felt-mid:       #163860;
  --felt-hi:        #1e4878;
}

/* ── Table color swatch picker ───────────────────────────── */
.table-color-picker { display: flex; gap: 10px; }
.table-color-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #0d1117;
  border: 2px solid #2a3040;
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}
.table-color-btn:hover    { border-color: rgba(200,148,74,0.5); background: #141c28; transform: translateY(-1px); }
.table-color-btn.selected { border-color: var(--gold); background: #1c2438; color: var(--gold-light); }
.table-color-swatch {
  width: 36px;
  height: 22px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.1);
}
.table-color-green { background: linear-gradient(135deg, #28654a 0%, #153d20 100%); }
.table-color-red   { background: linear-gradient(135deg, #6e2424 0%, #3a0e0e 100%); }
.table-color-blue  { background: linear-gradient(135deg, #1e4878 0%, #0a2038 100%); }

/* ── Sound controls in settings modal ───────────────────────── */
.sound-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sound-mute-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.sound-mute-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}
.sound-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sound-vol-icon { font-size: 0.9rem; }
.sound-volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #2a3340;
  outline: none;
  cursor: pointer;
}
.sound-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}
.sound-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   Leaderboard Modal
   ═══════════════════════════════════════════════════════════════ */

.lb-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-modal.hidden { display: none; }

.lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
}

.lb-dialog {
  position: relative;
  z-index: 1;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: var(--radius);
  width: min(640px, 96vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.75);
}

.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid #21262d;
  background: #0a0e14;
  flex-shrink: 0;
}
.lb-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.05em;
}
.lb-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.25rem;
  transition: color 0.15s;
}
.lb-close:hover { color: #fff; }

/* ── Leaderboard tabs ───────────────────────────────────── */
.lb-tabs {
  display: flex;
  border-bottom: 1px solid #21262d;
  background: #090d13;
  flex-shrink: 0;
}
.lb-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0.6rem 0.5rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
}
.lb-tab:hover { color: var(--text-secondary); }
.lb-tab.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

.lb-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #2e3a4a transparent;
}
.lb-body::-webkit-scrollbar { width: 5px; }
.lb-body::-webkit-scrollbar-thumb { background: #2e3a4a; border-radius: 3px; }

.lb-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.lb-table.hidden { display: none; }

.lb-table thead tr {
  border-bottom: 1px solid #21262d;
}
.lb-table th {
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.lb-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.lb-table tbody tr:hover td {
  background: rgba(255,255,255,0.03);
}
.lb-table tbody tr.lb-row--me td {
  background: rgba(200,148,74,0.07);
}
.lb-table tbody tr.lb-row--me .lb-player-name {
  color: var(--gold-light);
}
.lb-table tbody tr.lb-row--ghost td {
  opacity: 0.45;
  font-style: italic;
}

.lb-col-rank   { width: 36px; text-align: center; }
.lb-col-won    { width: 60px; text-align: right; }
.lb-col-played { width: 60px; text-align: right; }
.lb-col-rate   { width: 60px; text-align: right; }
.lb-col-hands  { width: 70px; text-align: right; }
td.lb-col-rank,
td.lb-col-won,
td.lb-col-played,
td.lb-col-rate,
td.lb-col-hands { text-align: right; }

.lb-rank {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  display: block;
}
.lb-rank--gold   { color: #ffd700; }
.lb-rank--silver { color: #b0b8c4; }
.lb-rank--bronze { color: #cd7f32; }

.lb-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: #1e2535;
  flex-shrink: 0;
  border: 1.5px solid #2a3040;
}
.lb-player-name {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.lb-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.lb-num--won { color: #7ee8a2; font-weight: 700; }
.lb-winrate  { color: var(--text-muted); }
.lb-winrate--high { color: #7ee8a2; }
.lb-winrate--mid  { color: #e0c060; }

.lb-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.lb-empty.hidden { display: none; }

.lb-footer {
  border-top: 1px solid #21262d;
  padding: 0.6rem 1.25rem;
  background: #0a0e14;
  flex-shrink: 0;
}
.lb-note {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ── Lobby Gate ──────────────────────────────────────────────── */
#lobby-gate {
  margin: 1.1rem 0 0.5rem;
  padding: 1.25rem 1.5rem;
  background: #0d1117;
  border: 1px solid #2a3040;
  border-radius: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lobby-gate-beta-ribbon {
  position: absolute;
  top: 11px;
  right: -22px;
  width: 90px;
  background: #c8944a;
  color: #1a0e00;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 4px 0;
  transform: rotate(45deg);
  transform-origin: center;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.lobby-gate-lock {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.45rem;
}
.lobby-gate-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.lobby-gate-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
}
.lobby-gate-input {
  width: 300px;
  max-width: 100%;
  padding: 0.55rem 0.85rem;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: var(--font-mono);
  outline: none;
  transition: border-color .15s;
  text-align: center;
}
.lobby-gate-input:focus { border-color: var(--accent); }
#lobby-gate-btn {
  width: 300px;
  max-width: 100%;
}

.lobby-gate-error {
  min-height: 1.2em;
  font-size: 0.78rem;
  color: #f08080;
  margin-top: 0.5rem;
}

.lobby-gate-contact {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.lobby-gate-contact a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.lobby-gate-contact a:hover {
  color: var(--text-primary);
}
#lobby-gated.hidden { display: none; }
#lobby-gate.hidden  { display: none; }

/* Acid quit-session button — floats bottom-right of action-main */
.btn-acid-quit {
  position: absolute;
  bottom: 7px;
  right: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid #2a3040;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  z-index: 20;
}
.btn-acid-quit:hover {
  color: #f87171;
  border-color: #f87171;
}

/* Acid rebuy line in activity log */
.al-acid-rebuy {
  color: #a78bfa;
  font-weight: 700;
}
#table-screen.acid-fade-out {
  animation: acidTableFade 1.2s ease forwards;
}
@keyframes acidTableFade {
  0%   { opacity: 1; filter: saturate(1)    blur(0px); }
  60%  { opacity: 0.4; filter: saturate(3)  blur(2px); }
  100% { opacity: 0; filter: saturate(0)    blur(8px); }
}

.acid-outro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060a10;
  opacity: 0;
  transition: opacity 1s ease;
}
.acid-outro-overlay.acid-outro-visible {
  opacity: 1;
}
.acid-outro-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.acid-outro-logo {
  font-size: 4rem;
  animation: acid-shimmer-spin 4s linear infinite;
}
@keyframes acid-shimmer-spin {
  0%   { filter: hue-rotate(0deg);   transform: scale(1); }
  50%  { filter: hue-rotate(180deg); transform: scale(1.12); }
  100% { filter: hue-rotate(360deg); transform: scale(1); }
}
.acid-outro-text {
  font-size: 1.15rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.acid-outro-handle {
  background: linear-gradient(270deg, #ff6ec7, #a78bfa, #38bdf8, #34d399, #fbbf24, #ff6ec7);
  background-size: 300% 300%;
  animation: acid-shimmer 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
.acid-outro-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.acid-outro-btn {
  margin-top: 0.5rem;
  min-width: 160px;
}
@keyframes acid-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.acid-mode-badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: linear-gradient(270deg, #ff6ec7, #a78bfa, #38bdf8, #34d399, #fbbf24, #f87171, #ff6ec7);
  background-size: 400% 400%;
  animation: acid-shimmer 3s ease infinite;
  color: #0a0e14;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(167,139,250,0.6);
}
.lobby-acid-badge {
  text-align: center;
  padding: 0.3rem 0;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(270deg, #ff6ec7, #a78bfa, #38bdf8, #34d399, #fbbf24, #f87171, #ff6ec7);
  background-size: 400% 400%;
  animation: acid-shimmer 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: default;
  user-select: none;
}

/* Trippy background when hovering the acid badge */
@keyframes acid-bg-drift {
  0%   { background-position: 0% 50%;   filter: hue-rotate(0deg); }
  25%  { background-position: 50% 100%; filter: hue-rotate(40deg); }
  50%  { background-position: 100% 50%; filter: hue-rotate(90deg); }
  75%  { background-position: 50% 0%;   filter: hue-rotate(140deg); }
  100% { background-position: 0% 50%;   filter: hue-rotate(0deg); }
}
.lobby-card.acid-bg-active {
  background: linear-gradient(
    160deg,
    rgba(80, 20, 80, 0.55) 0%,
    rgba(18, 40, 60, 0.97) 30%,
    rgba(10, 40, 30, 0.97) 60%,
    rgba(30, 10, 50, 0.55) 100%
  );
  background-size: 300% 300%;
  animation: acid-bg-drift 6s ease infinite;
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.12),
    0 0 60px rgba(100, 50, 200, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}