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

/* ── Inter Variable — served locally, full variable range ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2');
}

/* ── Press Start 2P — served locally to avoid CSP issues ── */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/PressStart2P.woff2') format('woff2');
}

/* ── Material Symbols — served locally for instant render ── */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('fonts/material-symbols-rounded.woff2') format('woff2');
}


.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: -0.05em;
  user-select: none;
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
  word-wrap: normal;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

:root {
  /* ── Surfaces (Google-style Material dark) ─────────────────── */
  --bg-dark:        #0e0f11;
  --bg-card:        #132b6b;
  --bg-card2:       #1a3478;
  --bg-surface:     #1e3a82;
  --bg-surface2:    #243f8c;
  --bg-input:       #0b1840;

  /* ── Poker table (unchanged — table is intentionally different) */
  --table-felt:     #1c3870;
  --table-felt2:    #142d5c;
  --table-rim:      #5c3a1e;
  --table-rim2:     #c8944a;
  --table-rim3:     #7a4e28;
  --felt-primary:   #1c3870;
  --felt-secondary: #142d5c;
  --felt-mid:       #243f84;
  --felt-hi:        #2e4e9a;

  /* ── Gold (poker elements only: chips, rail, dealer btn) ─────── */
  --gold:           #c8944a;
  --gold-light:     #f0c060;
  --gold-dim:       #8a6030;

  /* ── Accent ──────────────────────────────────────────────────── */
  --accent:         #1872d4;
  --accent-dim:     #1158a8;
  --accent-bg:      rgba(24,114,212,0.18);
  --accent-border:  rgba(24,114,212,0.50);

  /* ── Text ────────────────────────────────────────────────────── */
  --text-primary:   #e8eef8;
  --text-secondary: #8ab0d8;
  --text-muted:     #7e9bbf;

  /* ── State colors ────────────────────────────────────────────── */
  --green:          #5cb85c;
  --red:            #f28b82;
  --blue:           #6582a2;
  --purple:         #c084fc;
  --orange:         #ffa657;

  /* ── Chip colors (unchanged) ─────────────────────────────────── */
  --chip-red:       #e03030;
  --chip-blue:      #2060d0;
  --chip-black:     #222;
  --chip-green:     #2a8a2a;

  /* ── Card colors ─────────────────────────────────────────────── */
  --card-bg:        #fefcf7;
  --card-face:      #1a1a2e;

  /* ── Elevation / shadows ─────────────────────────────────────── */
  --shadow:         0 4px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-card:    0 2px 8px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.35);

  /* ── Borders ─────────────────────────────────────────────────── */
  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);

  /* ── Misc ─────────────────────────────────────────────────────── */
  --radius:         12px;
  --radius-sm:      8px;
  --font:           'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'Roboto Mono', 'Inter', 'Courier New', monospace;
}

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

html, body {
  width: 100%; height: 100%;
  background: #0e0f11;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 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 1rem 3rem;
  padding-top: max(2rem, calc(2rem + env(safe-area-inset-top)));
  background: radial-gradient(ellipse at 50% 0%, #162860 0%, #0a1840 45%, #060d22 100%);
  scrollbar-width: thin;
  scrollbar-color: #1a2440 transparent;
  scrollbar-gutter: stable;
  overflow-anchor: none;
}
#lobby::-webkit-scrollbar { width: 5px; }
#lobby::-webkit-scrollbar-track { background: transparent; }
#lobby::-webkit-scrollbar-thumb { background: #252c3e; border-radius: 10px; }
#lobby::-webkit-scrollbar-thumb:hover { background: #2e374f; }

/* ── Skin 1: app header is hidden (original card layout) ─────── */
.lobby-mobile-header {
  display: none;
}
/* Skin 1: av-wrap sits in the card corner (absolute, as before) */
.lobby-av-wrap {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  z-index: 30;
}

/* ── Scroll-body wrapper: transparent pass-through in skin 1 ─── */
/* Skin 1: .lobby-scroll-body is invisible — #lobby itself scrolls */
.lobby-scroll-body {
  display: contents; /* children participate in parent flex layout */
}

/* Hide lobby immediately when auto-launching via URL params (popup window) */
.auto-launch #lobby { display: none !important; }

/* Hide lobby until icon font is ready — prevents 'play_arrow Play' literal-text flash */
.fonts-loading #lobby { visibility: hidden; }

/* Join-only view — same card style, just the join form */
#lobby-join-view {
  margin: auto;
}
#lobby-join-view .lv2-avatar-row {
  margin-bottom: 1rem;
}
#lobby-join-view .lobby-logo {
  margin-bottom: 1.5rem;
}

/* Returning-player identity block on the join view */
.join-returning {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  margin-bottom: 1rem;
  justify-content: space-between;
}
.join-returning.hidden { display: none; }
.join-returning-img {
  width: 52px; height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.12);
}
.join-returning-info { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; flex: 1; }
.join-returning-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.join-returning-change {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.join-returning-change:hover { color: rgba(255,255,255,0.75); }
.join-returning-join {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(135deg, #d4a060 0%, #b87840 100%);
  color: #1a0d00;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(200,148,74,0.35);
  transition: filter 0.15s, transform 0.1s;
  touch-action: manipulation; /* eliminates 300ms tap delay / double-tap zoom on mobile */
  -webkit-tap-highlight-color: transparent;
}
.join-returning-join:hover { filter: brightness(1.1); }
@media (hover: hover) { .join-returning-join:hover { transform: translateY(-1px); } }
.join-returning-join:active { transform: translateY(0); filter: brightness(0.95); }
.join-returning-join .material-symbols-rounded { font-size: 1.1rem; }

/* ── Card container ─────────────────────────────────────────── */
.lobby-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(200,148,74,0.28);
  border-radius: 14px;
  padding: 2rem 2rem 1.75rem;
  width: 100%;
  max-width: 620px;
  margin: auto;
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.06) inset,
    0 24px 64px rgba(0,0,0,0.75),
    0 0 48px rgba(200,148,74,0.07);
}

/* ── Logo ───────────────────────────────────────────────────── */
.lobby-logo {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(200,148,74,0.22);
}
.lobby-logo-suits {
  font-size: 1rem;
  letter-spacing: 0.55em;
  margin-bottom: 0.55rem;
  color: rgba(255,255,255,0.20);
  user-select: none;
}
.lobby-suit-red { color: rgba(255,255,255,0.20); }
.lobby-logo h1 {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-family: var(--font);
  color: var(--text-primary);
  line-height: 1;
  margin: 0.1rem 0 0.5rem;
  text-transform: none;
}
.logo-word-costanza {
  color: var(--text-primary);
}
.logo-word-poker {
  color: var(--gold-light);
  font-weight: 900;
}
.lobby-logo p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}

/* Unified account + chip pill button */
.lobby-av-btn {
  position: relative;
  height: 32px;
  border-radius: 20px;
  border: 1px solid rgba(200,160,60,0.28);
  background: rgba(0,0,0,0.32);
  cursor: pointer;
  padding: 0 0.55rem 0 0.45rem;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 0;
}
.lobby-av-btn:hover,
.lobby-av-btn[aria-expanded="true"] {
  background: rgba(0,0,0,0.52);
  border-color: rgba(200,160,60,0.55);
}
/* Chip pill section (left side of button) */
.lobby-av-chip-pill {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  padding-right: 0.4rem;
}
.lobby-chip-icon {
  font-size: 0.75rem;
  line-height: 1;
}
#lobby-chip-count,
#lobby-sticky-chip-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(220,180,80,0.9);
  letter-spacing: 0.01em;
  font-feature-settings: 'tnum';
  white-space: nowrap;
  user-select: none;
}
/* Thin separator between chip count and cog */
.lobby-av-sep {
  width: 1px;
  height: 13px;
  background: rgba(255,255,255,0.13);
  flex-shrink: 0;
  margin: 0 0.45rem;
}
.lobby-av-cog {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.45);
  transition: color 0.15s;
  font-variation-settings: 'FILL' 0;
  pointer-events: none;
  flex-shrink: 0;
}
.lobby-av-btn:hover .lobby-av-cog,
.lobby-av-btn[aria-expanded="true"] .lobby-av-cog {
  color: rgba(255,255,255,0.85);
}
.lobby-av-btn .lobby-notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
}
/* Dropdown menu */
.lobby-av-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 175px;
  background: #0d1a2e;
  border: 1px solid rgba(200,148,74,0.28);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
  padding: 0.35rem;
  flex-direction: column;
  gap: 0.15rem;
}
.lobby-av-menu--open {
  display: flex;
}
/* User identity header inside dropdown */
.lobby-av-menu-hdr {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem 0.4rem;
}
.lobby-av-menu-hdr-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: rgba(255,255,255,0.07);
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.14);
}
.lobby-av-menu-hdr-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary, #c9d1d9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 112px;
}
.lobby-av-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0.15rem 0.35rem 0.25rem;
  flex-shrink: 0;
}
.lobby-av-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary, #c9d1d9);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.lobby-av-menu-item:hover {
  background: rgba(200,148,74,0.10);
  color: var(--gold-light);
}
.lobby-av-menu-item .material-symbols-rounded {
  font-size: 1.1rem;
  color: var(--gold);
  flex-shrink: 0;
}
.lobby-av-menu-item .lobby-notif-dot {
  position: static;
  margin-left: auto;
  flex-shrink: 0;
}

/* Legacy beta chip kept for any pages that still reference it */
.lobby-beta-chip {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  padding: 0.18rem 0.55rem;
  background: var(--accent-bg);
  pointer-events: none;
  display: none; /* hidden — replaced by avatar menu */
}
/* Inline beta badge — sits next to label text */
.lobby-tab-text .lobby-beta-badge,
.lobby-beta-badge {
  display: inline-block;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent, #1a7fe8);
  border: 1px solid var(--accent-border, rgba(26,127,232,0.35));
  border-radius: 20px;
  padding: 0.02rem 0.42rem;
  background: var(--accent-bg, rgba(26,127,232,0.12));
  pointer-events: none;
  line-height: 1.4;
  flex-shrink: 0;
}
/* Legacy support */
.lobby-logo .lobby-beta-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.45rem;
}

/* ═══════════════════════════════════════════════════════════════
   LV2 Lobby — redesigned lobby UI (v2)
   ═══════════════════════════════════════════════════════════════ */

/* ── Mode tabs (pill strip) ─────────────────────────────────── */
.lv2-mode-row {
  margin-bottom: 1.25rem;
}
.lv2-mode-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 4px;
}
.lv2-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.lv2-mode-tab .material-symbols-rounded { font-size: 1.05rem; opacity: 0.75; transition: opacity 0.15s; }
@media (hover: hover) {
  .lv2-mode-tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
  }
}
.lv2-mode-tab.active {
  background: var(--accent);
  color: #fff;
}
.lv2-mode-tab.active .material-symbols-rounded { opacity: 1; }

/* ── Section label ──────────────────────────────────────────── */
.lv2-section {
  margin-bottom: 1rem;
}
.lv2-section-label {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* ── Speed strip ────────────────────────────────────────────── */
.lv2-speed-strip {
  display: flex;
  gap: 0.35rem;
}

/* ── Player count picker row (multi-player lobby) ───────────── */
.lv2-players-row {
  margin-top: 0.75rem;
}
.lv2-players-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.lv2-players-label .material-symbols-rounded { font-size: 1rem; }
.lv2-speed-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0.7rem 0.25rem 0.65rem;
  background: var(--bg-surface);
  border: 1px solid rgba(200,148,74,0.22);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.lv2-speed-btn .material-symbols-rounded {
  font-size: 1.1rem;
  line-height: 1;
}
.lv2-speed-sub {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--text-muted);
  line-height: 1;
  opacity: 0.85;
}
.lv2-speed-btn.active .lv2-speed-sub { color: rgba(255,255,255,0.75); opacity: 1; }
@media (hover: hover) {
  .lv2-speed-btn:hover .lv2-speed-sub { color: var(--text-secondary); }
  .lv2-speed-btn:hover {
    border-color: rgba(255,255,255,0.18);
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
  }
}
.lv2-speed-btn.active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}
.lv2-speed-btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
@media (hover: hover) {
  .lv2-speed-btn:disabled:hover {
    border-color: rgba(200,148,74,0.22);
    color: var(--text-secondary);
    background: var(--bg-surface);
  }
  .lv2-speed-btn:disabled:hover .lv2-speed-sub { color: var(--text-muted); }
}
.lv2-speed-btn .soon-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a78bfa;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.35);
  border-radius: 20px;
  padding: 0.1rem 0.4rem;
  line-height: 1;
}

/* ── Play section ───────────────────────────────────────────── */
.lv2-play-section {
  margin-top: 0.25rem;
}
.lv2-avatar-row {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  margin-bottom: 0.9rem;
  justify-content: space-between;
}
/* Avatar pick buttons inherit from .avatar-pick */
.lv2-avatar-row .avatar-pick,
.lv2-avatar-row .avatar-pick-more {
  width: 0;
  flex: 1 1 0;
  margin: 0 2px;
}

/* ── Name + CTA row ─────────────────────────────────────────── */
.lv2-name-cta-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0.3rem;
}
.lv2-name-input {
  flex: 3 1 0;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid rgba(200,148,74,0.22);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.95rem;
  padding: 0.72rem 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: var(--font);
}
.lv2-name-input:focus {
  border-color: rgba(200,148,74,0.55);
  box-shadow: 0 0 0 3px rgba(200,148,74,0.10);
}
.lv2-name-input::placeholder { color: var(--text-muted); }
.lv2-play-btn {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  white-space: nowrap;
  font-size: 0.88rem;
  padding: 0;
  width: auto;
}
.lv2-play-btn .material-symbols-rounded { font-size: 1.1rem; }

/* ── Utility bar (icon + label, 4-across) ───────────────────── */
.lv2-util-bar {
  display: flex;
  gap: 0.4rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(200,148,74,0.18);
}
.lv2-util-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(200,148,74,0.06);
  border: 1px solid rgba(200,148,74,0.25);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.65rem 0.25rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.lv2-util-btn .material-symbols-rounded { font-size: 1.2rem; line-height: 1; color: rgba(200,148,74,0.7); }
.lv2-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lobby-notif-dot {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8405a;
  box-shadow: 0 0 5px rgba(232,64,90,0.75);
  border: 1.5px solid rgba(10,21,53,0.9);
  pointer-events: none;
}
.lobby-notif-dot.hidden { display: none; }
@media (hover: hover) {
  .lv2-util-btn:hover {
    border-color: rgba(200,148,74,0.55);
    color: var(--text-primary);
    background: rgba(200,148,74,0.12);
  }
}

/* ── Step system (ls = lobby step) ─────────────────────────── */

/*
 * Timeline rail: a continuous vertical gold line runs down the
 * left side. Each .ls step's content is inset to the right of it.
 * The .ls-num badge sits ON the line, centred over it.
 */
.ls-rail {
  position: relative;
  border-left: 1px solid rgba(255,255,255,0.10);
  margin-left: 10px;
  padding-left: 0;
}

/* Fade the line out at the very bottom */
.ls-rail::after {
  content: '';
  position: absolute;
  bottom: 0; left: -1px;
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, var(--bg-card));
  pointer-events: none;
}

.ls {
  position: relative;
  padding-left: 2rem;  /* content clears the badge + some breathing room */
  padding-bottom: 2.25rem;
}
/* No gap/separator between steps — the rail line IS the separator */
.ls + .ls {
  padding-top: 0.5rem;
}

/* Step label row */
.ls-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* Step number badge — sits ON the rail line */
.ls-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid rgba(200,148,74,0.8);
  color: #0d1520;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
  position: absolute;
  left: -11px;
  top: 0;
  z-index: 2;
  box-shadow: 0 0 0 3px rgba(200,148,74,0.15);
}

/* Last step — trim line so it doesn't run past the content */
.ls--step3 {
  padding-bottom: 0.5rem;
}


.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.mode-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: var(--bg-surface);
  border: 1.5px solid rgba(200,148,74,0.22);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 1.1rem 1rem;
  text-align: center;
  transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
  letter-spacing: 0.01em;
}
.mode-tab .material-symbols-rounded {
  font-size: 1.5rem;
  opacity: 0.5;
  transition: opacity 0.18s;
}
.mt-name {
  font-size: 0.95rem;
  font-weight: 700;
}
.mode-tab:hover {
  border-color: rgba(200,148,74,0.5);
  color: var(--gold-light);
  background: rgba(200,148,74,0.08);
}
.mode-tab:hover .material-symbols-rounded { opacity: 0.75; }
.mode-tab.active {
  border-color: rgba(200,148,74,0.7);
  color: #1a0e00;
  background: linear-gradient(135deg, var(--gold) 0%, #e8a040 100%);
  box-shadow: 0 2px 12px rgba(200,148,74,0.3);
}
.mode-tab.active .material-symbols-rounded { opacity: 1; }

/* ── Game mode picker (Step 2) ──────────────────────────────── */
.game-mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0;
}
.game-mode-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 1rem;
  background: var(--bg-surface);
  border: 1.5px solid rgba(200,148,74,0.22);
  border-radius: 9px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: left;
}
.game-mode-btn:hover {
  border-color: rgba(200,148,74,0.5);
  color: var(--gold-light);
  background: rgba(200,148,74,0.06);
}
.game-mode-btn:hover .gmb-desc { color: rgba(200,148,74,0.55); }
.game-mode-btn.active {
  border-color: rgba(200,148,74,0.7);
  color: #1a0e00;
  background: linear-gradient(135deg, var(--gold) 0%, #e8a040 100%);
  box-shadow: 0 2px 12px rgba(200,148,74,0.3);
}
.gmb-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; display: flex; }
.gmb-icon .material-symbols-rounded { font-size: 1.25rem; }
.gmb-text { display: flex; flex-direction: column; gap: 1px; }
.gmb-name { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.1px; }
.gmb-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.3; }
.game-mode-btn.active .gmb-desc { color: rgba(26,14,0,0.55); }
.step2-speed-hint {
  display: none;
}

/* ── Speed pick nudge badge (touch devices only) ────────────── */
.speed-pick-nudge {
  display: none; /* hidden on desktop; shown via @media (pointer: coarse) below */
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-light, #e8c87a);
  background: rgba(200,148,74,0.15);
  border: 1px solid rgba(200,148,74,0.35);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  transition: opacity 0.25s;
  margin-left: auto; /* push to right end of the flex label */
}
.speed-pick-nudge.hidden { display: none !important; }

/* Shake animation — plays when user hits Play with no speed selected */
@keyframes _speed-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.lv2-speed-strip.speed-shake {
  animation: _speed-shake 0.38s ease;
  border-radius: 8px;
  outline: 2px solid rgba(200,148,74,0.65);
  outline-offset: 2px;
}

/* ── Step 3: name + action ──────────────────────────────────── */
.ls--step3 {
  padding-bottom: 0.25rem; /* last step — less bottom space needed */
}
.ls-sublabel {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  line-height: 1.5;
}

/* Avatar picker row */
.ls-avatar-row {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  margin-bottom: 1.75rem;
  justify-content: space-between;
}
.avatar-pick {
  width: 0;
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,0.10);
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.65;
  transition: border-color 0.15s, transform 0.1s, opacity 0.15s;
  margin: 0 2px;
}
.avatar-pick img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  image-rendering: high-quality;
}
.avatar-pick:hover {
  border-color: rgba(255,255,255,0.35);
  transform: translate3d(0, -1px, 0);
  opacity: 1;
}
.avatar-pick.active {
  border-color: var(--accent);
  opacity: 1;
}
/* Custom (non-lobby) avatar morphed into the george slot */
.avatar-pick--custom {
  position: relative;
}
.avatar-pick--custom::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  pointer-events: none;
}
/* "View More" / settings shortcut button in lobby avatar row */
.avatar-pick-more {
  width: 0;
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  padding: 0;
  border: 1px dashed rgba(255,255,255,0.14);
  background: #171c2a;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
  margin: 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--text-secondary);
}
.avatar-pick-more .apm-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.avatar-pick-more .apm-icon {
  font-size: 0.9rem;
  line-height: 1;
}
.avatar-pick-more:hover {
  opacity: 1;
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  transform: scale(1.06);
}

.ls-action-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0;
}
.ls-action-row .form-group {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
.ls-action-row .form-group input {
  height: 100%;
}
.ls-cta {
  flex: 1;
  white-space: nowrap;
  font-size: 0.88rem;
  padding: 0 1rem;
  min-height: 44px;
}

/* Join ghost button — de-emphasised */
.btn-join-ghost {
  width: 100%;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--text-muted) !important;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}
.btn-join-ghost:hover {
  border-color: var(--accent-border) !important;
  color: var(--text-primary) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* Divider inside step 3 (create / join) */
.ls-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0 0.9rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ls-divider::before,
.ls-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ── Join accordion ─────────────────────────────────────────── */
.join-accordion {
  margin-top: 1.1rem;
}
.join-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.join-accordion-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.join-accordion-chevron {
  font-size: 1rem;
  transition: transform 0.22s ease;
  opacity: 0.55;
  display: inline-block;
  vertical-align: middle;
}
.join-accordion-header[aria-expanded="true"] .join-accordion-chevron {
  transform: rotate(180deg);
}
.join-accordion-body {
  overflow: hidden;
  padding-top: 0.75rem;
}
.join-accordion-body[hidden] {
  display: none;
}

/* ── Forms ──────────────────────────────────────────────────── */

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

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

.form-group input {
  width: 100%;
  background: #0c1018;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.95rem;
  padding: 0.72rem 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: var(--font);
}

.form-group input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(101,130,162,0.1);
}
.form-group input::placeholder { color: var(--text-muted); }

/* Buttons */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.7rem 1.5rem;
  transition: all 0.15s;
  font-family: var(--font);
  touch-action: manipulation; /* eliminates 300ms tap delay / double-tap zoom on mobile */
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, #e8a040 100%);
  border: 1px solid rgba(200,148,74,0.5);
  color: #1a0e00;
  width: 100%;
  letter-spacing: 0.02em;
  font-weight: 800;
  box-shadow: 0 2px 12px rgba(200,148,74,0.35);
}
/* Constrain all .btn-primary:hover styles to real hover devices — prevents iOS sticky-hover double-tap */
@media (hover: hover) {
  .btn-primary:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    color: #1a0e00;
    box-shadow: 0 4px 20px rgba(200,148,74,0.5);
    transform: translateY(-1px);
  }
}
.btn-primary:active { transform: translateY(0); filter: brightness(0.95); box-shadow: none; }

/* Pulse animation removed */
@keyframes cta-pulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: none; }
}
.ls-cta {
  animation: none;
}
.ls-cta:hover, .ls-cta:focus {
  animation: none;
}

.btn-secondary {
  background: var(--bg-surface);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.22); color: var(--text-primary); }

.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: rgba(0,0,0,0.3);
  border: 1px solid rgba(101,130,162,0.3);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  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: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  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-for-friend: two side-by-side action cards */
.wff-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 0.75rem;
}
.wff-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0.85rem 0.5rem;
  height: auto;
  line-height: 1.2;
}
.wff-btn .material-symbols-rounded {
  font-size: 1.4rem;
}
.wff-btn-label {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.wff-btn-sub {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
}

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

/* Friend-joined ready state */
.waiting-msg--ready {
  color: var(--gold-light);
  font-style: normal;
  font-size: 1rem;
  font-weight: 600;
  background: rgba(255, 200, 60, 0.10);
  border: 1px solid rgba(255, 200, 60, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  margin-top: 0.75rem;
  animation: wff-ready-pulse 1s ease-in-out 3;
}
.wff-ready-icon {
  font-style: normal;
}
@keyframes wff-ready-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,200,60,0.5); }
  50%  { box-shadow: 0 0 0 8px rgba(255,200,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,200,60,0); }
}
/* Pulse the Enter Game button when friend joins */
.wff-btn--pulse {
  animation: wff-btn-pulse 0.8s ease-in-out 4;
  box-shadow: 0 0 0 3px var(--gold-light);
}
@keyframes wff-btn-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.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; }

/* Popup window hint — only shown on screens wide enough to trigger popup */
.popup-window-hint {
  display: none;
}
@media (min-width: 1000px) {
  .popup-window-hint {
    display: flex;
    align-items: center;
    gap: 0.3em;
    justify-content: center;
    font-size: 0.73rem;
    color: var(--text-muted);
    margin-top: calc(0.45rem + 4px);
    margin-bottom: 20px;
    opacity: 0.7;
    letter-spacing: 0.01em;
  }
  .popup-window-hint .material-symbols-rounded {
    font-size: 0.85rem;
    line-height: 1;
  }
}

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

#table-screen {
  display: none;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Background themes */
body:not([data-bg-theme]) #table-screen,
body[data-bg-theme="black"] #table-screen {
  background-color: #111113;
}
body[data-bg-theme="homegame"] #table-screen {
  background-image: url('avatars/homegame.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body[data-bg-theme="homegame"] .table-area {
  background: transparent !important;
}
body[data-bg-theme="fulltilt"] #table-screen {
  background-image: url('avatars/tilt.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body[data-bg-theme="fulltilt"] .table-area {
  background: transparent !important;
}

body[data-bg-theme="fulltilt"] .table-header,
body[data-bg-theme="finaltable"] .table-header,
body[data-bg-theme="homegame"] .table-header {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-bg-theme="finaltable"] #table-screen {
  background-image: url('avatars/finaltable.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body[data-bg-theme="finaltable"] .table-area {
  background: transparent !important;
}
body[data-bg-theme="red"] #table-screen {
  background: radial-gradient(ellipse at center, #3e1c1c 0%, #2c1212 60%, #200d0d 100%);
}
body[data-bg-theme="green"] #table-screen {
  background: radial-gradient(ellipse at center, #1c3e1e 0%, #122612 60%, #0e1a0e 100%);
}
body[data-bg-theme="blue"] {
  --bg-dark: #0d1f52;
}
body[data-bg-theme="blue"] #table-screen {
  background: radial-gradient(ellipse at center, #1e3a82 0%, #0d1f4a 60%, #080f28 100%);
}

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

.table-header {
  flex-shrink: 0;
  background: transparent;
  border-bottom: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.5rem;
  padding-top: env(safe-area-inset-top);
  height: calc(40px + env(safe-area-inset-top));
  box-shadow: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

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

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

.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;
  color: var(--text-primary);
  text-transform: uppercase;
  flex-shrink: 0;
}

.table-header .blind-info {
  display: none; /* blinds shown via blind-level-badge instead */
  font-size: 0.78rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  border: 1px solid rgba(101,130,162,0.5);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.table-header .hand-num {
  color: #8b949e;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2px 9px;
  letter-spacing: 0.3px;
}
/* When hand-num is the cap badge, override the pill style */
.table-header .btn-header-cap.hand-num {
  font-size: 0.78rem;
  font-family: var(--font);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.25rem 0.65rem;
  letter-spacing: 0;
}

.btn-header {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.42);
  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: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.82);
}
.btn-header--icon {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

/* ── Capped button: Hand History + hand number joined as one unit ── */
.btn-header-capped {
  display: flex;
  align-items: stretch;
}
.btn-header-capped .btn-header--capped {
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.btn-header-cap {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-family: var(--font);
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  white-space: nowrap;
  letter-spacing: 0;
  user-select: none;
  cursor: default;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-header-capped:hover .btn-header--capped {
  border-color: rgba(255,255,255,0.28);
  color: var(--text-primary);
}
.btn-header-capped:hover .btn-header-cap {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  color: var(--text-primary);
}

/* ── 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 rgba(255,255,255,0.12);
  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: rgba(255,255,255,0.28);
  color: var(--text-primary);
}

/* Player avatar button in table header */
.btn-header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22);
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.08);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, transform 0.15s;
  padding: 0;
}
.btn-header-avatar:hover {
  border-color: rgba(255,255,255,0.5);
  transform: scale(1.08);
}

/* Table canvas area — fills full screen height (header floats above via position:absolute) */
.table-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Top padding clears the floating header; bottom padding for bottom-zone overlap */
  /* Extra 30px on top shifts the playing surface down for better vertical balance */
  padding: clamp(3rem, 8vh, 7rem) 1rem clamp(1.5rem, 5vh, 5rem);
  overflow: visible;
  position: relative;
  background: radial-gradient(ellipse at center, #1a1c22 0%, #0e0f11 70%);
}
body[data-bg-theme="red"] .table-area {
  background: radial-gradient(ellipse at center, #331414 0%, #1a0a0a 70%);
}
body[data-bg-theme="green"] .table-area {
  background: radial-gradient(ellipse at center, #143314 0%, #0a1a0a 70%);
}
body[data-bg-theme="blue"] .table-area {
  background: radial-gradient(ellipse at center, #162d6e 0%, #0a1535 70%);
}

/* ── Fullscreen — expand the gameplay area ────────────────────────
   When the browser is in native fullscreen (:fullscreen) the header
   and bottom bar take up a smaller share of the viewport, so we can
   give the table oval more room.  Reduce vertical padding so the
   felt fills more of the screen while keeping breathing room, and
   let the rail grow wider to fill the extra horizontal space. */
:fullscreen .table-area,
:-webkit-full-screen .table-area,
:-moz-full-screen .table-area {
  padding: clamp(2rem, 5vh, 3.5rem) 1.5rem;
}
:fullscreen .table-rail,
:-webkit-full-screen .table-rail,
:-moz-full-screen .table-rail {
  width: min(92vw, calc((100vh - 412px) * 2), 1400px);
}
:fullscreen .player-area.self,
:-webkit-full-screen .player-area.self,
:-moz-full-screen .player-area.self {
  bottom: -101px;
}

/* ── Fullscreen plaque scaling — bigger than the ≥1300px defaults ── */
:fullscreen .player-info-box,
:-webkit-full-screen .player-info-box,
:-moz-full-screen .player-info-box {
  min-width: 240px;
}
:fullscreen .p-avatar-wrap,
:-webkit-full-screen .p-avatar-wrap,
:-moz-full-screen .p-avatar-wrap {
  width: 84px;
}
:fullscreen .p-name-text,
:-webkit-full-screen .p-name-text,
:-moz-full-screen .p-name-text {
  font-size: 1.08rem;
  max-width: 148px;
}
:fullscreen .p-stack,
:-webkit-full-screen .p-stack,
:-moz-full-screen .p-stack {
  font-size: 1.25rem;
}
:fullscreen .p-last-action,
:-webkit-full-screen .p-last-action,
:-moz-full-screen .p-last-action {
  font-size: 0.82rem;
}

/* ── Table rail — leather cushion surround ───────────────────── */
.table-rail {
  position: relative;
  border-radius: 999px;
  /* Dark leather: near-black base with a warm hint, centre-arc highlight
     simulates a puffed/padded cross-section */
  background:
    /* Centre-arc highlight — the 'peak' of the rounded cushion */
    radial-gradient(ellipse 80% 32% at 50% 50%,
      rgba(90,68,52,0.55) 0%,
      rgba(60,42,30,0.25) 50%,
      transparent 72%
    ),
    /* Top specular catch-light */
    radial-gradient(ellipse 60% 18% at 50% 14%,
      rgba(130,95,65,0.45) 0%,
      transparent 60%
    ),
    /* Grain texture — fine diagonal lines at two angles */
    repeating-linear-gradient(
      112deg,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,0.07) 3px,
      rgba(0,0,0,0.07) 4px
    ),
    repeating-linear-gradient(
      68deg,
      transparent 0px,
      transparent 5px,
      rgba(255,255,255,0.03) 5px,
      rgba(255,255,255,0.03) 6px
    ),
    /* Base: warm wood colour from original */
    conic-gradient(
      from 270deg at 50% 50%,
      #6b3e18 0deg,
      #8a5428 40deg,
      #b87840 80deg,
      #c8944a 100deg,
      #d4a060 120deg,
      #c8944a 140deg,
      #b87840 160deg,
      #8a5428 200deg,
      #6b3e18 240deg,
      #4a2810 280deg,
      #3a1e0a 310deg,
      #4a2810 330deg,
      #6b3e18 360deg
    );
  padding: 22px;
  border: 4px solid #080604;
  box-shadow:
    /* Outer edge — hard dark rim */
    0 0 0 1px rgba(0,0,0,0.85),
    /* Depth shadows */
    0 24px 60px rgba(0,0,0,0.85),
    0 48px 100px rgba(0,0,0,0.65);
  width: min(94vw, calc((100vh - 412px) * 2), 1200px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Cushion highlight — soft light catching the padded top curve */
.table-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 75% 45% at 50% 22%,
      rgba(255,230,190,0.10) 0%,
      rgba(200,160,110,0.05) 40%,
      transparent 70%
    );
}
/* Inner-edge shadow — cushion falls away toward the felt */
.table-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 85% at 50% 50%,
      transparent 55%,
      rgba(0,0,0,0.45) 80%,
      rgba(0,0,0,0.70) 100%
    );
}

.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: 999px;
  border: none;
  /* White ring + dark groove at the felt edge, then inner felt shadows.
     The white ring is the visible inner boundary of the rail surround. */
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.40),
    inset 0 0 70px rgba(0,0,0,0.40),
    inset 0 0 140px rgba(0,0,0,0.22);
  outline: 1px solid rgba(255,255,255,0.10);
  outline-offset: -20px;
  width: 100%;
  aspect-ratio: 2/1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 1;
  /* Firefox renders the background outside the border-radius on flex children
     with overflow:visible — promoting to a compositing layer fixes the clipping. */
  will-change: transform;
}

/* 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: #0c0e12;
  border-top: 1px solid rgba(255,255,255,0.08);
  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 rgba(255,255,255,0.07);
  background: #080a0e;
  width: 220px;
  z-index: 2;
  transition: width 0.22s ease, top 0.22s ease;
}

/* Full-width column: timer + action panel — centers relative to the whole viewport */
.bottom-zone-main {
  width: 100%;
  height: 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;
}


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

.player-area.self {
  bottom: -101px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.player-info-box {
  background: linear-gradient(160deg, rgba(22,24,30,0.97) 0%, rgba(14,16,22,0.97) 100%);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 0 0.85rem 0 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.65rem;
  min-width: 170px;
  overflow: visible;           /* timer bar escapes below the bottom edge */
  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;
  position: relative;
  isolation: isolate;
}

/* ── Sub-plaque countdown timer bar ────────────────────────
   Sits BELOW .player-info-box like a tab extending from its
   bottom border — same 2px outline, no top border (seamless
   join), rounded bottom corners.  Border colour transitions
   to gold when the plaque is active-turn.
   ──────────────────────────────────────────────────────── */
.p-timer-bar-wrap {
  position: absolute;
  left:   5%;
  right:  5%;
  bottom: -9px;               /* 5px content + 2px bottom border, 2px gap below plaque border */
  height: 5px;
  overflow: hidden;
  pointer-events: none;
  border: 2px solid var(--table-rim2);
  border-top: none;           /* plaque bottom border acts as the top edge */
  border-radius: 0 0 6px 6px;
  box-sizing: content-box;
  background: rgba(12,16,26,0.97);
  transition: border-color 0.25s ease, opacity 0.25s ease;
  z-index: 6;
}
.p-timer-bar-wrap.hidden {
  opacity: 0;
  pointer-events: none;
}
.p-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #0d4020 0%, #1e7a34 100%);
  transition: background 0.3s;
  transform-origin: left center;
}
.p-timer-bar-wrap.warning .p-timer-bar {
  background: linear-gradient(90deg, #5a0e08 0%, #c0392b 100%);
}
.p-timer-bar-wrap.warning {
  border-color: #c0392b;
}

/* Avatar portrait — square left-cap (mirrors the right-cap on the hand-history btn) */
.p-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: 56px;
  overflow: hidden;            /* clips avatar image to rounded top-left corner */
}
.p-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 8px 0 0 8px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
  background-color: var(--bg-dark);
  border: none;
  border-right: 1.5px solid rgba(255,255,255,0.1);
  display: block;
  overflow: hidden;
  transition: opacity 0.25s ease, filter 0.25s ease;
  image-rendering: high-quality;
}
.p-avatar-countdown {
  position: absolute;
  inset: 0;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, color 0.2s ease;
  line-height: 1;
}

.player-info-box.active-turn .p-avatar-img {
  opacity: 0.45;
  filter: saturate(0.25);
}
.player-info-box.active-turn .p-avatar-countdown {
  opacity: 1;
}
.player-info-box.active-turn.timer-warning .p-avatar-countdown {
  color: #ffd0cc;
}

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

.player-info-box.active-turn {
  border-color: var(--table-rim2);
}
/* Timer bar border stays neutral — the green/red fill is the active-turn indicator */
@keyframes activeTurnPulse {
  /* legacy — superseded by activeTurnBreathe */
  0%, 100% { opacity: 1; }
  50%       { opacity: 1; }
}

/* Folded state: no visual change on plaque (eliminated handles busted players) */
.player-info-box.is-folded {
  /* intentionally no dimming — plaque stays fully visible */
}

/* Eliminated state: greyed-out plaque for busted players */
.player-info-box.is-eliminated {
  opacity: 0.35;
  border-color: #1a1e22;
  filter: saturate(0) brightness(0.7);
  pointer-events: none;
}
.player-area.is-eliminated .card-row {
  visibility: hidden;
}

.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(--accent), var(--accent-dim));
  color: #fff;
  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: 900;
  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; }
.player-info-box .p-stack-allin { color: #4ade80; font-weight: 800; letter-spacing: 0.3px; animation: none; text-shadow: 0 0 10px rgba(74,222,128,0.55); }

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



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

/* ── Emotes ──────────────────────────────────────────────────── */
.emote-trigger-btn {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
  transition: color 0.25s, transform 0.15s;
  z-index: 40;
  padding: 0;
  outline: none;
  opacity: 1;
  pointer-events: auto;
}
/* Reset the global Material Symbols top offset so the icon sits centred */
.emote-trigger-btn .material-symbols-rounded {
  top: 0;
  font-size: 1rem;
}
.player-area.active-turn .emote-trigger-btn {
  color: var(--table-rim2);
}
.emote-trigger-btn:hover {
  color: var(--text-secondary);
  transform: scale(1.2);
}
.player-area.active-turn .emote-trigger-btn:hover {
  color: var(--gold-light);
  transform: scale(1.2);
}
.emote-trigger-btn.emote-cooling {
  opacity: 0.4;
  pointer-events: none;
}

.emote-picker {
  position: absolute;
  left: calc(100% + 14px);
  bottom: -6px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 500;
  box-shadow: 0 12px 40px rgba(0,0,0,0.85);
  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: var(--bg-card);
  border-left: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  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 rgba(255,255,255,0.08);
  margin-bottom: 2px;
}

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

.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 rgba(255,255,255,0.08);
  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(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: scale(1.2);
}

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

/* ── Mobile emote picker — fixed bottom sheet, opens when avatar is tapped ── */
.emote-picker--mobile {
  position: fixed !important;
  left: 50% !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  transform-origin: bottom center;
  border-radius: 0;
  z-index: 2000;
  animation: emotePickerInMobile 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.emote-picker--mobile::after {
  display: none; /* hide desktop arrow tail */
}
.emote-picker--mobile .emote-opt {
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
}
@keyframes emotePickerInMobile {
  from { opacity: 0; transform: translateX(-50%) scale(0.82) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) scale(1)    translateY(0); }
}
/* Mobile avatar — tappable to open emote picker */
.mobile-me-avatar {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0.12);
}
/* Hit animation applies to mobile strip avatars too */
.mobile-me-avatar.avatar-hit,
.mobile-opp-avatar.avatar-hit {
  animation: avatarHit 0.45s ease-out;
  will-change: transform;
}

/* Emoji overlay that sits on top of the avatar — border-radius set per-element in JS */
.avatar-emote-overlay {
  position: fixed;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: #1a1d24;
  overflow: hidden;
  pointer-events: none;
  /* Desktop: fixed on body at z-index 9 (below the picker at 2000).
     Mobile: JS overrides position→absolute and appends inside the strip,
     with z-index 20 so the dealer button disc (z-index 35) stays on top. */
  z-index: 9;
  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;
  will-change: transform;
}

/* Throwable projectile that flies across the screen */
/* Drag-to-throw styles */
.throwable-drag {
  position: fixed;
  font-size: 3rem;
  line-height: 1;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(1.3);
  cursor: grabbing;
  filter: drop-shadow(0 0 8px rgba(255,220,0,0.9));
  transition: transform 0.1s ease;
}
/* Glow on all valid throw targets (player info boxes) */
.throw-target-glow {
  box-shadow: 0 0 0 3px rgba(255,220,0,0.5), 0 0 20px rgba(255,220,0,0.3) !important;
  transition: box-shadow 0.15s ease;
}
/* Brighter glow when cursor hovers the target */
.throw-target-hover {
  box-shadow: 0 0 0 3px rgba(255,220,0,1), 0 0 24px rgba(255,220,0,0.7) !important;
}

.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 1.049s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes throwableFly {
  0%   { transform: translate(-50%,-50%) scale(1)    rotate(var(--rot-start, 0deg));   opacity: 1; }
  50%  { transform: translate(calc(-50% + calc(var(--tx) * 0.5)),
                               calc(-50% + calc(var(--ty) * 0.5) - 60px))
                    scale(var(--scale-mid, 2.0)) rotate(calc(var(--rot-start, 0deg) + 180deg)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)),
                               calc(-50% + var(--ty)))
                    scale(0.7) rotate(calc(var(--rot-start, 0deg) + 360deg)); opacity: 0.2; }
}

/* Throwable row separator */
.emote-throwable-row {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 4px;
  margin-top: 2px;
}
.emote-throwable {
  font-size: 2rem;
  position: relative;
}
/* Image-based throwable button */
.emote-throwable-img {
  padding: 2px;
  font-size: unset;
}
.emote-throwable-img img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: 0;
  display: block;
}
/* In-flight image projectile */
.throwable-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  border-radius: 0;
  display: block;
}
.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;
  will-change: transform;
  contain: layout style;
}

/* 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(--text-muted);
  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: #4ade80;
  border-color: rgba(74,222,128,0.35);
}

.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: #166534; color: #4ade80; }
.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 {
  letter-spacing: -1px;
}
.hole-cards[data-variant="omaha"] {
  gap: 4px;
}

/* In Omaha mode, widen plaques to match the 4-card row (4×42px + 3×4px gaps = 180px) */
#table-screen[data-variant="omaha"] .player-info-box {
  min-width: 200px;
}
/* Omaha: adjust card-row overlap for shorter 62px cards (vs 96px default) */
#table-screen[data-variant="omaha"] #me-card-row {
  margin-top: -104px;
}
#table-screen[data-variant="omaha"] #opp-card-row {
  min-height: 62px;
}
#table-screen[data-variant="omaha"] .seat-slot .card-row {
  bottom: calc(100% - 26px);
}

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

#opp-card-row { margin-top: 0; min-height: 96px; }

/* ── 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%, #d0d0d0 0%, #a8a8a8 60%, #888 100%);
  color: #222;
  font-size: 0.7rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  padding: 0;
  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.4);
  user-select: none;
  z-index: 35;
  /* default: top-left corner of the plaque — overridden per-player below */
  left: -11px;
  right: auto;
  top: -41px;
  transition: opacity 0.2s ease;
}
.dealer-btn-corner.hidden { display: none; }

/* ── Dealer button per-player positions (desktop, non-BvB) ───── */
/* Opponent: below the plaque, on the table felt toward community */
#opp-dealer-btn {
  left: -11px;
  right: auto;
  bottom: -28px;
  top: auto;
}
/* Self: above the plaque in the card area, toward community */
#me-dealer-btn {
  left: -11px;
  right: auto;
  top: -100px;
  bottom: auto;
}

/* ── Mobile regular-mode dealer button mirrors ─────────────────
   Injected by table.js into .mob-av-wrap wrappers inside mobile
   strips. Disc appearance is identical to .dealer-btn-corner.   */
.mob-av-wrap {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-self: stretch;
  /* carry over the avatar negative-bleed margins */
  margin-left: -10px;
  margin-top: -6px;
  margin-bottom: -6px;
}
/* When avatar is inside the wrapper, margins are on the wrapper instead */
.mob-av-wrap .mobile-opp-avatar,
.mob-av-wrap .mobile-me-avatar {
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  height: 100%;
}
#m-d-me,
#m-d-opp {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff 0%, #d8d8d8 60%, #bbb 100%);
  color: #111;
  font-size: 0.42rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 0 1.5px #c8944a, inset 0 1px 1px rgba(255,255,255,0.6);
  z-index: 35;
  pointer-events: none;
  /* Badge: bottom-right corner of avatar wrapper */
  left: auto;
  right: -4px;
  top: auto;
  bottom: -1px;
  transform: none;
}
#m-d-me.hidden,
#m-d-opp.hidden { display: none !important; }

/* ── Opponent cards always behind plaque (z-index) ──────────── */
/* plaque-row sits at z-index 1 within opponent area so winning cards
   (which translateY upward) never pop in front of the plaque box */
.player-area.opponent .plaque-row {
  margin-top: -30px;
  position: relative;
  z-index: 1;
}
.player-area.opponent .card-row {
  position: relative;
  z-index: 0;
}

/* Self plaque: close to rail, shifted up 20px */
.player-area.self .plaque-row {
  margin-top: -70px;
  position: relative;
  z-index: 2;
}

/* Move self cards up 100px (overrides inline margin-top:10px) */
#me-card-row { margin-top: -138px; z-index: 1; }

/* ── 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-right corner of plaque — mirrors dealer-btn at top-left */
  right: -4px;
  left: auto;
  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, --bottom, --plaque anchoring 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;
  flex-direction: row;
  align-items: center;
}

/* Bet stack — absolutely positioned inside .poker-table (table-space coords).
   JS computes left/top via positionBetStacks() and sets them as inline styles.
   No hardcoded offsets here — all placement is determined at runtime. */
.bet-stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 25;
  transition: opacity 0.2s ease;
  pointer-events: none;
  width: 137px; /* fixed so translateX(-50%) never shifts when chip columns change */
  transform: translateX(-50%);
}

/* Top player (opponent): chips grow DOWN from the label — normal column order */
.bet-stack--top {
  flex-direction: column;
}
/* Bottom player (self): chips grow UP from the label — reverse column order */
.bet-stack--bottom {
  flex-direction: column-reverse;
}

/* Ante stacks mirror the main stacks but offset to the right visually.
   JS places them at mainStack.left + ANTE_OFFSET_PX inline. */
.bet-stack--ante-top    { flex-direction: column; }
.bet-stack--ante-bottom { flex-direction: column-reverse; }

/* is-allin modifier — no geometry change needed, JS re-runs positionBetStacks */


/* 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: translateX(-50%) scale(0.65); }
  65%  { transform: translateX(-50%) scale(1.07); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.bet-stack:not(.hidden):not(.no-pop) {
  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(101,130,162,0.35);
  border-radius: 10px;
  padding: 2px 7px;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 4px rgba(0,0,0,1);
  font-family: 'Inter', system-ui, sans-serif;
}

/* 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));
  will-change: transform;
}

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

/*
  HOME GAME CHIPS (chip-disc) — Casino dice-style poker chip — correct edge-block design.

  Real dice chips have:
  - A solid colored body (the whole disc is the chip color)
  - White rectangular notch blocks right at the outer edge/rim
  - A clean solid center face (no ring pattern in the middle)

  Implementation:
  - .chip-disc itself = solid chip body color with bevel shading
  - ::before = full-size conic-gradient of 8 white edge blocks at the
    very perimeter (inset: 0), clipped to 50% radius
  - ::after = large center cap (inset: 5px) in the chip body color,
    covering the interior so only the outermost edge blocks are visible.
    This gives the authentic "notches only at the rim" look.
*/
.chip-disc {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transform: translateZ(0);
  image-rendering: auto;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.9),
    0 1px 3px rgba(0,0,0,0.95),
    inset 0 1px 3px rgba(255,255,255,0.22),
    inset 0 -1px 2px rgba(0,0,0,0.6);
}

/* Stack overlap */
.chip-col .chip-disc:not(:last-child) {
  margin-bottom: -16px;
}

/* ── Edge notch blocks ────────────────────────────────────────────
   8 white blocks around the full perimeter.
   Each segment = 45°: 18° white block + 27° body-color gap.       */
.chip-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    rgba(255,255,255,0.92)  0deg  18deg,
    transparent            18deg  45deg,
    rgba(255,255,255,0.92) 45deg  63deg,
    transparent            63deg  90deg,
    rgba(255,255,255,0.92) 90deg 108deg,
    transparent           108deg 135deg,
    rgba(255,255,255,0.92)135deg 153deg,
    transparent           153deg 180deg,
    rgba(255,255,255,0.92)180deg 198deg,
    transparent           198deg 225deg,
    rgba(255,255,255,0.92)225deg 243deg,
    transparent           243deg 270deg,
    rgba(255,255,255,0.92)270deg 288deg,
    transparent           288deg 315deg,
    rgba(255,255,255,0.92)315deg 333deg,
    transparent           333deg 360deg
  );
  pointer-events: none;
}

/* ── Center face cap ──────────────────────────────────────────────
   Covers the inside of the chip, leaving only the rim blocks exposed.
   Each color variant sets the background to match the chip body.   */
.chip-disc::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  pointer-events: none;
}

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

/* White / $1 — blue edge blocks on white body */
.chip-disc.c-white {
  background: radial-gradient(circle at 38% 30%, #f2f2f2 0%, #c8c8c8 100%);
  border: 1px solid #aaaaaa;
}
.chip-disc.c-white::before {
  background: conic-gradient(
    rgba(30,80,200,0.90)  0deg  18deg,
    transparent           18deg  45deg,
    rgba(30,80,200,0.90) 45deg  63deg,
    transparent           63deg  90deg,
    rgba(30,80,200,0.90) 90deg 108deg,
    transparent          108deg 135deg,
    rgba(30,80,200,0.90)135deg 153deg,
    transparent          153deg 180deg,
    rgba(30,80,200,0.90)180deg 198deg,
    transparent          198deg 225deg,
    rgba(30,80,200,0.90)225deg 243deg,
    transparent          243deg 270deg,
    rgba(30,80,200,0.90)270deg 288deg,
    transparent          288deg 315deg,
    rgba(30,80,200,0.90)315deg 333deg,
    transparent          333deg 360deg
  );
}
.chip-disc.c-white::after {
  background: radial-gradient(circle at 38% 32%, #f8f8f8, #d0d0d0);
}

/* Red / $5 */
.chip-disc.c-red {
  background: radial-gradient(circle at 38% 30%, #d42020 0%, #8a0000 100%);
  border: 1px solid #7a0000;
}
.chip-disc.c-red::after {
  background: radial-gradient(circle at 38% 32%, #e83030, #a80808);
}

/* Blue / $10 */
.chip-disc.c-blue {
  background: radial-gradient(circle at 38% 30%, #3070e0 0%, #0a2e90 100%);
  border: 1px solid #0a2880;
}
.chip-disc.c-blue::after {
  background: radial-gradient(circle at 38% 32%, #4488f0, #1444b8);
}

/* Green / $25 */
.chip-disc.c-green {
  background: radial-gradient(circle at 38% 30%, #28a848 0%, #0a5018 100%);
  border: 1px solid #0a4816;
}
.chip-disc.c-green::after {
  background: radial-gradient(circle at 38% 32%, #35bb58, #116828);
}

/* Orange / $50 */
.chip-disc.c-orange {
  background: radial-gradient(circle at 38% 30%, #e08010 0%, #904000 100%);
  border: 1px solid #883a00;
}
.chip-disc.c-orange::after {
  background: radial-gradient(circle at 38% 32%, #f09828, #b85800);
}

/* Black / $100 — gold edge blocks on black body */
.chip-disc.c-black {
  background: radial-gradient(circle at 38% 30%, #484848 0%, #0c0c0c 100%);
  border: 1px solid #c8944a;
}
.chip-disc.c-black::before {
  background: conic-gradient(
    rgba(200,148,74,0.95)  0deg  18deg,
    transparent            18deg  45deg,
    rgba(200,148,74,0.95)  45deg  63deg,
    transparent            63deg  90deg,
    rgba(200,148,74,0.95)  90deg 108deg,
    transparent           108deg 135deg,
    rgba(200,148,74,0.95) 135deg 153deg,
    transparent           153deg 180deg,
    rgba(200,148,74,0.95) 180deg 198deg,
    transparent           198deg 225deg,
    rgba(200,148,74,0.95) 225deg 243deg,
    transparent           243deg 270deg,
    rgba(200,148,74,0.95) 270deg 288deg,
    transparent           288deg 315deg,
    rgba(200,148,74,0.95) 315deg 333deg,
    transparent           333deg 360deg
  );
}
.chip-disc.c-black::after {
  background: radial-gradient(circle at 38% 32%, #424242, #121212);
}

/* Purple / $500 — yellow outline, same approach as $100 black */
.chip-disc.c-purple {
  background: radial-gradient(circle at 38% 30%, #9050e0 0%, #4a0a90 100%);
  border: 1px solid #ddc050;
}
.chip-disc.c-purple::before {
  background: conic-gradient(
    rgba(255,220,80,0.90)  0deg  18deg,
    transparent            18deg  45deg,
    rgba(255,220,80,0.90)  45deg  63deg,
    transparent            63deg  90deg,
    rgba(255,220,80,0.90)  90deg 108deg,
    transparent           108deg 135deg,
    rgba(255,220,80,0.90) 135deg 153deg,
    transparent           153deg 180deg,
    rgba(255,220,80,0.90) 180deg 198deg,
    transparent           198deg 225deg,
    rgba(255,220,80,0.90) 225deg 243deg,
    transparent           243deg 270deg,
    rgba(255,220,80,0.90) 270deg 288deg,
    transparent           288deg 315deg,
    rgba(255,220,80,0.90) 315deg 333deg,
    transparent           333deg 360deg
  );
}
.chip-disc.c-purple::after {
  background: radial-gradient(circle at 38% 32%, #a868f0, #5e14b0);
}

@media (min-width: 769px) {

/* ═══════════════════════════════════════════════════════════════
   👾 Retro Mode — Super Mario NES color palette (desktop only)
   Sky blue bg · pipe green borders · coin yellow · Mario red
   ═══════════════════════════════════════════════════════════════ */

/* NES Mario palette vars (scoped via selectors below)
   Sky:    #5C94FC   Pipe:   #43B047   Coin:   #FBD000
   Mario:  #E52521   Brown:  #AB5236   Ground: #E79C10  */

/* ── CRT vignette ── */
body.retro-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
  z-index: 99997;
}

/* ── Scanlines ── */
body.retro-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.10) 3px,
    rgba(0,0,0,0.10) 4px
  );
  pointer-events: none;
  z-index: 99998;
}

/* ── Base — NES sky blue ── */
body.retro-mode,
body.retro-mode .lobby-inner,
body.retro-mode .lobby-left,
body.retro-mode .lobby-right {
  background: #1a1a2e !important;
  color: #FBD000 !important;
}

/* ── No rounded corners anywhere ── */
/* Global NES square-everything rule — EXEMPT circles */
body.retro-mode *,
body.retro-mode *::before,
body.retro-mode *::after {
  border-radius: 0 !important;
}
/* Retro chip discs: border-radius 50% on element + ::before overrides the global reset
   via higher specificity (0-2-2 > 0-1-1 on body.retro-mode *) — no separate exemption block needed */

/* ── Font: Press Start 2P on key text ── */
body.retro-mode .player-name,
body.retro-mode .player-name-text,
body.retro-mode .player-stack,
body.retro-mode .pot-total,
body.retro-mode .pot-label,
body.retro-mode .action-btn,
body.retro-mode .btn-fold,
body.retro-mode .btn-call,
body.retro-mode .btn-raise,
body.retro-mode .btn-check,
body.retro-mode .hand-eval-text,
body.retro-mode .last-action-label,
body.retro-mode .activity-log,
body.retro-mode .lobby-logo-text,
body.retro-mode .lobby-title,
body.retro-mode .egg-info-name,
body.retro-mode .egg-info-hint,
body.retro-mode .lobby-tab-text strong,
body.retro-mode .lobby-tab-text span {
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
}

/* ── Table & felt — NES overworld sky + pipe green border ── */
body.retro-mode #table-screen,
body.retro-mode .poker-table {
  background: #3055C8 !important;
}
body.retro-mode .felt,
body.retro-mode .table-felt {
  background: #1a3a1a !important;
  border: 3px solid #43B047 !important;
  box-shadow: 0 0 20px rgba(67,176,71,0.3), inset 0 0 40px rgba(0,0,0,0.6) !important;
}

/* ── Cards ── */
body.retro-mode .card {
  background: #fdf6e3 !important;
  border: 2px solid #AB5236 !important;
  border-radius: 2px !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.85) !important;
  image-rendering: pixelated !important;
  color: #1a1a1a !important;
  font-family: 'Press Start 2P', monospace !important;
}
/* Rank: pixel font, top-left */
body.retro-mode .card .rank {
  position: absolute !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 26cqh !important;
  font-weight: normal !important;
  top: 5% !important;
  left: 8% !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}
/* Suit: pixel font, pip absolutely centered */
body.retro-mode .card .suit {
  position: absolute !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 40cqw !important;
  top: 50% !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* Board/community cards (.lg): auto-scaled via 20cqw */
body.retro-mode .card.lg .rank {
  font-size: 26cqh !important;
  top: 5% !important;
  left: 8% !important;
}
body.retro-mode .card.lg .suit {
  font-size: 40cqw !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}
/* Hearts & diamonds: Mario red */
body.retro-mode .card.suit-h,
body.retro-mode .card.suit-d {
  color: #E52521 !important;
}
/* Clubs & spades: pipe green */
body.retro-mode .card.suit-c,
body.retro-mode .card.suit-s {
  color: #1a6b1e !important;
}
/* Card back: brick pattern */
body.retro-mode .card.back {
  background: repeating-linear-gradient(
    90deg,
    #AB5236 0px, #AB5236 9px,
    #8B3a1e 9px, #8B3a1e 11px
  ),
  repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 9px,
    rgba(0,0,0,0.35) 9px, rgba(0,0,0,0.35) 11px
  ) !important;
  background-color: #AB5236 !important;
  border-color: #6b2c10 !important;
}
body.retro-mode .card.empty {
  background: rgba(251,208,0,0.04) !important;
  border-color: rgba(251,208,0,0.2) !important;
  box-shadow: none !important;
}
/* Winning card: gold coin flash */
body.retro-mode .card.winning-card,
body.retro-mode .card.winning-card--b {
  border-color: #FBD000 !important;
  box-shadow: 0 0 10px rgba(251,208,0,0.7), 3px 3px 0 rgba(0,0,0,0.85) !important;
  animation: retroCardWin 0.5s step-end infinite !important;
}
@keyframes retroCardWin {
  0%, 100% { border-color: #FBD000; }
  50%       { border-color: #E79C10; }
}

/* ── Player name: coin yellow; stack: pipe green ── */
body.retro-mode .player-name,
body.retro-mode .player-name-text {
  color: #FBD000 !important;
  text-shadow: 2px 2px 0 #7a5c00 !important;
  font-size: 0.72rem !important;
}
body.retro-mode .player-stack {
  color: #43B047 !important;
  text-shadow: 1px 1px 0 #1a4a1c !important;
  font-size: 0.65rem !important;
}

/* ── Pot ── */
body.retro-mode .pot-total {
  color: #FBD000 !important;
  text-shadow: 2px 2px 0 #7a5c00 !important;
  font-size: 0.82rem !important;
}
body.retro-mode .pot-label {
  color: #888 !important;
  font-size: 0.65rem !important;
}

/* ── Action buttons — chunky NES style ── */
body.retro-mode .action-btn,
body.retro-mode .btn-fold,
body.retro-mode .btn-call,
body.retro-mode .btn-raise,
body.retro-mode .btn-check {
  font-size: 0.7rem !important;
  border: 3px solid currentColor !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.85) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: none !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8) !important;
}
body.retro-mode .action-btn:active,
body.retro-mode .btn-fold:active,
body.retro-mode .btn-call:active,
body.retro-mode .btn-raise:active,
body.retro-mode .btn-check:active {
  box-shadow: 1px 1px 0 rgba(0,0,0,0.85) !important;
  transform: translate(2px, 2px) !important;
}

/* ── General buttons ── */
body.retro-mode .btn {
  border: 2px solid currentColor !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.8) !important;
  transition: none !important;
}
body.retro-mode .btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}

/* ── Last action label ── */
body.retro-mode .last-action-label {
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ── Hand eval badge ── */
body.retro-mode .hand-eval-badge {
  background: #1a1a2e !important;
  border: 2px solid #FBD000 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.8) !important;
  font-size: 0.65rem !important;
  color: #FBD000 !important;
}

/* ── Pixelated avatars & images ── */
body.retro-mode img,
body.retro-mode .avatar-img,
body.retro-mode .player-avatar {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: contrast(1.1) saturate(1.3);
}

/* ── Chips ── */
body.retro-mode .chip,
body.retro-mode .chip-disc {
  image-rendering: pixelated;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.85) !important;
}

/* ── Modals — dark bg, pipe green border ── */
body.retro-mode .modal-card,
body.retro-mode .game-dim-card,
body.retro-mode .settings-modal,
body.retro-mode .history-modal-inner {
  background: #0d0d1f !important;
  border: 3px solid #43B047 !important;
  box-shadow: 6px 6px 0 rgba(67,176,71,0.2) !important;
  color: #FBD000 !important;
}

/* ── Lobby panels ── */
body.retro-mode .lobby-panel,
body.retro-mode .lobby-pane,
body.retro-mode .pane-inner,
body.retro-mode .lobby-card {
  background: #0d0d1f !important;
  border-color: #43B047 !important;
}

/* ── Lobby logo — Mario red ── */
body.retro-mode .lobby-logo-text {
  color: #E52521 !important;
  text-shadow: 3px 3px 0 #6b0f0d !important;
}

/* ── Inputs ── */
body.retro-mode input,
body.retro-mode textarea,
body.retro-mode select {
  background: #0d0d1f !important;
  color: #FBD000 !important;
  border: 2px solid #43B047 !important;
  caret-color: #FBD000;
}

/* ── Scrollbars ── */
body.retro-mode ::-webkit-scrollbar { background: #0d0d1f; width: 8px; }
body.retro-mode ::-webkit-scrollbar-thumb { background: #43B047; }

/* ── Dual-board toast ── */
body.retro-mode .dual-board-toast {
  background: #0d0d1f !important;
  border-color: #43B047 !important;
  box-shadow: 4px 4px 0 rgba(67,176,71,0.25) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
}
body.retro-mode .dbt-label { color: #43B047 !important; }
body.retro-mode .dbt-scoop-label { color: #FBD000 !important; }

/* ── Activity log ── */
body.retro-mode .activity-log {
  background: #0d0d1f !important;
  border-color: rgba(67,176,71,0.3) !important;
  font-size: 0.65rem !important;
  color: #FBD000 !important;
}

/* ══════════════════════════════════════════════════════════════
   RETRO TABLE LAYOUT  —  Full NES game-screen (desktop ≥769px)
   Sky blue playfield · brick header · ground tiles · side players
   ══════════════════════════════════════════════════════════════ */

/* ── Header: NES brick HUD bar ──────────────────────────── */
body.retro-mode .table-header {
  position: relative !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 8px 16px !important;
  background-color: #8B3A1E !important;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 23px,
      rgba(0,0,0,0.28) 23px, rgba(0,0,0,0.28) 25px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 23px,
      rgba(0,0,0,0.32) 23px, rgba(0,0,0,0.32) 25px
    ) !important;
  border-bottom: 5px solid #4a1800 !important;
  box-shadow: 0 4px 0 #2a0c00, inset 0 1px 0 rgba(255,200,100,0.12) !important;
  z-index: 10 !important;
}
body.retro-mode .table-header .brand { display: none !important; }
body.retro-mode .blind-info          { display: none !important; }

body.retro-mode .btn-header {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  color: #FBD000 !important;
  background: rgba(0,0,0,0.45) !important;
  border: 2px solid #FBD000 !important;
  padding: 4px 10px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}
body.retro-mode .btn-header:active {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}
body.retro-mode .btn-header .material-symbols-rounded { display: none !important; }
body.retro-mode .btn-header-capped   { gap: 0 !important; }
body.retro-mode .btn-header-cap {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  background: rgba(251,208,0,0.1) !important;
  border: 2px solid #FBD000 !important;
  border-left: none !important;
  color: #FBD000 !important;
  padding: 4px 8px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
}
body.retro-mode .blind-level-badge {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  background: #0d0d1f !important;
  border: 2px solid #FBD000 !important;
  border-right: none !important;
  color: #FBD000 !important;
  box-shadow: none !important;
  padding: 4px 6px 4px 8px !important;
  border-radius: 0 !important;
}
/* Timer badge merges visually with the level badge — same box, no left border */
body.retro-mode .blind-level-timer {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  background: #0d0d1f !important;
  border: 2px solid #FBD000 !important;
  border-left: none !important;
  color: #FBD000 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
  padding: 4px 8px 4px 0 !important;
  margin-left: -10px !important;
  border-radius: 0 !important;
}
body.retro-mode .blind-level-timer:not(:empty)::before {
  content: '\00B7' !important;
  padding: 0 5px !important;
}

/* ── Table area: fill the screen, no oval padding ────────── */
body.retro-mode .table-area {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: #3055C8 !important;
}

/* ── Rail: hide the wooden oval surround ─────────────────── */
body.retro-mode .table-rail {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}
body.retro-mode .table-rail::before,
body.retro-mode .table-rail::after { display: none !important; }

/* ── Felt/poker-table: full-width NES stage rectangle ─────── */
body.retro-mode .poker-table {
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  background: #3055C8 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  clip-path: none !important;
}
body.retro-mode .poker-table::before { display: none !important; }
/* Ground-tile strip removed — no blue bar */
body.retro-mode .poker-table::after { display: none !important; }

/* ── Player areas: sit inside the NES rectangle (reset oval offsets) ── */
body.retro-mode .player-area.opponent {
  top: 14px !important;
}
body.retro-mode .player-area.self {
  bottom: 24px !important;
}
/* Opponent: plaque overlaps bottom of card-row — same as normal mode */
body.retro-mode .player-area.opponent .plaque-row { margin-top: -30px !important; }
body.retro-mode .player-area.self    .plaque-row  { margin-top: 0 !important; }
/* Self: hole cards go BEHIND the plaque (z-index:1 < plaque z-index:2) */
body.retro-mode #me-card-row  { margin-top: -114px !important; z-index: 1 !important; min-height: 72px !important; }
body.retro-mode #opp-card-row { min-height: clamp(52px, 6vw, 72px) !important; }

/* ── Player info box: NES HUD panel (top/bottom standard layout) ── */
body.retro-mode .player-info-box {
  padding: 0 0.85rem 0 0 !important;
  background: #0d0d1f !important;
  border: 3px solid #FBD000 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.95), inset 0 0 0 1px rgba(251,208,0,0.07) !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
/* Avatar: NES border, keep standard dimensions */
body.retro-mode .p-avatar-wrap {
  border-radius: 0 !important;
  border-right: 2px solid rgba(251,208,0,0.2) !important;
}
body.retro-mode .p-avatar-img {
  border-radius: 0 !important;
  image-rendering: pixelated !important;
}
body.retro-mode .p-avatar-countdown { border-radius: 0 !important; }
body.retro-mode .p-name .p-name-text {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  color: #FBD000 !important;
  text-shadow: 1px 1px 0 #7a5c00 !important;
  line-height: 1.4 !important;
}
body.retro-mode .player-info-box .p-stack {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.6rem !important;
  color: #43B047 !important;
  text-shadow: 1px 1px 0 #1a4a1c !important;
  letter-spacing: 0 !important;
}
body.retro-mode .player-info-box .p-last-action {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  color: #aaa !important;
}
body.retro-mode .p-timer-bar-wrap {
  left: 0 !important;
  right: 0 !important;
  border-color: #FBD000 !important;
}
body.retro-mode .p-timer-bar {
  background: linear-gradient(90deg, #0d2010 0%, #43B047 100%) !important;
}

/* Dealer button: coin-yellow pixel block */
body.retro-mode .dealer-btn-corner {
  background: #FBD000 !important;
  color: #1a1a2e !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9), 0 0 0 2px #AB5236 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
}
/* Self dealer button: sit right beside the plaque (mirror opponent's offset) */
body.retro-mode #me-dealer-btn {
  top: -28px !important;
  bottom: auto !important;
}

/* Blind labels: NES pill */
body.retro-mode .blind-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  border-radius: 0 !important;
}
body.retro-mode .blind-label--bb { background: #E52521 !important; border-color: #8B0000 !important; }
body.retro-mode .blind-label--sb { background: #43B047 !important; border-color: #1a6b1e !important; }

/* ── Hole cards: compact, centred under portrait ─────────── */
body.retro-mode .card-row { justify-content: center !important; }
body.retro-mode .hole-cards { justify-content: center !important; gap: 4px !important; }
body.retro-mode .player-area.self .card,
body.retro-mode .player-area.opponent .card {
  width: clamp(36px, 4vw, 50px) !important;
  height: clamp(52px, 6vw, 72px) !important;
  font-size: clamp(0.6rem, 0.9vw, 0.85rem) !important;
}

/* ── NES pixel coin chips — RETRO MODE ONLY ──────────────────────────────── */
body.retro-mode .chip-tower { filter: none !important; }

/* Circular coin. border-radius:50% beats the global retro reset via higher
   specificity (body.retro-mode .chip-disc = 0-2-2 > body.retro-mode * = 0-1-1).
   Black border + 2px offset drop-shadow = NES sprite silhouette.
   Inset left-side shadow = coin depth highlight inside the circle.
   ::before = hidden. ::after = hidden.                                        */
body.retro-mode .chip-disc,
body.retro-mode .chip-disc2 {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  clip-path: none !important;
  image-rendering: pixelated !important;
  position: relative !important;
  background: #E8B000 !important;            /* fallback; overridden per denomination */
  border: 2px solid #0a0a0a !important;
  box-shadow:
    2px 2px 0 #0a0a0a,                       /* NES sprite pixel drop-shadow */
    inset 4px 0 7px rgba(255,255,255,0.45)   /* left-side inner highlight    */
    !important;
}

/* ::before hidden — inner shadow handled on element */
body.retro-mode .chip-disc::before,
body.retro-mode .chip-disc2::before {
  display: none !important;
}

/* Inner ring — opaque background matches coin body so stacked coins don't bleed through.
   No z-index: paint order is DOM order, so the chip above naturally covers this ring. */
body.retro-mode .chip-disc::after,
body.retro-mode .chip-disc2::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: 50% !important;
  background: #C89800 !important;            /* fallback — darker inner ring for depth */
  border: 2px solid rgba(0,0,0,0.30) !important;
  pointer-events: none !important;
}
body.retro-mode .chip-disc.c-white::after,
body.retro-mode .chip-disc2.c-white::after  { background: #b8b8c8 !important; }
body.retro-mode .chip-disc.c-red::after,
body.retro-mode .chip-disc2.c-red::after    { background: #C89800 !important; }
body.retro-mode .chip-disc.c-blue::after,
body.retro-mode .chip-disc2.c-blue::after   { background: #1e5fcc !important; }
body.retro-mode .chip-disc.c-green::after,
body.retro-mode .chip-disc2.c-green::after  { background: #219638 !important; }
body.retro-mode .chip-disc.c-orange::after,
body.retro-mode .chip-disc2.c-orange::after { background: #d87010 !important; }
body.retro-mode .chip-disc.c-black::after,
body.retro-mode .chip-disc2.c-black::after  { background: #1e1e1e !important; }
body.retro-mode .chip-disc.c-purple::after,
body.retro-mode .chip-disc2.c-purple::after { background: #7830cc !important; }

/* Per-denomination coin colors.
   c-red ($5) = NES gold. All others keep their denomination color. */
body.retro-mode .chip-disc.c-white,
body.retro-mode .chip-disc2.c-white   { background: #b8b8c8 !important; }
body.retro-mode .chip-disc.c-red,
body.retro-mode .chip-disc2.c-red     { background: #E8B000 !important; }
body.retro-mode .chip-disc.c-blue,
body.retro-mode .chip-disc2.c-blue    { background: #1e5fcc !important; }
body.retro-mode .chip-disc.c-green,
body.retro-mode .chip-disc2.c-green   { background: #219638 !important; }
body.retro-mode .chip-disc.c-orange,
body.retro-mode .chip-disc2.c-orange  { background: #d87010 !important; }
body.retro-mode .chip-disc.c-black,
body.retro-mode .chip-disc2.c-black   { background: #1e1e1e !important; border-color: #555 !important; }
body.retro-mode .chip-disc.c-purple,
body.retro-mode .chip-disc2.c-purple  { background: #7830cc !important; }

/* Same stacking overlap as normal mode */
body.retro-mode .chip-col .chip-disc:not(:last-child),
body.retro-mode .chip-col .chip-disc2:not(:last-child) { margin-bottom: -16px !important; }

/* Bet stack amount label: NES pixel style */
body.retro-mode .bet-stack-amount {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.52rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 7px 3px !important;
  background: #0d0d1f !important;
  border: 2px solid #FBD000 !important;
  color: #FBD000 !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
  text-shadow: none !important;
}

/* ── Pot chip side: NES coin style ───────────────────────── */
body.retro-mode #pot-area {
  display: block !important;
  margin-top: 4px !important;
}
body.retro-mode .pot-chips-amount {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  color: #FBD000 !important;
}
body.retro-mode #pot-amount {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.75rem !important;
  color: #FBD000 !important;
}

/* ── Bottom zone: NES dark panel with blue-tile top border ── */
body.retro-mode .bottom-zone {
  background: #060810 !important;
  border-top: 4px solid #5C94FC !important;
  height: auto !important;
  min-height: 124px !important;
}
body.retro-mode .bottom-zone-log {
  background: #040608 !important;
  border-right-color: rgba(67,176,71,0.25) !important;
}

/* ── Action status strip ──────────────────────────────────── */
body.retro-mode .action-status-strip {
  background: #040608 !important;
  border-bottom: 2px solid rgba(67,176,71,0.35) !important;
}
body.retro-mode .action-status-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.7rem !important;
  color: #43B047 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ── Action buttons: big NES coloured blocks ─────────────── */
body.retro-mode .btn-action {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.72rem !important;
  border-width: 3px !important;
  border-style: solid !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition: none !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8) !important;
}
body.retro-mode .btn-action:active:not(:disabled) {
  box-shadow: 1px 1px 0 rgba(0,0,0,0.9) !important;
  transform: translate(2px, 2px) !important;
  filter: none !important;
}
body.retro-mode .btn-action:hover:not(:disabled) {
  filter: brightness(1.15) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
}
body.retro-mode .btn-action-sub {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.72rem !important;
}
/* Fold: dark/dim */
body.retro-mode .btn-fold {
  background: #141418 !important;
  border-color: #555 !important;
  color: #aaa !important;
}
/* Check: pipe green */
body.retro-mode .btn-check {
  background: #071810 !important;
  border-color: #43B047 !important;
  color: #43B047 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
}
/* Call (data-action="call"): NES blue */
body.retro-mode .btn-check[data-action="call"] {
  background: #0a1e3a !important;
  border-color: #1E90FF !important;
  color: #6bb8ff !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
}
/* Bet: brick red */
body.retro-mode .btn-bet {
  background: #300808 !important;
  border-color: #E52521 !important;
  color: #ff8888 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
}
/* Raise: also brick red */
body.retro-mode .btn-bet[data-action="raise"] {
  background: #300808 !important;
  border-color: #E52521 !important;
  color: #ff8888 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
}
/* All-in: gold flash */
body.retro-mode .btn-allin {
  background: #2a1800 !important;
  border-color: #FBD000 !important;
  color: #FBD000 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
}

/* ── Sizing / raise row ───────────────────────────────────── */
body.retro-mode .sizing-row {
  background: rgba(0,0,0,0.35) !important;
  border-top: 2px solid rgba(67,176,71,0.25) !important;
  padding: 4px 10px !important;
}
body.retro-mode .bet-slider { accent-color: #43B047 !important; }
body.retro-mode .bet-input {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  text-align: center !important;
}
body.retro-mode .btn-quick,
body.retro-mode .btn-bb-step {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  background: #0d0d1f !important;
  border: 2px solid #43B047 !important;
  color: #43B047 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
}
body.retro-mode .btn-quick-allin {
  border-color: #E52521 !important;
  color: #E52521 !important;
}
body.retro-mode .quick-bet-pill {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  background: #0d0d1f !important;
  border: 2px solid #FBD000 !important;
  color: #FBD000 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
  border-radius: 0 !important;
}

/* ── Hand eval panel (right col) ─────────────────────────── */
body.retro-mode .action-hand-value {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  color: #FBD000 !important;
}
body.retro-mode .action-rank-bar {
  background: #1a1a2e !important;
  border: 1px solid #43B047 !important;
  border-radius: 0 !important;
}
body.retro-mode .action-rank-bar-fill {
  background: linear-gradient(90deg, #43B047, #FBD000) !important;
}
body.retro-mode .action-hand-label,
body.retro-mode .action-rank-bar-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  color: #666 !important;
}

/* ── Corner buttons (Sit Out / Exit) ─────────────────────── */
body.retro-mode .btn-corner-action {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  background: #0d0d1f !important;
  border: 2px solid #444 !important;
  color: #666 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
}

/* ── Level-up toast ───────────────────────────────────────── */
body.retro-mode .level-up-toast {
  font-family: 'Press Start 2P', monospace !important;
  background: #0d0d1f !important;
  border: 3px solid #FBD000 !important;
  color: #FBD000 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.9) !important;
}

/* ── Street announce badge ────────────────────────────────── */
body.retro-mode .street-announce {
  font-family: 'Press Start 2P', monospace !important;
  background: #0d0d1f !important;
  border: 2px solid #43B047 !important;
  color: #43B047 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
}

/* ════════════════════════════════════════════════════════════
   RETRO LOBBY  —  Mario sky theme
   ════════════════════════════════════════════════════════════ */

/* Full-page Mario cerulean sky — with brick ground strip + green hills */
body.retro-mode #lobby {
  background: #3055C8 !important;
  min-height: 100vh !important;
  padding-bottom: 80px !important;
  position: relative !important;
}
/* Floating clouds drifting across the sky — desktop only */
@media (min-width: 769px) {
body.retro-mode #lobby::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  top: 40vh !important;
  left: 0 !important;
  right: 0 !important;
  height: 200px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    /* Cloud 1 — left, lower, medium: 3 bumps with wide center */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 36'%3E%3Cpath fill='black' d='M1 35L1 21L7 21L7 13L23 13L23 5L27 5L27 1L53 1L53 5L57 5L57 13L73 13L73 21L79 21L79 35Z'/%3E%3Cpath fill='white' d='M2 34L2 22L8 22L8 14L24 14L24 6L28 6L28 2L52 2L52 6L56 6L56 14L72 14L72 22L78 22L78 34Z'/%3E%3C/svg%3E") no-repeat 9% 54px / 80px 36px,
    /* Cloud 2 — right, higher, large: narrower side bumps, tall wide center */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 50'%3E%3Cpath fill='black' d='M1 49L1 31L13 31L13 19L31 19L31 9L39 9L39 1L69 1L69 9L77 9L77 19L95 19L95 31L107 31L107 49Z'/%3E%3Cpath fill='white' d='M2 48L2 32L14 32L14 20L32 20L32 10L40 10L40 2L68 2L68 10L76 10L76 20L94 20L94 32L106 32L106 48Z'/%3E%3C/svg%3E") no-repeat 83% 8px / 108px 50px;
}
}

/* Brick ground strip + pixel bushes pinned to the viewport bottom */
body.retro-mode #lobby::after {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 130px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    /* Brick tiles */
    repeating-linear-gradient(
      90deg,
      #AB5236 0px, #AB5236 29px,
      #8B3a1e 29px, #8B3a1e 31px
    ) bottom / 100% 36px no-repeat,
    /* Horizontal mortar lines */
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 17px,
      #6b2810 17px, #6b2810 19px
    ) bottom / 100% 36px no-repeat,
    /* Pixel bush — left, small */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='black' d='M1 29L1 17L7 17L7 9L19 9L19 3L23 3L23 1L41 1L41 3L45 3L45 9L57 9L57 17L63 17L63 29Z'/%3E%3Cpath fill='%23219638' d='M2 28L2 18L8 18L8 10L20 10L20 4L24 4L24 2L40 2L40 4L44 4L44 10L56 10L56 18L62 18L62 28Z'/%3E%3C/svg%3E") left 5% bottom 36px / 64px 30px no-repeat,
    /* Pixel bush — right, large */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 42'%3E%3Cpath fill='black' d='M1 41L1 25L11 25L11 15L27 15L27 7L33 7L33 1L63 1L63 7L69 7L69 15L85 15L85 25L95 25L95 41Z'/%3E%3Cpath fill='%23219638' d='M2 40L2 26L12 26L12 16L28 16L28 8L34 8L34 2L62 2L62 8L68 8L68 16L84 16L84 26L94 26L94 40Z'/%3E%3C/svg%3E") left 70% bottom 36px / 96px 42px no-repeat,
    /* Mario pipe — wide lip, tall body */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 90'%3E%3Crect fill='black' x='0' y='0' width='48' height='14'/%3E%3Crect fill='black' x='6' y='13' width='36' height='77'/%3E%3Crect fill='%23249038' x='1' y='1' width='46' height='12'/%3E%3Crect fill='%2354c050' x='2' y='2' width='8' height='10'/%3E%3Crect fill='%23249038' x='7' y='14' width='34' height='76'/%3E%3Crect fill='%2354c050' x='8' y='14' width='7' height='76'/%3E%3C/svg%3E") left 83% bottom 36px / 50px 92px no-repeat,
    transparent;
  background-repeat: no-repeat !important;
}

/* No separate dark card — content floats on the sky */
body.retro-mode #lobby-main-card.lobby-card,
body.retro-mode #lobby-join-view.lobby-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 520px !important;
}

/* Logo hero */
body.retro-mode .lobby-logo {
  border-bottom: 2px solid rgba(255,255,255,0.2) !important;
  padding-bottom: 1.2rem !important;
  margin-bottom: 1.4rem !important;
}
body.retro-mode .lobby-logo h1 {
  font-family: 'Press Start 2P', monospace !important;
  color: #ffffff !important;
  text-shadow: 4px 4px 0 #1a2e80, 8px 8px 0 rgba(0,0,0,0.35) !important;
  font-size: clamp(1.4rem, 4vw, 2.4rem) !important;
  letter-spacing: 0.04em !important;
}
body.retro-mode .lobby-logo p {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.58rem !important;
  color: rgba(255,255,255,0.8) !important;
  line-height: 2 !important;
}
body.retro-mode .lobby-logo-suits {
  font-size: 1.1rem !important;
  color: rgba(255,255,255,0.9) !important;
  text-shadow: none !important;
  letter-spacing: 0.6em !important;
}
body.retro-mode .lobby-suit-red {
  color: #E52521 !important;
  text-shadow: none !important;
}

/* Step labels: white uppercase + faint rule */
body.retro-mode .ls-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.68rem !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid rgba(255,255,255,0.22) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.05em !important;
}
/* Step number: orange circle */
body.retro-mode .ls-num {
  font-family: 'Press Start 2P', monospace !important;
  background: #E87E10 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.45) !important;
  width: 22px !important;
  height: 22px !important;
}

/* Mode tabs (vs Bot / vs Friend): dark-navy, full-width */
body.retro-mode .lv2-mode-tab {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  background: #1a3080 !important;
  border: 2px solid #2a4aaa !important;
  color: #aabfff !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.45) !important;
  border-radius: 0 !important;
  flex: 1 !important;
}
body.retro-mode .lv2-mode-tab.active {
  background: #2850c8 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
body.retro-mode .lv2-mode-tab .material-symbols-rounded { display: none !important; }

/* Speed buttons: no icons, active = white tile */
body.retro-mode .lv2-speed-btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.6rem !important;
  background: #1a3080 !important;
  border: 2px solid #2a4aaa !important;
  color: #aabfff !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.45) !important;
  border-radius: 0 !important;
  transition: none !important;
  padding: 10px 6px !important;
}
body.retro-mode .lv2-speed-btn .material-symbols-rounded { display: none !important; }
body.retro-mode .lv2-speed-btn.active {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #1a1a2e !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.45) !important;
}
body.retro-mode .lv2-speed-btn.active .lv2-speed-sub { color: #444 !important; }
body.retro-mode .lv2-speed-sub {
  color: #FBD000 !important;
  font-size: 0.55rem !important;
}

/* Avatar picker */
body.retro-mode .avatar-pick {
  border: 3px solid #2a4aaa !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.45) !important;
  background: #1a3080 !important;
  border-radius: 0 !important;
}
body.retro-mode .avatar-pick.selected,
body.retro-mode .avatar-pick:focus {
  border-color: #FBD000 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.45) !important;
}
body.retro-mode .avatar-pick-more {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.6rem !important;
  border: 2px solid #aabfff !important;
  color: #aabfff !important;
  background: #1a3080 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.45) !important;
  border-radius: 0 !important;
}
body.retro-mode .avatar-pick-more .material-symbols-rounded { display: none !important; }

/* Name input */
body.retro-mode .lv2-name-input {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  background: #1a3080 !important;
  border: 2px solid #2a4aaa !important;
  color: #ffffff !important;
}

/* Play CTA button: orange */
body.retro-mode .lv2-play-btn,
body.retro-mode .lv2-play-btn.btn-primary,
body.retro-mode .join-returning-join,
body.retro-mode #btn-join-friend {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.7rem !important;
  background: #E87E10 !important;
  border: 3px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45) !important;
  border-radius: 0 !important;
  transition: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
body.retro-mode .lv2-play-btn:hover,
body.retro-mode .join-returning-join:hover {
  background: #ffaa20 !important;
}
body.retro-mode .lv2-play-btn:active,
body.retro-mode .join-returning-join:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.45) !important;
}

/* Returning player card: dark-navy row */
body.retro-mode .join-returning {
  background: #1a2e6e !important;
  border: 2px solid #2a4aaa !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.45) !important;
  border-radius: 0 !important;
}
body.retro-mode .join-returning-img {
  border-radius: 0 !important;
  border: 2px solid #FBD000 !important;
  image-rendering: pixelated !important;
}
body.retro-mode .join-returning-name {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  color: #FBD000 !important;
}
body.retro-mode .join-returning-change {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  color: #43B047 !important;
}

/* BvB setup bar — shown to players who haven't set up a bot yet */
.bvb-setup-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(56,189,248,0.07), rgba(139,92,246,0.07));
  border: 1px solid rgba(56,189,248,0.35);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bvb-setup-bar:hover {
  background: linear-gradient(135deg, rgba(56,189,248,0.13), rgba(139,92,246,0.13));
  border-color: rgba(56,189,248,0.65);
  transform: translateY(-1px);
}
.bvb-setup-bar-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}
.bvb-setup-bar-content {
  flex: 1;
  min-width: 0;
}
.bvb-setup-bar-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.bvb-setup-bar-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.bvb-setup-bar-arrow {
  font-size: 1.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
body.retro-mode .bvb-setup-bar {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.5rem !important;
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
body.retro-mode .bvb-setup-bar:hover {
  border-color: #FBD000 !important;
  color: #FBD000 !important;
}
body.retro-mode .bvb-setup-bar-title {
  color: rgba(255,255,255,0.85) !important;
}
body.retro-mode .bvb-setup-bar:hover .bvb-setup-bar-title {
  color: #FBD000 !important;
}

/* Utility bar (Rules / Leaderboard / Bot Wars): visible outlined buttons */
body.retro-mode .lv2-util-bar {
  border-top: 2px solid rgba(255,255,255,0.18) !important;
}
body.retro-mode .lv2-util-bar a,
body.retro-mode .lv2-util-bar button {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  padding: 6px 10px !important;
  letter-spacing: 0.04em !important;
}
body.retro-mode .lv2-util-bar a:hover,
body.retro-mode .lv2-util-bar button:hover {
  color: #FBD000 !important;
  border-color: #FBD000 !important;
}

/* Lobby tabs (Achievements / Free Upgrades) */
body.retro-mode .lobby-tabs-wrap {
  background: #1a2e6e !important;
  border: 2px solid rgba(255,255,255,0.22) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4) !important;
  border-radius: 0 !important;
}
body.retro-mode #btn-achievements-lobby,
body.retro-mode #egg-info-toggle {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.6rem !important;
  background: #1a2e6e !important;
  color: #aabfff !important;
  border-color: rgba(255,255,255,0.18) !important;
  transition: none !important;
}
body.retro-mode #btn-achievements-lobby.active,
body.retro-mode #egg-info-toggle.active,
body.retro-mode #btn-achievements-lobby[aria-expanded="true"],
body.retro-mode #egg-info-toggle[aria-expanded="true"] {
  background: #2850c8 !important;
  color: #FBD000 !important;
  border-color: #FBD000 !important;
}
body.retro-mode .lobby-tab-text strong { font-size: 0.6rem !important; }
body.retro-mode .lobby-tab-text span   { font-size: 0.55rem !important; }

/* Egg-info (Free Upgrades) panel */
body.retro-mode .egg-info-panel,
body.retro-mode #egg-info-panel {
  background: #1a2e6e !important;
  border-color: rgba(255,255,255,0.18) !important;
}
body.retro-mode .egg-info-name { font-size: 0.65rem !important; }
body.retro-mode .egg-info-hint {
  font-size: 0.6rem !important;
  color: #aabfff !important;
}
body.retro-mode .egg-info-toggle-pill {
  background: #1a3080 !important;
  border: 2px solid #aabfff !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  border-radius: 0 !important;
}
body.retro-mode .egg-info-toggle-pill::after {
  background: #aabfff !important;
  border-radius: 0 !important;
}
body.retro-mode .egg-info-item--toggle.is-active .egg-info-toggle-pill {
  background: #E87E10 !important;
  border-color: #E87E10 !important;
}

/* Access gate */
body.retro-mode .lobby-gate-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.7rem !important;
  color: #ffffff !important;
}
body.retro-mode .lobby-gate-lock .material-symbols-rounded { color: #FBD000 !important; }
body.retro-mode .lobby-gate-btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.7rem !important;
  background: #E87E10 !important;
  border: 3px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4) !important;
  border-radius: 0 !important;
}
body.retro-mode .lobby-gate-rules-btn,
body.retro-mode .lobby-gate-contact,
body.retro-mode .lobby-gate-contact a {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 2 !important;
}
body.retro-mode .lobby-gate-contact a:hover { color: #FBD000 !important; }

/* Account / Settings cog button */
body.retro-mode .lobby-av-btn {
  background: rgba(0,0,0,0.25) !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  border-radius: 0 !important;
}
body.retro-mode .lobby-av-btn:hover {
  background: rgba(0,0,0,0.45) !important;
  border-color: #FBD000 !important;
}

/* Account menu dropdown */
body.retro-mode .lobby-av-menu {
  background: #1a2e6e !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45) !important;
  border-radius: 0 !important;
}
body.retro-mode .lobby-av-menu-item {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.6rem !important;
  color: #aabfff !important;
}
body.retro-mode .lobby-av-menu-item:hover {
  background: #2850c8 !important;
  color: #FBD000 !important;
}
body.retro-mode .lobby-av-menu-hdr-name {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.6rem !important;
  color: #FBD000 !important;
}

/* Retro mode badge */
body.retro-mode #lobby-retro-badge {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  border-radius: 0 !important;
}

} /* end @media (min-width: 769px) — Retro Mode */

/* ── 🍩 Donut Mode — ring donuts (top-down angle view) ──
   Matches reference: round torus, golden dough body, coloured frosting
   on top with wavy drip edge, dark centre hole, sprinkles, gloss.
   Element stays a circle (border-radius:50%) — SVG is square.
   ─────────────────────────────────────────────────────────────── */

/* Shared disc reset — keep circle, override size + colours */
.donut-mode .chip-disc,
.donut-mode .chip-disc2 {
  border: none !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  background-color: transparent !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.75) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.donut-mode .chip-disc::before,
.donut-mode .chip-disc::after,
.donut-mode .chip-disc2::before,
.donut-mode .chip-disc2::after {
  display: none !important;
}
/* Tighter stack — donuts sit close like normal chips */
.donut-mode .chip-col .chip-disc:not(:last-child),
.donut-mode .chip-col .chip-disc2:not(:last-child) {
  margin-bottom: -20px !important;
}

/*
  Ring donut SVG — viewBox 0 0 100 100, rendered into a 28×28 circle.
  Coordinate anatomy:
    • Outer dough ellipse: cx=50 cy=56  rx=46 ry=30  (slightly low = perspective)
    • Inner hole ellipse:  cx=50 cy=50  rx=16 ry=11
    • Frosting shape: large outer ellipse minus inner hole, clipped top half
      — achieved via fill-rule evenodd path or layered approach
    • Drip edge: wavy path around equator of outer ellipse
    • Sprinkles: small rotated rects across frosting ring
    • Gloss: white semi-transparent ellipse top-left of frosting
    • Dark outline: stroke on outer + inner ellipses

  Layering order (back→front):
    1. Dark shadow ellipse (slightly larger, offset down)
    2. Golden dough — outer ellipse filled gold
    3. Frosting ring — outer ellipse filled frosting colour, inner ellipse
       punched out via clipPath + evenodd
    4. Frosting drip edge — wavy path just below frosting equator
    5. Centre hole — dark brown ellipse
    6. Sprinkles
    7. Gloss highlight
    8. Outlines (stroke only, no fill)
*/

/* ── white / $1 — bubblegum pink frosting */
.donut-mode .chip-disc.c-white,
.donut-mode .chip-disc2.c-white {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><clipPath id='cw'><ellipse cx='50' cy='46' rx='55' ry='24'/></clipPath></defs><ellipse cx='50' cy='58' rx='47' ry='31' fill='%23111'/><path fill-rule='evenodd' fill='%23D4921C' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><path fill-rule='evenodd' fill='%23FF69B4' clip-path='url(%23cw)' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><ellipse cx='50' cy='52' rx='16' ry='10' fill='%235a2d00' stroke='%23111' stroke-width='2'/><rect x='22' y='32' width='12' height='5' rx='2.5' fill='%23ffff00' transform='rotate(-30 28 34)'/><rect x='55' y='26' width='12' height='5' rx='2.5' fill='%2300cfff' transform='rotate(15 61 28)'/><rect x='38' y='22' width='12' height='5' rx='2.5' fill='%2300ee66' transform='rotate(-5 44 24)'/><rect x='63' y='38' width='12' height='5' rx='2.5' fill='%23ff0' transform='rotate(35 69 40)'/><rect x='16' y='40' width='12' height='5' rx='2.5' fill='%23cc44ff' transform='rotate(-25 22 42)'/><rect x='70' y='24' width='12' height='5' rx='2.5' fill='%23ff4488' transform='rotate(-10 76 26)'/><ellipse cx='34' cy='36' rx='8' ry='4' fill='white' opacity='0.55' transform='rotate(-20 34 36)'/><ellipse cx='30' cy='34' rx='4' ry='2' fill='white' opacity='0.85' transform='rotate(-20 30 34)'/><ellipse cx='50' cy='54' rx='47' ry='31' fill='none' stroke='%23111' stroke-width='2.5'/></svg>") !important;
}

/* ── red / $5 — magenta frosting */
.donut-mode .chip-disc.c-red,
.donut-mode .chip-disc2.c-red {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><clipPath id='cr'><ellipse cx='50' cy='46' rx='55' ry='24'/></clipPath></defs><ellipse cx='50' cy='58' rx='47' ry='31' fill='%23111'/><path fill-rule='evenodd' fill='%23D4921C' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><path fill-rule='evenodd' fill='%23FF2090' clip-path='url(%23cr)' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><ellipse cx='50' cy='52' rx='16' ry='10' fill='%235a2d00' stroke='%23111' stroke-width='2'/><rect x='20' y='38' width='9' height='4' rx='2' fill='%23fef3c7' transform='rotate(-25 24 40)'/><rect x='60' y='33' width='9' height='4' rx='2' fill='%2386efac' transform='rotate(20 64 35)'/><rect x='38' y='28' width='9' height='4' rx='2' fill='%23bfdbfe' transform='rotate(-10 42 30)'/><rect x='68' y='44' width='9' height='4' rx='2' fill='%23fde68a' transform='rotate(30 72 46)'/><rect x='14' y='48' width='9' height='4' rx='2' fill='%23a78bfa' transform='rotate(-20 18 50)'/><rect x='74' y='30' width='9' height='4' rx='2' fill='%23fdba74' transform='rotate(-15 78 32)'/><ellipse cx='34' cy='36' rx='8' ry='4' fill='white' opacity='0.55' transform='rotate(-20 34 36)'/><ellipse cx='30' cy='34' rx='4' ry='2' fill='white' opacity='0.85' transform='rotate(-20 30 34)'/><ellipse cx='50' cy='54' rx='47' ry='31' fill='none' stroke='%23111' stroke-width='2.5'/></svg>") !important;
}

/* ── blue / $10 — blue frosting */
.donut-mode .chip-disc.c-blue,
.donut-mode .chip-disc2.c-blue {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><clipPath id='cb'><ellipse cx='50' cy='46' rx='55' ry='24'/></clipPath></defs><ellipse cx='50' cy='58' rx='47' ry='31' fill='%23111'/><path fill-rule='evenodd' fill='%23D4921C' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><path fill-rule='evenodd' fill='%231E90FF' clip-path='url(%23cb)' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><ellipse cx='50' cy='52' rx='16' ry='10' fill='%235a2d00' stroke='%23111' stroke-width='2'/><rect x='20' y='38' width='9' height='4' rx='2' fill='%23fde68a' transform='rotate(-25 24 40)'/><rect x='60' y='33' width='9' height='4' rx='2' fill='%23fca5a5' transform='rotate(20 64 35)'/><rect x='38' y='28' width='9' height='4' rx='2' fill='%2386efac' transform='rotate(-10 42 30)'/><rect x='68' y='44' width='9' height='4' rx='2' fill='%23f9a8d4' transform='rotate(30 72 46)'/><rect x='14' y='48' width='9' height='4' rx='2' fill='%23fef3c7' transform='rotate(-20 18 50)'/><rect x='74' y='30' width='9' height='4' rx='2' fill='%23fdba74' transform='rotate(-15 78 32)'/><ellipse cx='34' cy='36' rx='8' ry='4' fill='white' opacity='0.55' transform='rotate(-20 34 36)'/><ellipse cx='30' cy='34' rx='4' ry='2' fill='white' opacity='0.85' transform='rotate(-20 30 34)'/><ellipse cx='50' cy='54' rx='47' ry='31' fill='none' stroke='%23111' stroke-width='2.5'/></svg>") !important;
}

/* ── green / $25 — green frosting */
.donut-mode .chip-disc.c-green,
.donut-mode .chip-disc2.c-green {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><clipPath id='cg'><ellipse cx='50' cy='46' rx='55' ry='24'/></clipPath></defs><ellipse cx='50' cy='58' rx='47' ry='31' fill='%23111'/><path fill-rule='evenodd' fill='%23D4921C' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><path fill-rule='evenodd' fill='%2322CC44' clip-path='url(%23cg)' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><ellipse cx='50' cy='52' rx='16' ry='10' fill='%235a2d00' stroke='%23111' stroke-width='2'/><rect x='20' y='38' width='9' height='4' rx='2' fill='%23fde68a' transform='rotate(-25 24 40)'/><rect x='60' y='33' width='9' height='4' rx='2' fill='%23fca5a5' transform='rotate(20 64 35)'/><rect x='38' y='28' width='9' height='4' rx='2' fill='%23bfdbfe' transform='rotate(-10 42 30)'/><rect x='68' y='44' width='9' height='4' rx='2' fill='%23fef3c7' transform='rotate(30 72 46)'/><rect x='14' y='48' width='9' height='4' rx='2' fill='%23f9a8d4' transform='rotate(-20 18 50)'/><rect x='74' y='30' width='9' height='4' rx='2' fill='%23fdba74' transform='rotate(-15 78 32)'/><ellipse cx='34' cy='36' rx='8' ry='4' fill='white' opacity='0.55' transform='rotate(-20 34 36)'/><ellipse cx='30' cy='34' rx='4' ry='2' fill='white' opacity='0.85' transform='rotate(-20 30 34)'/><ellipse cx='50' cy='54' rx='47' ry='31' fill='none' stroke='%23111' stroke-width='2.5'/></svg>") !important;
}

/* ── orange / $50 — orange frosting */
.donut-mode .chip-disc.c-orange,
.donut-mode .chip-disc2.c-orange {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><clipPath id='co'><ellipse cx='50' cy='46' rx='55' ry='24'/></clipPath></defs><ellipse cx='50' cy='58' rx='47' ry='31' fill='%23111'/><path fill-rule='evenodd' fill='%23D4921C' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><path fill-rule='evenodd' fill='%23FF7700' clip-path='url(%23co)' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><ellipse cx='50' cy='52' rx='16' ry='10' fill='%235a2d00' stroke='%23111' stroke-width='2'/><rect x='20' y='38' width='9' height='4' rx='2' fill='%23fef3c7' transform='rotate(-25 24 40)'/><rect x='60' y='33' width='9' height='4' rx='2' fill='%2386efac' transform='rotate(20 64 35)'/><rect x='38' y='28' width='9' height='4' rx='2' fill='%23bfdbfe' transform='rotate(-10 42 30)'/><rect x='68' y='44' width='9' height='4' rx='2' fill='%23fca5a5' transform='rotate(30 72 46)'/><rect x='14' y='48' width='9' height='4' rx='2' fill='%23a78bfa' transform='rotate(-20 18 50)'/><rect x='74' y='30' width='9' height='4' rx='2' fill='%23fde68a' transform='rotate(-15 78 32)'/><ellipse cx='34' cy='36' rx='8' ry='4' fill='white' opacity='0.55' transform='rotate(-20 34 36)'/><ellipse cx='30' cy='34' rx='4' ry='2' fill='white' opacity='0.85' transform='rotate(-20 30 34)'/><ellipse cx='50' cy='54' rx='47' ry='31' fill='none' stroke='%23111' stroke-width='2.5'/></svg>") !important;
}

/* ── black / $100 — hot pink frosting */
.donut-mode .chip-disc.c-black,
.donut-mode .chip-disc2.c-black {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><clipPath id='ck'><ellipse cx='50' cy='46' rx='55' ry='24'/></clipPath></defs><ellipse cx='50' cy='58' rx='47' ry='31' fill='%23111'/><path fill-rule='evenodd' fill='%23D4921C' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><path fill-rule='evenodd' fill='%23FF3090' clip-path='url(%23ck)' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><ellipse cx='50' cy='52' rx='16' ry='10' fill='%235a2d00' stroke='%23111' stroke-width='2'/><rect x='20' y='38' width='9' height='4' rx='2' fill='%23fef3c7' transform='rotate(-25 24 40)'/><rect x='60' y='33' width='9' height='4' rx='2' fill='%2360a5fa' transform='rotate(20 64 35)'/><rect x='38' y='28' width='9' height='4' rx='2' fill='%2386efac' transform='rotate(-10 42 30)'/><rect x='68' y='44' width='9' height='4' rx='2' fill='%23fde68a' transform='rotate(30 72 46)'/><rect x='14' y='48' width='9' height='4' rx='2' fill='%23a78bfa' transform='rotate(-20 18 50)'/><rect x='74' y='30' width='9' height='4' rx='2' fill='%23bfdbfe' transform='rotate(-15 78 32)'/><ellipse cx='34' cy='36' rx='8' ry='4' fill='white' opacity='0.55' transform='rotate(-20 34 36)'/><ellipse cx='30' cy='34' rx='4' ry='2' fill='white' opacity='0.85' transform='rotate(-20 30 34)'/><ellipse cx='50' cy='54' rx='47' ry='31' fill='none' stroke='%23111' stroke-width='2.5'/></svg>") !important;
}

/* ── purple / $500 — purple frosting */
.donut-mode .chip-disc.c-purple,
.donut-mode .chip-disc2.c-purple {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><clipPath id='cp'><ellipse cx='50' cy='46' rx='55' ry='24'/></clipPath></defs><ellipse cx='50' cy='58' rx='47' ry='31' fill='%23111'/><path fill-rule='evenodd' fill='%23D4921C' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><path fill-rule='evenodd' fill='%239922EE' clip-path='url(%23cp)' d='M3,54 a47,31 0 1,1 94,0 a47,31 0 1,1 -94,0 Z M34,54 a16,10 0 1,0 32,0 a16,10 0 1,0 -32,0 Z'/><ellipse cx='50' cy='52' rx='16' ry='10' fill='%235a2d00' stroke='%23111' stroke-width='2'/><rect x='20' y='38' width='9' height='4' rx='2' fill='%23fde68a' transform='rotate(-25 24 40)'/><rect x='60' y='33' width='9' height='4' rx='2' fill='%23fca5a5' transform='rotate(20 64 35)'/><rect x='38' y='28' width='9' height='4' rx='2' fill='%2386efac' transform='rotate(-10 42 30)'/><rect x='68' y='44' width='9' height='4' rx='2' fill='%23bfdbfe' transform='rotate(30 72 46)'/><rect x='14' y='48' width='9' height='4' rx='2' fill='%23fef3c7' transform='rotate(-20 18 50)'/><rect x='74' y='30' width='9' height='4' rx='2' fill='%23f472b6' transform='rotate(-15 78 32)'/><ellipse cx='34' cy='36' rx='8' ry='4' fill='white' opacity='0.55' transform='rotate(-20 34 36)'/><ellipse cx='30' cy='34' rx='4' ry='2' fill='white' opacity='0.85' transform='rotate(-20 30 34)'/><ellipse cx='50' cy='54' rx='47' ry='31' fill='none' stroke='%23111' stroke-width='2.5'/></svg>") !important;
}


/* ── 💰 Penny / Home-Game Mode — US coins & money ───────────────
   chip-disc2 base overridden; ::before / ::after suppressed so
   only the SVG coin art shows.
   Map: c-white→penny(1¢)  c-red→nickel(5¢)  c-green→quarter(25¢)
        c-blue→half-dollar(50¢)  c-black→dollar($1)  c-purple→bills($)
   ─────────────────────────────────────────────────────────────── */
.penny-mode .chip-disc2 {
  background-color: transparent !important;
  border: none !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.75) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.penny-mode .chip-disc2::before,
.penny-mode .chip-disc2::after {
  display: none !important;
}

/* $1 — Penny (copper) */
.penny-mode .chip-disc2.c-white {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='52' cy='54' r='44' fill='%23000' opacity='0.4'/><circle cx='50' cy='50' r='44' fill='%23c0722a'/><circle cx='50' cy='50' r='40' fill='%23e09040' opacity='0.5'/><circle cx='50' cy='50' r='36' fill='none' stroke='%23a05018' stroke-width='1.5'/><circle cx='50' cy='50' r='44' fill='none' stroke='%23804010' stroke-width='5'/><text x='50' y='47' text-anchor='middle' font-size='28' font-weight='900' fill='%23502008' font-family='Arial,sans-serif'>1</text><text x='50' y='67' text-anchor='middle' font-size='16' font-weight='700' fill='%23502008' font-family='Arial,sans-serif'>c</text><ellipse cx='34' cy='30' rx='13' ry='6' fill='white' opacity='0.22' transform='rotate(-25 34 30)'/></svg>") !important;
}

/* $5 — Nickel (silver-gray) */
.penny-mode .chip-disc2.c-red {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='52' cy='54' r='44' fill='%23000' opacity='0.4'/><circle cx='50' cy='50' r='44' fill='%23989898'/><circle cx='50' cy='50' r='40' fill='%23c8c8c8' opacity='0.5'/><circle cx='50' cy='50' r='36' fill='none' stroke='%23787878' stroke-width='1.5'/><circle cx='50' cy='50' r='44' fill='none' stroke='%23646464' stroke-width='5'/><text x='50' y='47' text-anchor='middle' font-size='28' font-weight='900' fill='%23303030' font-family='Arial,sans-serif'>5</text><text x='50' y='67' text-anchor='middle' font-size='16' font-weight='700' fill='%23303030' font-family='Arial,sans-serif'>c</text><ellipse cx='34' cy='30' rx='13' ry='6' fill='white' opacity='0.3' transform='rotate(-25 34 30)'/></svg>") !important;
}

/* $25 — Quarter (silver, reeded edge) */
.penny-mode .chip-disc2.c-green {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='52' cy='54' r='44' fill='%23000' opacity='0.4'/><circle cx='50' cy='50' r='44' fill='%23b8b8b8'/><circle cx='50' cy='50' r='40' fill='%23d8d8d8' opacity='0.5'/><circle cx='50' cy='50' r='43' fill='none' stroke='%23d0d0d0' stroke-width='2' stroke-dasharray='3 2'/><circle cx='50' cy='50' r='36' fill='none' stroke='%23909090' stroke-width='1.2'/><text x='50' y='46' text-anchor='middle' font-size='24' font-weight='900' fill='%23383838' font-family='Arial,sans-serif'>25</text><text x='50' y='67' text-anchor='middle' font-size='15' font-weight='700' fill='%23383838' font-family='Arial,sans-serif'>c</text><ellipse cx='34' cy='30' rx='13' ry='6' fill='white' opacity='0.3' transform='rotate(-25 34 30)'/></svg>") !important;
}

/* $50 — Half Dollar (JFK, silver-blue) */
.penny-mode .chip-disc2.c-blue {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='52' cy='54' r='44' fill='%23000' opacity='0.4'/><circle cx='50' cy='50' r='44' fill='%23a0a8c0'/><circle cx='50' cy='50' r='40' fill='%23c8d0e8' opacity='0.5'/><circle cx='50' cy='50' r='43' fill='none' stroke='%23c0c8d8' stroke-width='2' stroke-dasharray='3 2'/><circle cx='50' cy='50' r='36' fill='none' stroke='%23707090' stroke-width='1.2'/><text x='50' y='46' text-anchor='middle' font-size='24' font-weight='900' fill='%23282838' font-family='Arial,sans-serif'>50</text><text x='50' y='67' text-anchor='middle' font-size='15' font-weight='700' fill='%23282838' font-family='Arial,sans-serif'>c</text><ellipse cx='34' cy='30' rx='13' ry='6' fill='white' opacity='0.3' transform='rotate(-25 34 30)'/></svg>") !important;
}

/* $100 — Dollar Coin (Sacagawea gold) */
.penny-mode .chip-disc2.c-black {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='52' cy='54' r='44' fill='%23000' opacity='0.4'/><circle cx='50' cy='50' r='44' fill='%23c89018'/><circle cx='50' cy='50' r='40' fill='%23e8c040' opacity='0.5'/><circle cx='50' cy='50' r='36' fill='none' stroke='%23a07010' stroke-width='1.5'/><circle cx='50' cy='50' r='44' fill='none' stroke='%23886008' stroke-width='5'/><text x='50' y='55' text-anchor='middle' font-size='26' font-weight='900' fill='%23503000' font-family='Arial,sans-serif'>$1</text><ellipse cx='34' cy='30' rx='13' ry='6' fill='white' opacity='0.25' transform='rotate(-25 34 30)'/></svg>") !important;
}

/* $500 — Stack of Bills (green money) */
.penny-mode .chip-disc2.c-purple {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='52' cy='54' r='44' fill='%23000' opacity='0.4'/><circle cx='50' cy='50' r='44' fill='%23155f15'/><rect x='18' y='63' width='64' height='7' rx='2' fill='%230d430d'/><rect x='18' y='55' width='64' height='9' rx='2' fill='%230f5010'/><rect x='18' y='35' width='64' height='21' rx='3' fill='%231a7a1a' stroke='%2390c890' stroke-width='1.5'/><rect x='22' y='38' width='56' height='15' rx='2' fill='none' stroke='%2390c890' stroke-width='0.8'/><text x='50' y='52' text-anchor='middle' font-size='16' font-weight='900' fill='%23c8f0c8' font-family='Arial,sans-serif'>$</text><ellipse cx='34' cy='28' rx='13' ry='6' fill='white' opacity='0.18' transform='rotate(-25 34 28)'/></svg>") !important;
}


/* ═══════════════════════════════════════════════════════════════
   CASINO CHIPS (chip-disc2) — flat casino style: white ring + colored inserts
   .chip-disc2        = white outer ring (background)
   ::before           = colored center face (inset 3px, radial-gradient)
   ::after            = 6 colored inserts in white ring (conic + mask)
   To switch back to home game chips: set CHIP_DISC_CLASS = 'chip-disc' in table.js
   ═══════════════════════════════════════════════════════════════ */
.chip-disc2 {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 3px 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.95),
              inset 0 1px 2px rgba(0,0,0,0.25);
}
.chip-col .chip-disc2:not(:last-child) { margin-bottom: -16px; }

.chip-disc2::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
}
.chip-disc2::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent 70%, black 70%);
  mask: radial-gradient(farthest-side, transparent 70%, black 70%);
}

/* $1 white */
.chip-disc2.c-white::before {
  background: radial-gradient(circle at 38% 32%, #f0f0f0, #c0c0c0);
}
.chip-disc2.c-white::after {
  background: conic-gradient(
    #aaa 0deg 24deg, transparent 24deg 60deg,
    #aaa 60deg 84deg, transparent 84deg 120deg,
    #aaa 120deg 144deg, transparent 144deg 180deg,
    #aaa 180deg 204deg, transparent 204deg 240deg,
    #aaa 240deg 264deg, transparent 264deg 300deg,
    #aaa 300deg 324deg, transparent 324deg 360deg
  );
}

/* $5 red */
.chip-disc2.c-red::before {
  background: radial-gradient(circle at 38% 32%, #e83030, #a80808);
}
.chip-disc2.c-red::after {
  background: conic-gradient(
    #e03030 0deg 24deg, transparent 24deg 60deg,
    #e03030 60deg 84deg, transparent 84deg 120deg,
    #e03030 120deg 144deg, transparent 144deg 180deg,
    #e03030 180deg 204deg, transparent 204deg 240deg,
    #e03030 240deg 264deg, transparent 264deg 300deg,
    #e03030 300deg 324deg, transparent 324deg 360deg
  );
}

/* $10 blue */
.chip-disc2.c-blue::before {
  background: radial-gradient(circle at 38% 32%, #4488f0, #1444b8);
}
.chip-disc2.c-blue::after {
  background: conic-gradient(
    #2060d0 0deg 24deg, transparent 24deg 60deg,
    #2060d0 60deg 84deg, transparent 84deg 120deg,
    #2060d0 120deg 144deg, transparent 144deg 180deg,
    #2060d0 180deg 204deg, transparent 204deg 240deg,
    #2060d0 240deg 264deg, transparent 264deg 300deg,
    #2060d0 300deg 324deg, transparent 324deg 360deg
  );
}

/* $25 green */
.chip-disc2.c-green::before {
  background: radial-gradient(circle at 38% 32%, #35bb58, #116828);
}
.chip-disc2.c-green::after {
  background: conic-gradient(
    #2a8a2a 0deg 24deg, transparent 24deg 60deg,
    #2a8a2a 60deg 84deg, transparent 84deg 120deg,
    #2a8a2a 120deg 144deg, transparent 144deg 180deg,
    #2a8a2a 180deg 204deg, transparent 204deg 240deg,
    #2a8a2a 240deg 264deg, transparent 264deg 300deg,
    #2a8a2a 300deg 324deg, transparent 324deg 360deg
  );
}

/* $50 orange */
.chip-disc2.c-orange::before {
  background: radial-gradient(circle at 38% 32%, #f09828, #b85800);
}
.chip-disc2.c-orange::after {
  background: conic-gradient(
    #e08010 0deg 24deg, transparent 24deg 60deg,
    #e08010 60deg 84deg, transparent 84deg 120deg,
    #e08010 120deg 144deg, transparent 144deg 180deg,
    #e08010 180deg 204deg, transparent 204deg 240deg,
    #e08010 240deg 264deg, transparent 264deg 300deg,
    #e08010 300deg 324deg, transparent 324deg 360deg
  );
}

/* $100 black (gold inserts) */
.chip-disc2.c-black { background: #1c1c1c; }
.chip-disc2.c-black::before {
  background: radial-gradient(circle at 38% 32%, #424242, #121212);
}
.chip-disc2.c-black::after {
  background: conic-gradient(
    #c8944a 0deg 24deg, transparent 24deg 60deg,
    #c8944a 60deg 84deg, transparent 84deg 120deg,
    #c8944a 120deg 144deg, transparent 144deg 180deg,
    #c8944a 180deg 204deg, transparent 204deg 240deg,
    #c8944a 240deg 264deg, transparent 264deg 300deg,
    #c8944a 300deg 324deg, transparent 324deg 360deg
  );
}

/* $500 purple (light purple inserts) */
.chip-disc2.c-purple { background: #3a1060; }
.chip-disc2.c-purple::before {
  background: radial-gradient(circle at 38% 32%, #b068f0, #6a1ab0);
}
.chip-disc2.c-purple::after {
  background: conic-gradient(
    #d9a8ff 0deg 24deg, transparent 24deg 60deg,
    #d9a8ff 60deg 84deg, transparent 84deg 120deg,
    #d9a8ff 120deg 144deg, transparent 144deg 180deg,
    #d9a8ff 180deg 204deg, transparent 204deg 240deg,
    #d9a8ff 240deg 264deg, transparent 264deg 300deg,
    #d9a8ff 300deg 324deg, transparent 324deg 360deg
  );
}


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

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

/* Chip stack positioned entirely by JS (left + top) in table-space coords.
   Position:absolute within .poker-table (same coordinate space as bet stacks). */
.pot-chips-side {
  position: absolute;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column; /* chips on top, label at bottom — bottom positioning keeps label fixed */
  align-items: center;
  gap: 6px;
  pointer-events: none;
  /* left and bottom are set by JS on wide screens; left/top on others */
}
.pot-chips-spacer { display: none; }

/* The chip pill for the pot */
.pot-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
/* Chip tower hidden — stays in DOM so animatePotPushToPlayer can clone it */
#pot-chips { display: none !important; }

/* 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;
}

/* ── Double Board ────────────────────────────────────────────── */
.community-cards--board-b {
  position: relative;
  margin-top: 6px;
}
.dual-board-toast {
  position: fixed;
  /* left / bottom / top set by positionDualBoardToast() in JS */
  transform: translateX(-50%) translateY(10px);
  background: rgba(18,18,28,0.93);
  border: 1px solid #a78bfa;
  border-radius: 10px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 299;
}
.dual-board-toast.dbt-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dbt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #e2e8f0;
  white-space: nowrap;
}
.dbt-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #a78bfa;
  min-width: 54px;
}
.dbt-winner {
  font-weight: 600;
}
.dbt-scoop {
  justify-content: center;
  gap: 6px;
}
.dbt-scoop-name {
  font-weight: 700;
  color: #e2e8f0;
  font-size: 0.9rem;
}
.dbt-scoop-label {
  font-weight: 800;
  color: #fbbf24;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

/* Dual board active state — card size, chip suppression */
.dual-board-active #community-cards,
.dual-board-active #community-b-cards { position: relative; }
.dual-board-active #community-cards::before {
  content: none;
  pointer-events: none;
}
/* 20% smaller community cards when two boards are shown */
.dual-board-active #community-cards .card.lg,
.dual-board-active #community-b-cards .card.lg {
  height: 94px;
  width: 67px;
}
/* rank/suit font-size auto-scales via 10cqh container query */

/* In dual board mode lay the bet stacks out horizontally:
   amount label on the left, chip tower on the right.
   This moves the chips away from the board area. */
.dual-board-active .bet-stack {
  flex-direction: row;
  align-items: center;
  width: auto;
  gap: 6px;
}
/* Override top/bottom column-reverse so both use same row direction */
.dual-board-active .bet-stack--top,
.dual-board-active .bet-stack--bottom,
.dual-board-active .bet-stack--ante-top,
.dual-board-active .bet-stack--ante-bottom {
  flex-direction: row;
  align-items: center;
}
/* Keep the pop animation correct for the new geometry */
@keyframes stackPopInRow {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.65); }
  65%  { transform: translateX(-50%) scale(1.07); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
.dual-board-active .bet-stack:not(.hidden):not(.no-pop) {
  animation: stackPopInRow 0.22s ease-out both;
}
/* Align chip tower to center vertically with the label */
.dual-board-active .chip-tower {
  align-items: center;
}

@media (max-width: 1024px) {
  .dualboard-toggle { display: none !important; }
  .community-cards--board-b { display: none !important; }
  .dual-board-toast { display: none !important; }
}

/* ── 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: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  height: 96px;
  width: 68px;
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
  container-type: size;
}

.card.lg {
  height: 118px;
  width: 84px;
  gap: 4px;
  padding-bottom: 0;
}

.card.sm {
  height: 72px;
  width: 50px;
  gap: 2px;
  padding-bottom: 6px;
}

.card.back {
  background: linear-gradient(150deg, #7a2419 0%, #4e1008 100%);
  color: transparent;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    2px 4px 10px rgba(0,0,0,0.6);
}

.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;
}

/* ── Rabbit Hunt: undealt board cards shown face-down after a fold ─── */
.rabbit-card-back {
  cursor: pointer;
  background: linear-gradient(150deg, #132e4a 0%, #081824 100%) !important;
  opacity: 0.82;
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    2px 4px 10px rgba(0,0,0,0.6),
    0 0 8px rgba(70,160,255,0.12) !important;
}
.rabbit-card-back::before {
  border-color: rgba(70,160,255,0.22) !important;
}
.rabbit-card-back::after {
  /* Clear the crosshatch — the visibility icon serves as the affordance */
  background: none !important;
}
.rabbit-card-back:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    4px 10px 20px rgba(0,0,0,0.65),
    0 0 14px rgba(70,160,255,0.28) !important;
}
.rabbit-peek-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.15rem;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  z-index: 2;
  user-select: none;
}
.rabbit-card-back:hover .rabbit-peek-icon {
  color: rgba(255,255,255,0.82);
}


/* Rank — upper-left corner, 10% of card height */
.card .rank {
  position: absolute;
  top: 5%;
  left: 8%;
  font-size: 26cqh;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}

/* Suit pip — dead center, 20% of card width */
.card .suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40cqw;
  line-height: 1;
  font-variant-emoji: text;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  filter: none;
}

.card .corner { display: none; }

.card.red  { color: #c0392b; }

/* ── 4-color deck overrides ─────────────────────────────────── */
/* When body[data-four-color-deck] is set:
   spades = black (unchanged), hearts = red (unchanged),
   diamonds = blue, clubs = green                               */
body[data-four-color-deck] .card.suit-d  { color: #1565c0; }
body[data-four-color-deck] .card.suit-c  { color: #1b5e20; }
body[data-four-color-deck] .ahc-card.suit-d { color: #1565c0; }
body[data-four-color-deck] .ahc-card.suit-c { color: #1b5e20; }
body[data-four-color-deck] .bdo-card.suit-d { color: #1565c0; }
body[data-four-color-deck] .bdo-card.suit-c { color: #1b5e20; }
body[data-four-color-deck] .hh-card.suit-d  { color: #1565c0; }
body[data-four-color-deck] .hh-card.suit-c  { color: #1b5e20; }
/* Inline-span cards (activity log, hand description text) */
body[data-four-color-deck] span.suit-d { color: #1565c0; }
body[data-four-color-deck] span.suit-c { color: #1b5e20; }

/* ── Color card style ────────────────────────────────────────── */
/* body[data-card-style="color"] — colored card faces per suit    */
/* ♠ spades: dark navy  ♥ hearts: crimson  ♦ diamonds: royal blue  ♣ clubs: forest green */
body[data-card-style="color"] .card.suit-s,
body[data-card-style="color"] .card.suit-s.red {
  background: linear-gradient(150deg, #2c3e60 0%, #1a2540 100%);
  color: #e8ecf5;
}
body[data-card-style="color"] .card.suit-h,
body[data-card-style="color"] .card.red.suit-h {
  background: linear-gradient(150deg, #c0392b 0%, #8b1a10 100%);
  color: #fff5f5;
}
body[data-card-style="color"] .card.suit-d,
body[data-card-style="color"] .card.red.suit-d {
  background: linear-gradient(150deg, #1565c0 0%, #0d3d7a 100%);
  color: #e8f4ff;
}
body[data-card-style="color"] .card.suit-c {
  background: linear-gradient(150deg, #2e7d32 0%, #1b4d1e 100%);
  color: #edfaee;
}
/* Override the text colors — white on colored backgrounds */
body[data-card-style="color"] .card.suit-s,
body[data-card-style="color"] .card.suit-h,
body[data-card-style="color"] .card.suit-d,
body[data-card-style="color"] .card.suit-c {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.35),
    2px 4px 10px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
/* When 4-color is also on, suit colors still apply via text for ahc/bdo/hh cards */
/* but the main .card faces override to white text — so reset the 4-color text overrides */
body[data-card-style="color"][data-four-color-deck] .card.suit-d,
body[data-card-style="color"][data-four-color-deck] .card.suit-c {
  color: inherit; /* let the background rule's color win */
}

/* ahc-card (hand strength panel) colored faces */
body[data-card-style="color"] .ahc-card.suit-s { background: linear-gradient(150deg,#2c3e60 0%,#1a2540 100%); color:#e8ecf5; box-shadow: 0 1px 5px rgba(0,0,0,0.55); }
body[data-card-style="color"] .ahc-card.suit-h { background: linear-gradient(150deg,#c0392b 0%,#8b1a10 100%); color:#fff5f5; box-shadow: 0 1px 5px rgba(0,0,0,0.55); }
body[data-card-style="color"] .ahc-card.suit-d { background: linear-gradient(150deg,#1565c0 0%,#0d3d7a 100%); color:#e8f4ff; box-shadow: 0 1px 5px rgba(0,0,0,0.55); }
body[data-card-style="color"] .ahc-card.suit-c { background: linear-gradient(150deg,#2e7d32 0%,#1b4d1e 100%); color:#edfaee; box-shadow: 0 1px 5px rgba(0,0,0,0.55); }
/* Override red/black text colors for ahc in color mode */
body[data-card-style="color"] .ahc-card.suit-s,
body[data-card-style="color"] .ahc-card.suit-h,
body[data-card-style="color"] .ahc-card.suit-d,
body[data-card-style="color"] .ahc-card.suit-c { border-color: rgba(0,0,0,0.35); }

/* bdo-card (button draw overlay) colored faces */
body[data-card-style="color"] .bdo-card.suit-s { background: linear-gradient(150deg,#2c3e60 0%,#1a2540 100%); color:#e8ecf5; box-shadow: 0 0 0 1px rgba(0,0,0,0.28), 2px 4px 10px rgba(0,0,0,0.55); }
body[data-card-style="color"] .bdo-card.suit-h { background: linear-gradient(150deg,#c0392b 0%,#8b1a10 100%); color:#fff5f5; box-shadow: 0 0 0 1px rgba(0,0,0,0.28), 2px 4px 10px rgba(0,0,0,0.55); }
body[data-card-style="color"] .bdo-card.suit-d { background: linear-gradient(150deg,#1565c0 0%,#0d3d7a 100%); color:#e8f4ff; box-shadow: 0 0 0 1px rgba(0,0,0,0.28), 2px 4px 10px rgba(0,0,0,0.55); }
body[data-card-style="color"] .bdo-card.suit-c { background: linear-gradient(150deg,#2e7d32 0%,#1b4d1e 100%); color:#edfaee; box-shadow: 0 0 0 1px rgba(0,0,0,0.28), 2px 4px 10px rgba(0,0,0,0.55); }
/* Winner glow on colored bdo-cards — no white inset stripe */
body[data-card-style="color"] .bdo-player.bdo-winner .bdo-card.suit-s,
body[data-card-style="color"] .bdo-player.bdo-winner .bdo-card.suit-h,
body[data-card-style="color"] .bdo-player.bdo-winner .bdo-card.suit-d,
body[data-card-style="color"] .bdo-player.bdo-winner .bdo-card.suit-c {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.28),
    2px 4px 10px rgba(0,0,0,0.55),
    0 0 0 3px var(--gold), 0 0 12px rgba(200,148,74,0.4);
}

/* hh-card (hand history) colored faces */
body[data-card-style="color"] .hh-card.suit-s { background: linear-gradient(150deg,#2c3e60 0%,#1a2540 100%) !important; color:#e8ecf5 !important; border-color:rgba(0,0,0,0.35); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
body[data-card-style="color"] .hh-card.suit-h { background: linear-gradient(150deg,#c0392b 0%,#8b1a10 100%) !important; color:#fff5f5 !important; border-color:rgba(0,0,0,0.35); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
body[data-card-style="color"] .hh-card.suit-d { background: linear-gradient(150deg,#1565c0 0%,#0d3d7a 100%) !important; color:#e8f4ff !important; border-color:rgba(0,0,0,0.35); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
body[data-card-style="color"] .hh-card.suit-c { background: linear-gradient(150deg,#2e7d32 0%,#1b4d1e 100%) !important; color:#edfaee !important; border-color:rgba(0,0,0,0.35); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }

/* ── Card style picker — swatch buttons matching deck-btn style ── */
.card-style-picker {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}
.card-style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--bg-input);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 7px 10px 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  color: var(--text-secondary);
}
.card-style-btn:hover    { border-color: var(--accent-border); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.card-style-btn.selected { border-color: var(--accent); background: var(--accent-bg); }
/* Never let hover/selected state bleed into the card previews or label */
.card-style-btn .cs-label        { color: var(--text-secondary); }
.card-style-btn.selected .cs-label { color: var(--accent); }
.card-style-btn .cs-suit-red     { color: #c0392b !important; }
.card-style-btn .cs-suit-dark    { color: #1a1a2e !important; }
.card-style-btn .cs-suit-white   { color: rgba(255,255,255,0.92) !important; }
.card-style-btn .cs-suit-blue    { color: #1565c0 !important; }
.card-style-btn .cs-suit-green   { color: #1b5e20 !important; }
/* Pin rank to dark on white cards, white on colored cards — never inherit button color */
.card-style-btn .cs-card-white .cs-rank  { color: #1a1a2e !important; }
.card-style-btn .cs-card-navy  .cs-rank  { color: rgba(255,255,255,0.92) !important; }
.card-style-btn .cs-card-red   .cs-rank  { color: rgba(255,255,255,0.92) !important; }
.card-style-btn .cs-card-blue  .cs-rank  { color: rgba(255,255,255,0.92) !important; }
.card-style-btn .cs-card-green .cs-rank  { color: rgba(255,255,255,0.92) !important; }
.cs-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Row of mini card previews inside each button */
.cs-preview {
  display: flex;
  gap: 3px;
  align-items: center;
}
/* Each mini card in the preview */
.cs-card {
  width: 22px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.cs-rank {
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
}
.cs-suit {
  font-size: 0.78rem;
  line-height: 1;
}
/* Classic card: white face */
.cs-card-white  { background: linear-gradient(160deg,#fefcf7 0%,#f0ece0 100%); }
/* Colored faces */
.cs-card-navy   { background: linear-gradient(150deg,#2c3e60 0%,#1a2540 100%); }
.cs-card-red    { background: linear-gradient(150deg,#c0392b 0%,#8b1a10 100%); }
.cs-card-blue   { background: linear-gradient(150deg,#1565c0 0%,#0d3d7a 100%); }
.cs-card-green  { background: linear-gradient(150deg,#2e7d32 0%,#1b4d1e 100%); }
/* Suit text colors */
.cs-suit-red    { color: #c0392b; }
.cs-suit-dark   { color: #1a1a2e; }
.cs-suit-white  { color: rgba(255,255,255,0.92); }
.cs-suit-blue   { color: #1565c0; }
.cs-suit-green  { color: #1b5e20; }

/* ── Pot display — pill badge above the community card row ───── */
.pot-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  transition: visibility 0s;
  margin-bottom: 12px;
}

.pot-area.pot-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Black chip icon inside the pot pill */
.pot-chip-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Single pill that reads "Pot: 750" */
.pot-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  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: 2px 10px;
  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: none; }

/* ── Chip sweep animation — stacks slide toward pot center ──── */
/* JS sets --sweep-dx and --sweep-dy on each stack before adding .sweeping.
   Both top and bottom stacks use the same animation since the direction
   is baked into the CSS custom properties computed by positionBetStacks(). */
@keyframes chipSweepToCenter {
  0%   { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform:
           translateX(calc(-50% + var(--sweep-dx, -80px)))
           translateY(var(--sweep-dy, 40px))
           scale(0.3); }
}
/* legacy keyframe names kept for safety — both just alias the unified one */
@keyframes chipSweepToCenter_bottom {
  0%   { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform:
           translateX(calc(-50% + var(--sweep-dx, -80px)))
           translateY(var(--sweep-dy, -80px))
           scale(0.3); }
}
@keyframes chipSweepToCenter_top {
  0%   { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform:
           translateX(calc(-50% + var(--sweep-dx, 80px)))
           translateY(var(--sweep-dy, 80px))
           scale(0.3); }
}
.bet-stack--bottom.sweeping {
  animation: chipSweepToCenter 0.38s ease-in forwards;
  pointer-events: none;
}
.bet-stack--top.sweeping {
  animation: chipSweepToCenter 0.38s ease-in forwards;
  pointer-events: none;
}
.seat-slot .bet-stack.sweeping {
  animation: chipSweepToCenter 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 label — shown on the winning player's plaque ── */
.player-info-box.plaque-winner {
  border-color: rgba(200,148,74,0.9);
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.3),
    0 0 18px rgba(200,148,74,0.35),
    0 4px 18px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(200,148,74,0.15);
  animation: plaqueWinnerPop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.player-info-box.plaque-split {
  border-color: rgba(128,200,255,0.7);
  box-shadow: 0 0 14px rgba(128,200,255,0.3), 0 4px 18px rgba(0,0,0,0.6);
  animation: plaqueWinnerPop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* Winner text reuses the .p-last-action slot — keep it visible on winner plaques */
.player-info-box.plaque-winner .p-last-action.act-winner,
.player-info-box.plaque-split  .p-last-action.act-split  { opacity: 1; }

@keyframes plaqueWinnerPop {
  0%   { box-shadow: 0 0 0 rgba(200,148,74,0); }
  50%  { box-shadow: 0 0 0 2px rgba(200,148,74,0.7), 0 0 24px rgba(200,148,74,0.5); }
  100% { box-shadow: 0 0 0 1px rgba(200,148,74,0.3), 0 0 18px rgba(200,148,74,0.35), 0 4px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(200,148,74,0.15); }
}

/* 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 */


.street-announce {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(160deg, rgba(12,16,24,0.97), rgba(8,11,18,0.97));
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  color: var(--text-primary);
  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(101,130,162,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); }
}

/* ── Level-up toast ───────────────────────────────────────────── */
.level-up-toast {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  background: rgba(10, 14, 20, 0.92);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  padding: 0.65rem 1.6rem 0.7rem;
  pointer-events: none;
  z-index: 60;
  text-align: center;
  min-width: 180px;
}
@media (max-width: 768px) {
  .level-up-toast {
    /* position: fixed anchors to viewport on mobile so right:8px is from screen edge */
    position: fixed;
    top: auto;
    bottom: auto;
    right: 8px;
    left: auto;
    transform: none;
    min-width: 0;
  }
}
/* Mobile animation: no X-translate since toast is right-anchored */
.level-up-toast--mobile.show,
.level-up-toast--bvb.show {
  animation: levelUpPopMobile 3.2s forwards;
}
.level-up-toast.hidden { display: none; }
.level-up-toast.show {
  animation: levelUpPop 3.2s forwards;
}
.level-up-toast-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  opacity: 1;
}
.level-up-toast-level {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.03em;
}
.level-up-toast-blinds {
  font-size: 0.85rem;
  color: #7ee8a2;
  font-family: var(--font-mono);
  font-weight: 600;
}
@keyframes levelUpPopMobile {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.8); }
  12%  { opacity: 1; transform: translateY(0) scale(1.04); }
  22%  { transform: translateY(0) scale(0.98); }
  30%  { transform: translateY(0) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(0) scale(0.97); }
}
/* BvB compact single-line variant */
.level-up-toast--bvb {
  flex-direction: row;
  padding: 0.28rem 0.75rem;
  min-width: 0;
  gap: 0;
  border-radius: 20px;
}
.level-up-toast-bvb {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--gold-light);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
@keyframes levelUpPop {
  0%   { opacity: 0; transform: translate(-50%, -44%) scale(0.8); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  22%  { transform: translate(-50%, -50%) scale(0.98); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -52%) scale(0.97); }
}
/* Badge warning pulse removed — badge now shows only current level/blinds/timer */

@media (max-width: 768px) {
  .chip-tower {
    transform: scale(0.8);
    transform-origin: bottom center;
  }
  .bet-stack--top .chip-tower {
    transform-origin: top center;
  }
  .bet-stack-amount {
    font-size: 0.858rem; /* 0.78rem * 1.1 */
  }
}

/* ── In-game badge unlock toast ──────────────────────────────── */
.badge-toast {
  position: fixed;
  bottom: calc(148px + 1.1rem); /* above the bottom-zone */
  right: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(10, 13, 20, 0.95);
  border: 1px solid rgba(200, 148, 74, 0.55);
  border-left: 3px solid var(--gold, #c8944a);
  border-radius: 10px;
  padding: 0.6rem 0.9rem 0.6rem 0.75rem;
  min-width: 220px;
  max-width: 300px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.55),
    0 0 0 1px rgba(200,148,74,0.08);
  pointer-events: none;
  z-index: 65;
  backdrop-filter: blur(4px);
}
.badge-toast.hidden { display: none; }
.badge-toast.show {
  display: flex;
  animation: badgeToastSlide 4.5s forwards;
}
@keyframes badgeToastSlide {
  0%   { opacity: 0; transform: translateX(24px); }
  10%  { opacity: 1; transform: translateX(0); }
  75%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(8px); }
}
.badge-toast-img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: contain;
}
.badge-toast-body {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}
.badge-toast-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold, #c8944a);
  line-height: 1.2;
}
.badge-toast-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge-toast-desc {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.3;
}

/* 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;
}

/* Card fold-away — slides off toward the muck when player folds */
@keyframes cardFoldAway {
  0%   { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg) scale(1); }
  40%  { opacity: 0.7; transform: translateY(calc(var(--fold-dir, 1) * 18px)) translateX(6px) rotate(4deg) scale(0.95); }
  100% { opacity: 0; transform: translateY(calc(var(--fold-dir, 1) * 52px)) translateX(12px) rotate(12deg) scale(0.78); }
}
.card.card-fold-away {
  animation: cardFoldAway 0.28s ease-in forwards;
  pointer-events: none;
  transition: none;
}

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

/* Card reveal flip — face-down → face-up */
@keyframes cardFlipOut {
  0%   { transform: rotateY(0deg)   scale(1); }
  100% { transform: rotateY(90deg)  scale(0.9); }
}
@keyframes cardFlipIn {
  0%   { transform: rotateY(-90deg) scale(0.9); }
  100% { transform: rotateY(0deg)   scale(1); }
}
.card.card-flip-out {
  animation: cardFlipOut 0.15s ease-in forwards;
  transform-origin: center center;
}
.card.card-flip-in {
  animation: cardFlipIn 0.18s ease-out both;
  transform-origin: center center;
}

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

/* Button row: background fills edge-to-edge; hand panel pinned to right edge */
.action-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #0b0f18;
  min-height: 80px;
  position: relative;
  justify-content: center;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* 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(--accent);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(101,130,162,0.25);
}
.action-status-label.opp-turn {
  color: var(--text-muted);
}

/* CENTER — button grid + sizing row — fixed width, truly centered via margin auto, background fills edge-to-edge via the col */
.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;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  flex: 1;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.btn-action {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: filter 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  white-space: normal;
  position: relative;
  overflow: hidden;
  touch-action: manipulation; /* eliminates 300ms tap delay on mobile */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn-action-sub {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1.15;
  text-transform: none;
}

/* Slot 1: Fold */
.btn-fold {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--text-primary);
}
/* Slot 2: Check (default) or Call */
.btn-check {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--text-secondary);
}
.btn-check[data-action="call"] {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  border-color: var(--accent-border);
  color: #fff;
  box-shadow: 0 2px 10px rgba(61,122,181,0.30);
}
/* Slot 3: Bet (default) or Raise */
.btn-bet {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  border-color: var(--accent-border);
  color: #fff;
  box-shadow: 0 2px 10px rgba(61,122,181,0.30);
}
.btn-bet[data-action="raise"] {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  border-color: var(--accent-border);
  color: #fff;
  box-shadow: 0 2px 10px rgba(61,122,181,0.35);
}
/* Slot 4: All In */
.btn-allin {
  background: linear-gradient(135deg, #c0392b 0%, #7a1a10 100%);
  border-color: rgba(220,60,50,0.5);
  color: #ffd0cc;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 10px rgba(200,50,40,0.25);
}

.btn-action:hover:not(:disabled) {
  filter: brightness(1.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.btn-fold:hover:not(:disabled),
.btn-check:not([data-action="call"]):hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: var(--text-primary);
  filter: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.btn-action:active:not(:disabled) {
  filter: brightness(0.88);
  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; }

/* btn-action.hidden uses visibility so layout space is preserved */
.btn-action.hidden { visibility: hidden !important; display: flex !important; pointer-events: none; }

/* action-main.hidden preserves bottom-zone height at game_over — prevents mobile-me-strip from shifting */
.action-main.hidden { display: flex !important; visibility: hidden; pointer-events: none; }

/* Whole column dims while action is in-flight — covers both rows */
.action-btns-col.in-flight {
  opacity: 0.3;
  pointer-events: none;
}

/* Whole column faded (not hidden) when it's not the player's turn */
.action-btns-col {
  transition: opacity 0.15s ease;
}
.action-btns-col.turn-hidden {
  opacity: 0.15;
  pointer-events: none;
}

/* Sizing row — below buttons, always occupies space to prevent layout jump */
.sizing-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  height: 56px;
  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: column;
  align-items: flex-end;
  justify-content: center;
  padding: 6px 14px 6px 10px;
  gap: 5px;
  width: 160px;
  overflow: hidden;
}

.action-hand-name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  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;
  text-align: right;
}

.action-hand-value {
  font-size: 0.88rem;
  font-weight: 800;
  color: #2ea84a;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-align: right;
}
.action-hand-value.weak   { color: #e07070; }
.action-hand-value.orange { color: #e07830; }
.action-hand-value.mid    { color: #c8a860; }
.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;
  justify-content: flex-end;
  flex-shrink: 0;
}
.ahc-card {
  width: 22px;
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(160deg, #fefcf7 0%, #6c6963 100%);
  border: 1px solid rgba(0,0,0,0.2);
  display: inline-block;
  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), inset 0 -1px 0 rgba(0,0,0,0.15);
  user-select: none;
  flex-shrink: 0;
  position: relative;
  container-type: size;
  vertical-align: bottom;
}

.ahc-card.red   { color: #c0392b; }
.ahc-card.black { color: #1a1a2e; }
.ahc-card.facedown { background: linear-gradient(150deg, #7a2419 0%, #4e1008 50%, #3a0c06 100%); border-color: rgba(0,0,0,0.4); }
.ahc-rank {
  position: absolute;
  top: 5%;
  left: 8%;
  font-size: 26cqh;
  line-height: 1;
  letter-spacing: -0.5px;
}
.ahc-suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40cqw;
  line-height: 1;
}

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

/* ── Dual-board hand eval rows ──────────────────────────────── */
.action-hand-col.dual-eval {
  justify-content: flex-start;
  padding-top: 4px;
  padding-bottom: 0;
  gap: 3px;
}
/* Hide history button + cap in dual-board mode — header is already crowded */
body.dual-board-active #btn-history,
body.dual-board-active .hand-num.btn-header-cap { display: none !important; }

/* Hide the 'HAND' label above the eval cards in dual-board mode */
body.dual-board-active .action-hand-label { display: none; }

.ahc-board-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
}
.ahc-board-lbl {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #a78bfa;
  line-height: 1;
}
.ahc-board-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #2ea84a;
  white-space: nowrap;
  line-height: 1.1;
}
.ahc-board-name.weak   { color: #e07070; }
.ahc-board-name.orange { color: #e07830; }
.ahc-board-name.mid    { color: #c8a860; }
.ahc-board-name.empty  { color: var(--text-muted); font-weight: 400; }
.ahc-board-cards {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
}
.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(--accent) var(--pct, 0%), rgba(255,255,255,0.12) var(--pct, 0%));
  border-radius: 4px;
  cursor: pointer;
  height: 6px;
  outline: none;
  flex: 1;
  min-width: 80px;
  align-self: center;
}
.bet-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  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: 22px;
  width: 22px;
}
.bet-slider::-moz-range-thumb {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  border: 2px solid rgba(0,0,0,0.4);
  border-radius: 50%;
  cursor: pointer;
  height: 22px;
  width: 22px;
}

.bet-input {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0 0.45rem;
  text-align: center;
  width: 68px;
  flex-shrink: 0;
  align-self: stretch;
}
.bet-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(101,130,162,0.15); }

.btn-bb-step {
  padding: 0 8px;
  font-size: 1rem;
  min-width: 28px;
  flex-shrink: 0;
  line-height: 1;
}

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

.btn-quick {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 10px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.btn-quick:hover {
  background: rgba(101,130,162,0.1);
  border-color: var(--accent-border);
  color: var(--accent);
}
.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;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.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 rgba(255,255,255,0.07);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  flex-shrink: 0;
  cursor: default;
  user-select: none;
  background: rgba(255,255,255,0.02);
}

.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: #3c3f45 transparent;
}

.activity-log-body::-webkit-scrollbar { width: 3px; }
.activity-log-body::-webkit-scrollbar-track { background: transparent; }
.activity-log-body::-webkit-scrollbar-thumb { background: #3c3f45; 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 {
  overflow: hidden;
}
.bottom-zone-log.log-collapsed {
  top: auto;
}

.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: #4a5060;
  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 rgba(255,255,255,0.07);
}

.activity-log-entry.al-street {
  color: #6090b0;
  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 rgba(80,140,180,0.4);
  border-top: none;
}

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

.activity-log-entry.al-result {
  font-weight: 700;
  border-left-color: #4a9e6a;
  color: #7ee8a2;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.activity-log-entry.al-result.al-lose {
  border-left-color: #c0392b;
  color: #c0392b;
}

.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: fixed;
  inset: 0;
  z-index: 205;
  background: rgba(8, 11, 18, 0.92);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.waiting-overlay.hidden {
  display: none;
}

/* ── Disconnect banner (vs_friend) ──────────────────────────── */
.disconnect-banner {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
}

.disconnect-banner.hidden { display: none; }

.disconnect-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(10, 14, 20, 0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  white-space: nowrap;
  pointer-events: all;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.disconnect-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.disconnect-text {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.disconnect-exit-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: background 0.15s;
}

.disconnect-exit-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* ── Game dim overlay — sits out / player left ──────────────────────────── */
.game-dim-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 11, 18, 0.82);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}
.game-dim-overlay.hidden {
  display: none;
}
.game-dim-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(160deg, rgba(18,24,36,0.97) 0%, rgba(12,16,26,0.97) 100%);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  min-width: 220px;
}
.game-dim-icon {
  font-size: 2.4rem;
  color: var(--text-secondary);
  opacity: 0.85;
}
.game-dim-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.game-dim-subtitle {
  font-size: 0.82rem;
  color: #8899aa;
  min-height: 1.2em;
}
.game-dim-actions {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.game-dim-exit,
.game-dim-back-in {
  font-size: 0.8rem;
  padding: 0.55rem 1.25rem;
  line-height: 1.2;
}

/* ── Exit confirm modal ──────────────────────────────────────── */
/* Same overlay + card shell as game-dim-overlay, just higher z   */
.exit-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(8, 11, 18, 0.88);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exit-confirm-modal.hidden {
  display: none;
}
.exit-confirm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(160deg, rgba(18,24,36,0.97) 0%, rgba(12,16,26,0.97) 100%);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  min-width: 220px;
}
.exit-confirm-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.exit-confirm-sub {
  font-size: 0.82rem;
  color: #8899aa;
  min-height: 1.2em;
}
.exit-confirm-actions {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.exit-confirm-actions .btn {
  font-size: 0.8rem;
  padding: 0.55rem 1.25rem;
  line-height: 1.2;
}
.btn-exit-confirm {
  background: linear-gradient(135deg, #c0392b 0%, #7a1a10 100%);
  border: 1.5px solid rgba(220,60,50,0.5);
  color: #ffd0cc;
  box-shadow: 0 2px 10px rgba(200,50,40,0.25);
}

/* ── Landscape-not-supported overlay (mobile only) ────────────── */
.landscape-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #080e1a;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.landscape-overlay.visible {
  display: flex;
}
.landscape-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  padding: 2.5rem 2rem;
}
.landscape-icon {
  font-size: 3.5rem;
  line-height: 1;
  animation: landscapeRotateHint 1.8s ease-in-out infinite;
  display: block;
  color: var(--gold);
}
@keyframes landscapeRotateHint {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-90deg); }
  60%  { transform: rotate(-90deg); }
  85%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.landscape-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.landscape-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 220px;
}

/* ── Button draw overlay ─────────────────────────────────────── */
.button-draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 206;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.button-draw-overlay.hidden {
  display: none;
}
.button-draw-overlay .button-draw-card {
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.button-draw-overlay.visible .button-draw-card {
  opacity: 1;
}

/* ── Persistent game backdrop ─────────────────────────────── */
/* Sits behind both overlays — table shows through blurred beneath it. */
.game-backdrop {
  position: fixed;
  inset: 0;
  z-index: 204;
  background: rgba(8, 11, 18, 0.72);
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.game-backdrop.hidden {
  display: none;
}
.game-backdrop.fading {
  opacity: 0;
}

/* ── Pre-game loading state: hide placeholders until backdrop clears ── */
/* Community card empty slots and pot label are hidden until
   JS removes the .game-loading class from #table-screen */
#table-screen.game-loading #community-cards .card.empty {
  visibility: hidden;
}
#table-screen.game-loading #community-cards .card.back {
  visibility: hidden;
}

/* ── Table preload overlay ─────────────────────────────────── */
.table-preload-overlay {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: #111113;
}
.table-preload-overlay.hidden {
  display: none;
}
.tpo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.table-preload-overlay.fading .tpo-inner {
  opacity: 0;
} 
.tpo-pct {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.04em;
  min-width: 3.5ch;
  text-align: center;
}
.tpo-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.button-draw-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  background: linear-gradient(160deg, rgba(18,24,36,0.98) 0%, rgba(12,16,26,0.98) 100%);
  border: 1.5px solid rgba(200,148,74,0.35);
  border-radius: 16px;
  padding: 1.8rem 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(200,148,74,0.1);
  min-width: 260px;
}
.button-draw-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.button-draw-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-top: -0.5rem;
}
.button-draw-cards {
  display: flex;
  gap: 2rem;
  align-items: flex-end;
  justify-content: center;
  margin: 0.25rem 0;
}
.bdo-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.bdo-player.bdo-winner {
  opacity: 1;
}
.bdo-card {
  width: 68px;
  height: 96px;
  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;
  font-weight: 900;
  position: relative;
  flex-shrink: 0;
  container-type: size;
}
.bdo-player.bdo-winner .bdo-card {
  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),
    0 0 0 3px var(--gold), 0 0 12px rgba(200,148,74,0.4);
}
.bdo-rank {
  position: absolute;
  top: 5%;
  left: 8%;
  font-size: 26cqh;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}
.bdo-suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40cqw;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}
.bdo-card.red   { color: #c0392b; }
.bdo-card.black { color: #1a1a2e; }
/* Face-down back state for the draw overlay */
.bdo-card.bdo-card-back {
  background: linear-gradient(150deg, #7a2419 0%, #4e1008 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);
  position: relative;
  overflow: hidden;
}
.bdo-card.bdo-card-back::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  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
    );
}
body[data-deck="red"]   .bdo-card.bdo-card-back { background: linear-gradient(150deg, #7a2419 0%, #4e1008 100%); }
body[data-deck="green"] .bdo-card.bdo-card-back { background: linear-gradient(150deg, #0e4a1e 0%, #082c10 100%); }
/* Flip animations for bdo-card (same timing as hole card flips) */
@keyframes bdoFlipOut {
  0%   { transform: rotateY(0deg)  scale(1);   }
  100% { transform: rotateY(90deg) scale(0.9); }
}
@keyframes bdoFlipIn {
  0%   { transform: rotateY(-90deg) scale(0.9); }
  100% { transform: rotateY(0deg)   scale(1);   }
}
.bdo-card.bdo-flip-out {
  animation: bdoFlipOut 0.15s ease-in forwards;
  transform-origin: center center;
}
.bdo-card.bdo-flip-in {
  animation: bdoFlipIn 0.2s ease-out both;
  transform-origin: center center;
}
.bdo-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}
.bdo-player.bdo-winner .bdo-name {
  color: var(--gold-light);
}
.button-draw-result {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(200,148,74,0.1);
  border: 1px solid rgba(200,148,74,0.25);
  border-radius: 20px;
  padding: 4px 16px;
  letter-spacing: 0.02em;
}

.spinner {
  border: 3px solid #333;
  border-top-color: var(--accent);
  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; }
}

/* Mobile-only nav items — hidden by default, shown in mobile breakpoint */
.btn-nav-mobile-only { display: none; }

/* ── Popup / mid-viewport adjustment ────────────────────────────
   Popup window is 1030×865px. Move the bottom player up 25px
   so the plaque and cards don't crowd the action bar.          */
@media (min-width: 769px) and (max-width: 1299px) {
  .player-area.self {
    bottom: -111px;
  }

  /* rank/suit auto-scale via 10cqh container query */

  /* ── Chips — 10% smaller at popup/mid-viewport size ─────────
     Default chip-disc / chip-disc2 is 25px. Reduce to 22.5px.
     Stack overlap proportionally reduced from -16px to -14px.  */
  .chip-disc,
  .chip-disc2                                 { width: 22.5px; height: 22.5px; }
  .chip-col .chip-disc:not(:last-child),
  .chip-col .chip-disc2:not(:last-child)      { margin-bottom: -14px; }
}

/* ── Large-viewport scaling ──────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   WIDE SCREENS  —  min-width: 1300px
   Scale cards, player plaques, and chips up to fill the extra
   space provided by the fluid table-rail formula.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1300px) {

  /* ── Cards ──────────────────────────────────────────────────── */
  .card            { height: 116px; width: 82px; }
  .card.lg         { height: 140px; width: 100px; }
  .card.sm         { height: 86px;  width: 60px; }
  #opp-card-row    { min-height: 116px; }

  /* rank/suit auto-scale via 10cqh container query */

  /* ── Player plaques ─────────────────────────────────────────── */
  .player-info-box { min-width: 210px; }
  .p-avatar-wrap   { width: 72px; }
  .p-name-text     { font-size: 0.95rem;  max-width: 128px; }
  .p-stack         { font-size: 1.1rem; }

  /* ── Chips ──────────────────────────────────────────────────── */
  .chip-disc                     { width: 31px; height: 31px; }
  .chip-col .chip-disc:not(:last-child) { margin-bottom: -20px; }

  /* ── Player positions ───────────────────────────────────────── */
  .player-area.opponent {
    top: -128px;
    left: 50%;
    transform: translateX(-50%);
  }
  .player-area.self {
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* ── Self player card / plaque stack on large screens ───────────
     Pull cards up further so more of the card face is visible
     above the plaque, matching the reference screenshot.          */
  .player-area.self .plaque-row { margin-top: -140px; }
  #me-card-row                  { margin-top: -170px; }
  /* Dealer button moves up with the taller card stack */
  #me-dealer-btn                { top: -120px; }

}

/* ══════════════════════════════════════════════════════════════════
   SUPER-WIDE DESKTOP  —  min-width: 1400px
   Stretch the chrome to the true screen edges: top bar flush
   left/right, bottom bar activity dock left, hand info flush right.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {

  /* Top bar: no horizontal padding — brand and nav touch screen edges */
  .table-header {
    padding-left: 0;
    padding-right: 0;
  }

  /* Hand strength panel: flush to the right edge */
  .action-hand-col {
    padding-right: 8px;
  }

  /* Sit Out / Exit corner buttons: flush to the right edge */
  .table-corner-btns {
    right: 6px;
  }

}

/* ── Desktop inline game — locked viewport ───────────────────────
   The game canvas is 1400×865 px (wider aspect ratio for more
   horizontal real estate on desktop). JS scales it to fit any
   viewport via transform: scale(), letterboxing as needed.
   Rules below also cancel all @media (min-width: 1300px) scale-ups.
   ─────────────────────────────────────────────────────────────── */
body.desktop-game-active {
  overflow: hidden;
  min-height: 100dvh;
  background: #0e0f11; /* fallback */
}

/* Default / black theme — matches table-area radial gradient outer edge */
body.desktop-game-active:not([data-bg-theme]),
body.desktop-game-active[data-bg-theme="black"] {
  background: radial-gradient(ellipse at center, #1a1c22 0%, #0e0f11 70%);
}

/* Photo themes — dark neutral gutter; photo is confined to the canvas */
body.desktop-game-active[data-bg-theme="homegame"],
body.desktop-game-active[data-bg-theme="fulltilt"],
body.desktop-game-active[data-bg-theme="finaltable"] {
  background: #0a0a0a;
}

/* Solid gradient themes — same gradient as table-area, centered on viewport */
body.desktop-game-active[data-bg-theme="red"] {
  background: radial-gradient(ellipse at center, #331414 0%, #1a0a0a 70%);
}
body.desktop-game-active[data-bg-theme="green"] {
  background: radial-gradient(ellipse at center, #143314 0%, #0a1a0a 70%);
}
body.desktop-game-active[data-bg-theme="blue"] {
  background: radial-gradient(ellipse at center, #162d6e 0%, #0a1535 70%);
}

/* Full-width bottom gutter bar — extends the bottom-zone background edge-to-edge.
   JS sets --desktop-bz-top and --desktop-bz-h in _scaleDesktopGame so this always
   aligns pixel-perfectly with the scaled bottom-zone inside the canvas. */
body.desktop-game-active::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: var(--desktop-bz-top, 100vh); /* default offscreen until JS sets it */
  height: var(--desktop-bz-h, 148px);
  background: #0c0e12;
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 0;
  pointer-events: none;
}

body.desktop-game-active #table-screen {
  position: fixed;
  top: 0;           /* overridden by JS */
  left: 0;          /* overridden by JS */
  transform-origin: top left;
  transform: scale(1); /* overridden by JS */
  width:  1400px;
  height: 865px;
  min-width:  1400px;
  min-height: 865px;
  max-width:  1400px;
  max-height: 865px;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent; /* solid/gradient themes show through from body;
                              photo themes override this via their own #table-screen rules */
  z-index: 1; /* sits above the body::after gutter bar */
}

/* ── desktop-game-active: freeze every viewport-relative value inside the canvas.
   The canvas is 1400×865 logical px. CSS units like vh, vw, dvh,
   env(safe-area-inset-*), and clamp() with viewport-relative middle values all
   react to the REAL viewport, not the logical canvas size. Every such value that
   appears inside #table-screen must be pinned to its computed equivalent at
   1400×865 so resizing the browser window never shifts anything inside.
   Values calculated at 1400×865:
     clamp(3rem,8vh,7rem)   → 8*865/100 = 69.2px  → 69px   (height unchanged)
     clamp(1.5rem,5vh,5rem) → 5*865/100 = 43.25px → 43px   (height unchanged)
     env(safe-area-inset-top) on desktop → 0px
     table-rail: overridden to 1300px (wider oval; aspect-ratio overridden to 2.8/1
       to keep felt height ≈449px — fits within available 511px vertical space)
     bottom-zone height: fixed 148px (already px, no override needed)
     table-header height: 50px + 0 safe-area = 50px                          */

/* table-rail width — wider canvas, standard 2/1 oval.
   936×468px felt (rail 980px minus 44px padding, halved for height). */
body.desktop-game-active .table-rail {
  width: 980px;
}
/* poker-table uses default aspect-ratio 2/1 — no override needed. */
/* table-area padding — freeze clamp() and safe-area values */
body.desktop-game-active .table-area {
  padding: 69px 1rem 43px;
  background: transparent; /* body gradient shows through, extending into gutters */
}
/* table-header — freeze safe-area-inset-top and height */
body.desktop-game-active .table-header {
  padding-top: 10px;
  height: 50px;
}
/* Cancel the @media (min-width: 769px) and (max-width: 1299px) player-self adjustment.
   That rule fires on the real viewport; inside the fixed canvas it must not apply. */
body.desktop-game-active .player-area.self {
  bottom: -76px;
}
/* Cancel the @media (max-width: 768px) mobile block — if the real viewport shrinks
   below 768px while desktop-game-active, the mobile @media block would fire and
   rewrite typography, strip visibility, and layout inside the canvas. */
body.desktop-game-active html,
body.desktop-game-active body { font-size: 16px; }
/* Ensure mobile strips never appear inside the desktop canvas regardless of real vp */
body.desktop-game-active #table-screen .mobile-opp-strip,
body.desktop-game-active #table-screen .mobile-me-strip,
body.desktop-game-active #table-screen .mobile-extra-strip,
body.desktop-game-active #table-screen .mobile-opp-bar { display: none !important; }
/* Ensure desktop player areas are always visible inside the canvas */
body.desktop-game-active #table-screen .player-area.opponent,
body.desktop-game-active #table-screen .player-area.self { display: block !important; }

/* Cards — revert to base defaults (same as popup-window viewport) */
body.desktop-game-active .card            { height: 96px;  width: 68px; }
body.desktop-game-active .card.lg         { height: 118px; width: 84px; }
body.desktop-game-active .card.sm         { height: 72px;  width: 50px; }
body.desktop-game-active #opp-card-row    { min-height: 96px; }
/* rank/suit auto-scale via 20cqw/10cqh container query — no overrides needed */

/* Player plaques — revert to base defaults */
body.desktop-game-active .player-info-box { min-width: 170px; }
body.desktop-game-active .p-avatar-wrap   { width: 56px; }
body.desktop-game-active .p-name-text     { font-size: 0.82rem; max-width: 100px; }
body.desktop-game-active .p-stack         { font-size: 0.95rem; }

/* Chips — 10% smaller (22.5 px), matching prior popup sizing */
body.desktop-game-active .chip-disc,
body.desktop-game-active .chip-disc2                              { width: 22.5px; height: 22.5px; }
body.desktop-game-active .chip-col .chip-disc:not(:last-child),
body.desktop-game-active .chip-col .chip-disc2:not(:last-child)  { margin-bottom: -14px; }

/* Player positions — match popup-viewport values */
body.desktop-game-active .player-area.opponent {
  top: -130px;
  left: calc(50% - 5px);
  transform: translateX(-50%);
}
body.desktop-game-active .player-area.self {
  bottom: -76px;
  left: 50%;
  transform: translateX(-50%);
}
body.desktop-game-active .player-area.self .plaque-row { margin-top: -70px; }
body.desktop-game-active #me-card-row                  { margin-top: -138px; }
body.desktop-game-active #me-dealer-btn                { top: -75px; left: 170px; }
body.desktop-game-active #opp-dealer-btn               { bottom: -38px; left: -24px; }
body.desktop-game-active .btn-hamburger                { display: none; }

/* ── Desktop overlay fix: escape transform containment ────────────────────────
   position:fixed inside a transform:scale() parent is not fixed to the viewport —
   it's fixed to the transformed element's stacking context. .game-dim-overlay uses
   position:fixed;inset:0 but appears canvas-sized (trapped by the transform).
   Fix: JS watches the overlay elements and toggles body.desktop-dim-active;
   body::before then renders the true full-viewport backdrop outside the canvas.
   The trapped .game-dim-overlay is made transparent (card content still visible).
   NOTE: #exit-confirm-modal was moved OUTSIDE #table-screen — it no longer needs
   this treatment. It has its own full-viewport background and uses z-index:9200. */
body.desktop-game-active.desktop-dim-active::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 199; /* below .game-dim-overlay z-index:200 */
  background: rgba(8, 11, 18, 0.82);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
/* Only game-dim-overlay is trapped inside the canvas and needs transparency */
body.desktop-game-active .game-dim-overlay:not(.hidden) {
  background: transparent;
  backdrop-filter: none;
}
/* exit-confirm-modal is now outside the canvas — high z-index beats all game overlays
   including .modal-overlay (z:900) so Exit dialog is always reachable               */
body.desktop-game-active .exit-confirm-modal:not(.hidden) {
  z-index: 9200;
}

/* ── mobile-game-active: cancel 1300px desktop scale-up rules ─────────
   Locks layout to base values so resizing to a wide viewport mid-game
   does not reposition cards, chips, and player plaques.              */
body.mobile-game-active .card            { height: 96px;  width: 68px; }
body.mobile-game-active .card.lg         { height: 118px; width: 84px; }
body.mobile-game-active .card.sm         { height: 72px;  width: 50px; }
body.mobile-game-active #opp-card-row    { min-height: 96px; }
/* rank/suit auto-scale via 20cqw/10cqh container query — no overrides needed */
body.mobile-game-active .player-info-box { min-width: 170px; }
body.mobile-game-active .p-avatar-wrap   { width: 56px; }
body.mobile-game-active .p-name-text     { font-size: 0.82rem; max-width: 100px; }
body.mobile-game-active .p-stack         { font-size: 0.95rem; }
body.mobile-game-active .chip-disc,
body.mobile-game-active .chip-disc2                                   { width: 25px; height: 25px; }
body.mobile-game-active .chip-col .chip-disc:not(:last-child),
body.mobile-game-active .chip-col .chip-disc2:not(:last-child)        { margin-bottom: -16px; }
body.mobile-game-active .player-area.opponent                         { top: -135px; }
body.mobile-game-active .player-area.self                             { bottom: -101px; }
body.mobile-game-active .player-area.self .plaque-row                 { margin-top: -70px; }
body.mobile-game-active #me-card-row                                  { margin-top: -138px; }
body.mobile-game-active #me-dealer-btn                                { top: -100px; }

/* ── Responsive ──────────────────────────────────────────────── */
/* ── Mobile strips + blind info — hidden on desktop ───────────── */
.mobile-opp-bar,
.mobile-opp-strip,
.mobile-me-strip { display: none; }
.mobile-extra-strip { display: none; }
.mobile-blind-info { display: none; }

/* ═══════════════════════════════════════════════════════════════
   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: 15px; }

  /* ══════════════════════════════════════════════════════════════
     MOBILE LAYOUT PHILOSOPHY
     - Opponent plaque → header bar (mobile-opp-bar)
     - Full felt for community cards
     - Self plaque → mobile-me-strip above action buttons
     - Hole cards shown in self strip, not on felt
     ══════════════════════════════════════════════════════════════ */

  /* ── Mobile opponent strip — absolute top of felt ────────────── */
  .mobile-opp-strip {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    padding: 6px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    transition: border-color 0.25s ease, background 0.25s ease;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
  }
  .mobile-opp-strip.active-turn {
    border-bottom-color: rgba(200,148,74,0.5);
    background: rgba(200,148,74,0.04);
  }
  .mobile-opp-strip-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
    width: 100%;
    padding: 0 0 6px 10px;
  }
  /* Shrink blind-level badges in mobile header */
  .blind-level-badge,
  .blind-level-timer {
    font-size: 0.6rem;
    padding: 1px 5px;
  }

  /* ── Mobile self strip — absolute bottom of felt ──────────────── */
  .mobile-me-strip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    padding: 0 0 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    transition: border-color 0.25s ease;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
  }
  .mobile-me-strip.active-turn {
    border-top-color: rgba(200,148,74,0.5);
    background: rgba(200,148,74,0.04);
  }
  .mobile-me-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    width: 100%;
    padding: 6px 0 0 10px;
  }
  /* Shared avatar sizing — full height, bleed to left edge */
  .mobile-opp-avatar,
  .mobile-me-avatar {
    width: 44px;
    height: auto;
    align-self: stretch;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: -6px;
    margin-bottom: -6px;
    margin-left: -10px;
    margin-right: 0;
  }
  /* Shared info column */
  .mobile-opp-info,
  .mobile-me-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.25;
    min-width: 0;
  }
  /* Shared name */
  .mobile-opp-name,
  .mobile-me-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  /* Shared stack */
  .mobile-opp-stack,
  .mobile-me-stack {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--font-mono);
  }
  /* Shared last-action — lives inside info column, replaces stack row when active */
  .mobile-opp-action,
  .mobile-me-action {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
    white-space: nowrap;
    display: none;
  }
  /* Show action label only when a real action is active */
  .mobile-opp-action[data-act]:not([data-act=""]):not([data-act="winner"]):not([data-act="split"]),
  .mobile-me-action[data-act]:not([data-act=""]):not([data-act="winner"]):not([data-act="split"]) {
    display: block;
  }
  /* Hide stack while the action label is showing in its place */
  .mobile-opp-info:has(.mobile-opp-action[data-act]:not([data-act=""]):not([data-act="winner"]):not([data-act="split"])) .mobile-opp-stack,
  .mobile-me-info:has(.mobile-me-action[data-act]:not([data-act=""]):not([data-act="winner"]):not([data-act="split"])) .mobile-me-stack {
    display: none;
  }
  .mobile-opp-action[data-act="fold"],
  .mobile-me-action[data-act="fold"]  { color: var(--text-muted); }
  .mobile-opp-action[data-act="check"],
  .mobile-me-action[data-act="check"] { color: var(--text-secondary); }

  /* ── Winner / split inline replacement — no background, shows in info column ── */
  .mobile-strip-winner-banner {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.25;
    min-width: 0;
  }
  .mobile-strip-winner-banner.hidden { display: none; }
  /* Text set via data-label — shown as a name-row replacement */
  .mobile-strip-winner-banner::before {
    content: attr(data-label);
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f5c842;
    animation: winnerBannerPop 0.22s cubic-bezier(0.22,1.6,0.5,1) both;
  }
  .mobile-strip-winner-banner[data-type="split"]::before {
    color: var(--text-secondary);
  }
  @keyframes winnerBannerPop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Mobile strip timer bars — absolute overlay, never affects layout */
  .mobile-strip-timer-wrap {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    background: rgba(12,16,26,0.6);
    transition: opacity 0.2s ease;
    z-index: 11;
  }
  /* Both timers sit at bottom of strip — 3px bar below content */
  #mobile-opp-timer-wrap { bottom: 0; top: auto; }
  #mobile-me-timer-wrap  { bottom: 0; top: auto; left: 0; right: 0; width: auto; z-index: 12; }
  .mobile-strip-timer-wrap.hidden {
    opacity: 0;
  }
  .mobile-strip-timer-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #0d4020 0%, #1e7a34 100%);
    transform-origin: left center;
  }
  .mobile-strip-timer-wrap.warning .mobile-strip-timer-bar {
    background: linear-gradient(90deg, #5a0e08 0%, #c0392b 100%);
  }
  /* Opponent hole cards — pushed to right edge */
  .mobile-opp-cards {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
    order: 3;
    margin-left: auto;
    padding-right: 10px;
    min-width: 65px; /* 2×26px cards + 3px gap + 10px padding — reserves space so action label doesn't jump when cards are cleared on fold */
  }
  .mobile-opp-cards .card {
    height: 36px;
    width: 26px;
    border-radius: 4px;
    font-size: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }
  /* rank/suit auto-scale via 20cqw/10cqh container query */
  .mobile-me-cards {
    display: flex;
    gap: 5px;
    align-items: flex-end;
    flex-shrink: 0;
    order: 3;
    margin-left: auto;
    margin-top: -22px; /* cards protrude above the strip into the felt */
    padding-right: 10px;
    position: relative;
    z-index: 15; /* above timer bar (12) and strip (10) */
  }
  /* Cards inside mobile strip — slightly larger since they protrude */
  .mobile-me-cards .card {
    height: 58px;
    width: 40px;
    border-radius: 5px;
    font-size: 0;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.4);
  }
  /* rank/suit auto-scale via 20cqw/10cqh container query */

  /* ── Hide elements that move to mobile layout ───────────────── */
  /* Opponent plaque — hidden on felt, shown in mobile-opp-strip */
  .player-area.opponent { display: none; }
  /* Self plaque + cards — hidden on felt, shown in mobile-me-strip */
  .player-area.self { display: none; }
  /* Old header opp-bar — no longer used */
  .mobile-opp-bar { display: none; }
  /* Desktop seat-slot plaques — hidden on mobile, use extra strips instead.
     In 4p mode the bet-stacks inside need to remain visible, so we hide the
     inner elements individually instead of the whole container. */
  .seat-slot { display: none !important; }
  .poker-table.mobile-4p .seat-slot {
    display: block !important;
    /* Make the slot itself invisible/non-interactive — only bet stacks show */
    position: absolute;
    pointer-events: none;
    width: 0; height: 0;
    overflow: visible;
  }
  .poker-table.mobile-4p .seat-slot > .card-row,
  .poker-table.mobile-4p .seat-slot > .plaque-row,
  .poker-table.mobile-4p .seat-slot > .p-badges,
  .poker-table.mobile-4p .seat-slot > .dealer-btn-corner,
  .poker-table.mobile-4p .seat-slot > .blind-label {
    display: none !important;
  }
  .poker-table.mobile-4p .seat-slot > .bet-stack {
    position: absolute;
    z-index: 9;
    pointer-events: auto;
    /* JS sets left/top via positionBetStacks */
  }

  /* ── Mobile extra strips — side-seat players in 4/6-player games ── */
  .mobile-extra-strip {
    display: none;
    flex-direction: row;
    position: absolute;
    left: 0; right: 0;
    z-index: 10;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .mobile-extra-strip:not(.hidden) { display: flex; }
  .mobile-extra-strip--top {
    top: 0;   /* JS overrides to sit below opp-strip */
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .mobile-extra-strip--bot {
    bottom: 0; /* JS overrides to sit above me-strip */
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .mobile-extra-strip.active-turn {
    background: rgba(200,148,74,0.04);
  }
  .mobile-extra-strip--top.active-turn { border-bottom-color: rgba(200,148,74,0.5); }
  .mobile-extra-strip--bot.active-turn { border-top-color: rgba(200,148,74,0.5); }

  .mobile-extra-strip-inner {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 3px 10px 3px 0;
    min-height: 36px;
  }
  .mobile-extra-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 0;
    margin: -3px 0 -3px 0;
  }
  .mobile-extra-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
    min-width: 0;
  }
  .mobile-extra-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
  .mobile-extra-stack {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--font-mono);
  }
  .mobile-extra-action {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
    white-space: nowrap;
    display: none;
  }
  .mobile-extra-action[data-act]:not([data-act=""]):not([data-act="winner"]):not([data-act="split"]) {
    display: block;
  }
  .mobile-extra-info:has(.mobile-extra-action[data-act]:not([data-act=""]):not([data-act="winner"]):not([data-act="split"])) .mobile-extra-stack {
    display: none;
  }
  .mobile-extra-action[data-act="fold"]  { color: var(--text-muted); }
  .mobile-extra-action[data-act="check"] { color: var(--text-secondary); }

  .mobile-extra-cards {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    padding-right: 6px;
    min-width: 55px;
  }
  .mobile-extra-cards .card {
    height: 30px;
    width: 22px;
    border-radius: 3px;
    font-size: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  /* Folded extra strip — greyed out */
  .mobile-extra-strip.is-folded {
    opacity: 0.45;
    filter: saturate(0.3);
  }
  .mobile-extra-strip.is-eliminated {
    opacity: 0.25;
    filter: saturate(0) brightness(0.7);
    pointer-events: none;
  }

  /* ── 4-player mobile: 2×2 grid — two players per row ──────── */
  /* Top row: opp (left 50%) + extra-top (right 50%) */
  .poker-table.mobile-4p .mobile-opp-strip {
    width: 50%;
    right: auto;
    padding: 0;
  }
  .poker-table.mobile-4p .mobile-extra-strip--top:not(.hidden) {
    top: 0;
    left: auto;
    right: 0;
    width: 50%;
    bottom: auto;
  }
  /* Bottom row: extra-bot (left 50%) + me (right 50%) */
  .poker-table.mobile-4p .mobile-extra-strip--bot:not(.hidden) {
    bottom: 0;
    right: auto;
    left: 0;
    width: 50%;
    top: auto;
  }
  .poker-table.mobile-4p .mobile-me-strip {
    width: 50%;
    left: auto;
    right: 0;
    padding: 0;
  }
  /* Unified compact sizing for all 4 strips */
  .poker-table.mobile-4p .mobile-opp-avatar,
  .poker-table.mobile-4p .mobile-me-avatar {
    width: 36px !important;
    height: 36px !important;
    align-self: center !important;
    margin: 0 !important;
  }
  .poker-table.mobile-4p .mobile-opp-name,
  .poker-table.mobile-4p .mobile-me-name,
  .poker-table.mobile-4p .mobile-extra-name {
    max-width: 80px;
    font-size: 0.82rem;
  }
  .poker-table.mobile-4p .mobile-opp-stack,
  .poker-table.mobile-4p .mobile-me-stack,
  .poker-table.mobile-4p .mobile-extra-stack {
    font-size: 0.78rem;
  }
  .poker-table.mobile-4p .mobile-opp-info,
  .poker-table.mobile-4p .mobile-me-info {
    line-height: 1.2;
  }
  /* Compact card sizing — all 4 strips use small cards */
  .poker-table.mobile-4p .mobile-opp-cards .card,
  .poker-table.mobile-4p .mobile-me-cards .card,
  .poker-table.mobile-4p .mobile-extra-cards .card {
    height: 30px;
    width: 22px;
    border-radius: 3px;
  }
  .poker-table.mobile-4p .mobile-opp-cards,
  .poker-table.mobile-4p .mobile-me-cards {
    min-width: 50px;
    padding-right: 6px;
    margin-top: 0;
    z-index: auto;
  }
  .poker-table.mobile-4p .mobile-extra-cards {
    padding-right: 6px;
    min-width: 50px;
  }
  /* Compact inner layout for all 4 strips */
  .poker-table.mobile-4p .mobile-opp-strip-left,
  .poker-table.mobile-4p .mobile-me-left {
    padding: 3px 0 3px 0 !important;
    gap: 5px;
    min-height: 36px;
  }
  .poker-table.mobile-4p .mobile-extra-strip-inner {
    padding: 3px 0 3px 0;
    gap: 5px;
  }
  /* Row dividers */
  .poker-table.mobile-4p .mobile-extra-strip--top {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    border-left: 1px solid rgba(255,255,255,0.04);
  }
  .poker-table.mobile-4p .mobile-extra-strip--bot {
    border-top: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
  }
  .poker-table.mobile-4p .mobile-opp-strip {
    border-right: 1px solid rgba(255,255,255,0.04);
  }
  .poker-table.mobile-4p .mobile-me-strip {
    border-left: 1px solid rgba(255,255,255,0.04);
  }
  /* Timer bars span only their parent strip */
  .poker-table.mobile-4p .mobile-strip-timer-wrap {
    left: 0; right: 0;
  }

  /* ── Header — flex row on mobile, stays in-flow ─────────────── */
  .table-header {
    position: relative;
    display: flex;
    height: calc(40px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 0.5rem 0;
    gap: 0;
    z-index: 20; /* sit above table-area content */
  }
  /* Left: COSTANZA brand + level/timer badges — shrinks to fit */
  .header-left {
    flex: 0 0 auto;
    gap: 5px;
    align-items: center;
    min-width: 0;
  }
  .table-header .brand { font-size: 0.7rem; letter-spacing: 1px; flex-shrink: 0; }
  /* Center: level badge + timer always shown, centered */
  .header-center {
    flex: 1;
    justify-content: center;
    padding: 0 6px;
    overflow: hidden;
    min-width: 0;
    gap: 5px;
  }
  /* Right: hamburger only — fixed width */
  .header-right {
    flex: 0 0 auto;
    gap: 4px;
  }

  /* ── Hamburger button ──────────────────────────────────────── */
  .btn-hamburger {
    display: flex;
    width: 44px; height: 44px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
  }
  .btn-hamburger .material-symbols-rounded { font-size: 1.45rem; }
  .btn-hamburger:active { background: rgba(255,255,255,0.08); }

  /* ── Header nav dropdown ───────────────────────────────────── */
  .header-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(40px + env(safe-area-inset-top));
    right: 0.5rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-sm);
    padding: 0.35rem;
    gap: 2px;
    z-index: 200;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.75);
  }
  .header-nav.open { display: flex; }
  .header-nav > * { width: 100%; }
  .header-nav .btn-header {
    width: 100%; text-align: left; justify-content: flex-start;
    font-size: 0.92rem; padding: 0.55rem 0.75rem;
    border: none; border-radius: 4px; gap: 8px;
  }
  .header-nav .btn-header-capped {
    display: flex; flex-direction: row; align-items: stretch; width: 100%;
  }
  .header-nav .btn-header-capped .btn-header--capped {
    flex: 1; text-align: left; justify-content: flex-start;
    font-size: 0.92rem; padding: 0.55rem 0.75rem;
    border: none; border-right: none; border-radius: 4px 0 0 4px; gap: 8px;
  }
  .header-nav .btn-header-cap {
    font-size: 0.88rem; padding: 0 0.65rem; border-radius: 0 4px 4px 0;
    background: rgba(255,255,255,0.07); border: none; min-width: 32px;
    display: flex; align-items: center; justify-content: center;
  }
  .header-nav .btn-nav-mobile-only:first-of-type {
    margin-top: 4px; padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .header-nav .btn-nav-mobile-only {
    display: flex; align-items: center; gap: 8px; width: 100%;
    text-align: left; font-size: 0.92rem; padding: 0.55rem 0.75rem;
    border: none; border-radius: 4px; background: transparent;
    color: var(--text-secondary); cursor: pointer; font-weight: 600;
    font-family: var(--font); letter-spacing: 0.2px;
    transition: background 0.12s, color 0.12s;
  }
  .header-nav .btn-nav-mobile-only:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
  .header-nav .btn-exit-nav { color: #fa8e8a; }
  .header-nav .btn-exit-nav:hover { background: rgba(250,142,138,0.1); color: #fa8e8a; }
  .table-corner-btns { display: none !important; }
  .acid-mode-badge   { display: none !important; }

  /* ── Table — full-bleed felt ─────────────────────────────────── */
  #table-screen { height: 100dvh; }
  .table-area { padding: 0; align-items: stretch; }
  .table-rail {
    width: 100%; padding: 0;
    background: none; border-radius: 0; box-shadow: none; border: none;
  }
  .table-rail::before, .table-rail::after { display: none; }
  .poker-table {
    aspect-ratio: unset;
    height: 100%;
    border-radius: 0;
    outline: none;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
  }
  .poker-table::before { border-radius: 0; }
  .poker-table::after  { font-size: 3rem; border-radius: 0; }

  /* ── Community — centered between the two player strips ─────────
     JS overrides top precisely based on actual strip heights.
     CSS provides a good initial value (strips are ~40px each).        */
  .community-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 0.4rem;
  }
  .community-cards { gap: 5px; padding: 0 8px; }
  /* Card sizes only — rank/suit auto-scale via 20cqw/10cqh container query */
  .card.lg          { height: 82px; width: 58px; }
  .card             { height: 68px; width: 48px; border-radius: 5px; }
  .card.sm          { height: 44px; width: 30px; }

  /* ── Fix: body.mobile-game-active overrides card sizes with base desktop values
     (specificity 0,2,1) beating the mobile-only rules above (0,1,1).
     Re-apply mobile sizes inside this @media block at the same
     specificity so the later-declared rule wins. ───────────────── */
  /* Card sizes only — rank/suit auto-scale via 20cqw/10cqh container query */
  body.mobile-game-active .card        { height: 68px; width: 48px; }
  body.mobile-game-active .card.lg     { height: 82px; width: 58px; }
  body.mobile-game-active .card.sm     { height: 44px; width: 30px; }
  body.mobile-game-active .mobile-opp-cards .card { height: 36px; width: 26px; border-radius: 4px; }
  body.mobile-game-active .mobile-me-cards  .card { height: 58px; width: 40px; border-radius: 5px; }

  /* ── Pot + chips — floating center felt ─────────────────────── */
  .pot-total        { font-size: 0.84rem; padding: 2px 8px; }
  .round-badge      { font-size: 0.68rem; padding: 2px 8px; }
  .pot-chips-amount { font-size: 0.66rem; padding: 1px 5px; }
  .pot-chips-side   { transform: none; align-items: center; }
  .pot-chip-tower   { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 60px; }
  .street-announce  { font-size: 0.95rem; padding: 0.3rem 1rem; letter-spacing: 1.5px; }

  /* ── Chip stacks ─────────────────────────────────────────────── */
  .chip-col .chip-disc:not(:last-child) { margin-bottom: -8px; }
  .chip-disc        { width: 13px; height: 13px; }
  .chip-tower       { gap: 2px; }
  .bet-stack        { width: auto; align-items: flex-start; }
  #opp-bet-stack, #opp-ante-stack { transform: none; }
  #me-bet-stack, #me-ante-stack   { transform: none; }
  @keyframes stackPopIn { 0% { opacity: 0; transform: scale(0.65); } 65% { transform: scale(1.07); } 100% { opacity: 1; transform: scale(1); } }
  .bet-stack-amount { font-size: 0.62rem; padding: 1px 5px; }
  .ante-stack-label { height: 15px; font-size: 0.56rem; padding: 0 4px; }

  /* ── Winner banner ──────────────────────────────────────────── */
  .winner-banner              { padding: 0.35rem 0.85rem; gap: 0.75rem; border-radius: 8px; }
  /* ── Badge toast — fixed overlay above bottom player's cards ── */
  .badge-toast { position: fixed; bottom: 160px; right: 0.75rem; max-width: calc(100vw - 1.5rem); }
  .wb-title                   { font-size: 0.84rem; letter-spacing: 0.8px; }
  .wb-hands                   { font-size: 0.64rem; padding-left: 0.7rem; }
  .winner-banner.wb-pos-right { right: -6px; font-size: 0.78rem; }

  /* ── Bottom zone ────────────────────────────────────────────── */
  .bottom-zone {
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }
  .bottom-zone-log { display: none; }
  .px-skills-bar   { display: none; }
  .bottom-zone-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* ── Action panel ────────────────────────────────────────────── */
  .action-timer { padding: 2px 0.6rem; }
  .action-main {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    min-height: 0;
  }
  .action-btns-col { width: 100%; }
  .action-btn-grid {
    gap: 6px; padding: 6px 10px 4px;
    border-bottom: none; flex: 0 0 auto;
  }
  .btn-action { height: 47px; font-size: 0.78rem; letter-spacing: 0.2px; border-radius: 8px; }
  .btn-action-sub { font-size: 1.0rem; }
  #btn-fold  { flex: 0.7; height: 47px; font-size: 0.78rem; }
  #btn-check { flex: 1.4; height: 47px; font-size: 0.84rem; letter-spacing: 0.3px; }
  #btn-bet   { flex: 1.1; height: 47px; font-size: 0.78rem; }
  .sizing-row   { padding: 4px 10px; height: 44px; gap: 4px; align-items: stretch; border-top: 1px solid rgba(255,255,255,0.04); width: 100%; box-sizing: border-box; }
  .sizing-row .btn-bb-step { flex: 1.2; min-width: 0; padding: 0; font-size: 1rem; }
  .sizing-row .quick-bets  { flex: 4; gap: 4px; flex-wrap: nowrap; flex-shrink: 1; align-items: stretch; }
  .sizing-row .quick-bets .btn-quick { flex: 1; min-width: 0; padding: 0; align-self: stretch; }
  .sizing-row #btn-allin   { flex: 1.5; min-width: 0; padding: 0; font-size: 0.68rem; }
  .sizing-label { font-size: 0.68rem; }
  .bet-slider   { display: none; }
  .bet-input    { display: none; }
  .btn-quick    { font-size: 0.7rem; }
  .btn-bb-step  { font-size: 0.95rem; }
  .action-hand-col { display: none; }
  .game-over-btns .btn { font-size: 0.76rem; padding: 0.5rem 0.9rem; }

  /* ── Bet stacks on felt — scaled down for mobile ──────────────── */
  .bet-stack { width: auto; }
  .bet-stack-amount { font-size: 0.6rem; padding: 1px 5px; }

  /* ── Emote button ─────────────────────────────────────────────────── */
  /* Emote trigger is on the felt (self plaque is hidden) — disable on mobile */
  .emote-trigger-btn { display: none; }

  /* ── Lobby ──────────────────────────────────────────────────── */
  #lobby { padding: 1rem 0.85rem 2rem; padding-top: max(1rem, calc(1rem + env(safe-area-inset-top))); align-items: stretch; }
  .lobby-card {
    padding: 1.5rem 1.25rem;
    max-width: 100%; width: 100%; box-sizing: border-box;
    border-radius: 14px;
  }

  /* Logo — push down enough to clear the chip/settings pill */
  .lobby-logo           { margin-top: 2.25rem; }
  .lobby-logo h1        { font-size: 2.2rem; letter-spacing: -0.01em; }
  .lobby-logo p         { font-size: 0.92rem; }
  .lobby-logo-suits     { font-size: 1.4rem; gap: 0.4rem; }
  .lobby-beta-chip      { font-size: 0.75rem; padding: 3px 12px; }

  /* Mode tabs — stacked on mobile */
  .mode-tabs { flex-direction: column; gap: 0.5rem; }
  .mode-tab  { font-size: 0.88rem; padding: 0.75rem 1rem; border-radius: 10px; }

  /* Speed strip — 2×2 grid on mobile */
  .lv2-speed-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }
  .lv2-speed-btn {
    padding: 0.8rem 0.4rem 0.75rem;
    font-size: 0.82rem;
    border-radius: 10px;
  }
  .lv2-speed-btn .material-symbols-rounded { font-size: 1.35rem; }
  .lv2-speed-sub { font-size: 0.8rem; }

  /* Avatar row — 2 rows of 4 on mobile */
  .lv2-avatar-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    flex-wrap: unset;
    justify-content: unset;
  }
  .lv2-avatar-row .avatar-pick,
  .lv2-avatar-row .avatar-pick-more {
    width: auto;
    flex: unset;
    margin: 0;
    aspect-ratio: 1 / 1;
  }

  /* Avatar picker (full picker modal) */
  .avatar-picker-row { gap: 0.4rem; }
  .avatar-option img  { width: 48px; height: 48px; border-radius: 8px; }

  /* Step labels */
  .ls-label { font-size: 0.95rem; margin-bottom: 0.9rem; }
  /* Hide timeline rail decorations — options fill full width on mobile */
  .ls-rail  { border-left: none; margin-left: 0; }
  .ls-rail::after { display: none; }
  .ls-num   { display: none; }
  .ls       { padding-left: 0; }
  .ls-label { padding-left: 0; }

  /* ── Player / bot account card ─────────────────────────────── */
  /* Reflow to: [avatar] [info col full width] / [button full row below] */
  .join-returning {
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    padding: 0.7rem 0.85rem;
  }
  .join-returning-img {
    width: 44px;
    height: 44px;
  }
  .join-returning-info {
    flex: 1;          /* take remaining width on the first row */
    min-width: 0;
  }
  .join-returning-name {
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .join-returning-join {
    flex: 0 0 100%;   /* full-width button on its own second row */
    justify-content: center;
    font-size: 1rem;
    padding: 0.6rem 1rem;
  }
  /* BvB mini-card: same wrap layout as player card */
  .bvb-mini-card .join-returning-join {
    flex: 0 0 100%;
    justify-content: center;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
  }
  .bvb-mini-card .bvb-launch-hint {
    padding-left: 0;
    padding-top: 0.3rem;
    text-align: center;
  }

  /* Name + play row */
  .lv2-name-row   { gap: 0.5rem; }
  .lv2-name-input {
    font-size: 1rem;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
  }
  .lv2-play-btn {
    font-size: 1rem;
    padding: 0.8rem 1.4rem;
    border-radius: 10px;
  }

  /* Util bar — Rules on its own row, then 3 across below */
  .lv2-util-bar  { row-gap: 0.35rem; column-gap: 0.35rem; margin-top: 1.25rem; flex-wrap: wrap; }
  .lv2-util-btn  {
    padding: 0.75rem 0.2rem 0.7rem;
    font-size: 0.72rem;
    border-radius: 10px;
    flex: 1;
  }
  /* Rules button: full-width solo row */
  #btn-how-to-play-lobby { flex: 0 0 100%; flex-direction: row; gap: 0.5rem; justify-content: center; padding: 0.7rem 1rem; }
  #btn-how-to-play-lobby .material-symbols-rounded { font-size: 1.45rem; }
  /* Other 3 share the row below — equal flex basis so gaps are identical */
  #btn-leaderboard-lobby,
  #btn-profile-lobby,
  #btn-settings-lobby { flex: 1 1 0; }
  .lv2-util-btn .material-symbols-rounded { font-size: 1.45rem; }

  /* Achievements/Unlock tab buttons: slightly larger text on wider screens */
  .lobby-tab-inner { padding: 0.75rem 1rem; gap: 0.65rem; }
  .lobby-tab-icon { font-size: 1.3rem; }
  .lobby-tab-text strong { font-size: 0.92rem; display: block; }
  .lobby-tab-text span   { font-size: 0.78rem; display: block; }
  .lobby-tab-title-row { display: flex; }
  .lobby-tab-title-row strong { display: inline; }
  .lobby-tab-text .lobby-beta-badge, .lobby-beta-badge { display: none; }

  /* Gate */
  .lobby-hamburger { display: none; }
  .lobby-gate-row  { flex-direction: column; align-items: stretch; gap: 0.45rem; }
  .lobby-gate-input {
    max-width: 100%; width: 100%; box-sizing: border-box;
    font-size: 16px; padding: 0.8rem 0.85rem;
  }
  #lobby-gate-btn { width: 100%; font-size: 1.05rem; padding: 0.95rem; }
  .lobby-gate-label { font-size: 0.9rem; }
  .lobby-gate-contact { font-size: 0.82rem; }

  /* ── Rules — hand rankings: note wraps below rank name ─────── */
  .htp-ranks li {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 10px;
  }
  /* counter pseudo stays col 1, rank name col 2 row 1, note col 2 row 2 */
  .htp-rank-name { min-width: 0 !important; grid-column: 2; grid-row: 1; }
  .htp-ranks li::before { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .htp-rank-note { font-size: 0.75rem; text-align: left; grid-column: 2; grid-row: 2; }

  /* ── Settings modal ─────────────────────────────────────────── */
  /* All grid rows collapse to single column */
  .settings-row-2, .settings-row-3 { grid-template-columns: 1fr !important; gap: 1rem; }

  /* Top bar: chips + bot on first row, rabbit hunt full-width on second row */
  .settings-row-top-bar {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .settings-section-name { grid-column: 1 / -1; }
  /* Rabbit hunt is the 3rd section — push it to its own full-width row */
  .settings-row-top-bar .settings-section:nth-child(3) { grid-column: 1 / -1; }
  /* All toggles fill their 1fr cell so Show Chips + Bot Difficulty each take 50% */
  .settings-row-top-bar .chip-seg-toggle { width: 100%; }

  /* Bigger label text */
  .settings-label { font-size: 0.86rem; }

  /* Inputs — no iOS zoom */
  .settings-input { font-size: 16px; padding: 0.8rem 0.85rem; }

  /* Avatar picker — 4 columns, bigger like lobby */
  .avatar-picker { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
  #premium-unlocked-view .avatar-picker { grid-template-columns: repeat(4, 1fr) !important; }
  .premium-avatar-teaser { grid-template-columns: repeat(4, 1fr) !important; }

  /* Sound section — stack vertically so slider never overflows */
  .sound-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sound-mute-label { font-size: 0.95rem; }
  /* Volume row: icon + slider + icon, all in one line */
  .sound-controls .sound-vol-icon { display: none; }
  .sound-volume-slider {
    width: 100%;
    min-width: unset;
    height: 6px;
    touch-action: none;
  }
  .sound-volume-slider::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }

  /* Card style picker — wrap into rows, shrink card previews to fit */
  .card-style-picker {
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }
  .card-style-btn {
    font-size: 0.82rem;
    padding: 0.55rem 0.5rem;
    flex: 1 1 calc(33% - 0.5rem);
    min-width: 0;
  }
  /* Shrink the mini card previews inside each button */
  .cs-card {
    width: 16px;
    height: 24px;
  }
  .cs-rank { font-size: 0.5rem; }
  .cs-suit { font-size: 0.62rem; }

  /* Table / Card Back / Background color pickers */
  .table-color-picker, .deck-picker, .bg-theme-picker { gap: 0.5rem; flex-wrap: wrap; }

  /* chip-seg (Show chips as / Bot difficulty) — bigger touch targets */
  .chip-seg-btn { font-size: 0.9rem; padding: 0.6rem 0.7rem; }

  /* Modal header — bigger close target */
  .modal-header { padding: 1rem 1.1rem 0.85rem; }
  .modal-title  { font-size: 1.1rem; }
  .modal-close  { font-size: 1.9rem; padding: 2px 12px; }
  .modal-body   { padding: 1rem; }
  .modal-footer { padding: 0.85rem 1rem; }

  /* ── Profile modal — full screen ────────────────────────────── */
  .profile-modal  { align-items: stretch; justify-content: stretch; }
  .profile-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    overflow: visible; /* allow inner body to scroll without being clipped */
  }
  .profile-header { padding: 1rem 1.1rem 0.85rem; }
  .profile-title  { font-size: 1.05rem; }
  .profile-body   { padding: 1rem; gap: 1rem; }

  /* Hero row */
  .profile-hero-avatar { width: 56px; height: 56px; border-radius: 10px; }
  .profile-hero-name   { font-size: 1.15rem; }
  .profile-hero-sub    { font-size: 0.8rem; }

  /* Stat grid — 2×2 on mobile */
  .profile-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }
  .profile-stat-block { padding: 0.7rem 0.5rem; border-radius: 8px; }
  .profile-stat-val   { font-size: 1.4rem; }
  .profile-stat-lbl   { font-size: 0.68rem; }

  /* Record row */
  .profile-record-row  { gap: 0.5rem; }
  .profile-record-item { padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.82rem; }

  /* Section label */
  .profile-section-label { font-size: 0.72rem; }

  /* Badge tiles — 4 across already, just ensure image fits */
  .profile-badge-tier-grid { gap: 0.4rem; }
  .profile-badge-tile      { padding: 0.6rem 0.2rem 0.55rem; border-radius: 8px; }
  .profile-badge-img       { width: min(44px, 72%); }
  .profile-badge-label     { font-size: 0.62rem; }
  /* New ach-card grid in profile — 1 column on mobile */
  .profile-badges-grid .ach-grid { grid-template-columns: 1fr; }

  /* ── Leaderboard modal — full screen ─────────────────────────── */
  .lb-modal   { align-items: stretch; justify-content: stretch; }
  .lb-dialog  {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .lb-header  { padding: 1rem 1.1rem; }
  .lb-title   { font-size: 1.05rem; }
  .lb-tabs    { overflow-x: auto; }
  .lb-tab     { font-size: 0.82rem; padding: 0.65rem 0.85rem; white-space: nowrap; flex-shrink: 0; }
  .lb-body    { padding: 0.75rem; }

  /* ── Leaderboard — mobile card ─────────────────────────────── */
  .lb-body { padding: 0.5rem 0.4rem; }

  /* Kill table layout entirely */
  .lb-table,
  .lb-table thead,
  .lb-table tbody,
  .lb-table tfoot { display: block; width: 100%; }
  .lb-table thead { display: none; }

  /* Each row = a card */
  .lb-table tbody tr {
    display: block;
    margin-bottom: 7px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
    cursor: default;
  }
  .lb-table tbody tr.lb-row--me {
    background: rgba(26,127,232,0.08);
    border-color: rgba(26,127,232,0.3);
  }
  .lb-table tbody tr.lb-row--clickable { cursor: pointer; }
  .lb-table tbody tr.lb-row--clickable:active { background: rgba(26,127,232,0.14); }

  /* Hide all desktop cells, show only mobile card */
  .lb-table td              { display: none; padding: 0; border: none; }
  .lb-table td.lb-col-mobile-card { display: block; }

  /* Name inside mobile card */
  .lb-mc-info .lb-player-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
  }
  .lb-num { font-size: 0.95rem; font-weight: 700; }
  .lb-num--won { color: #4caf82; }

  /* ── Achievements modal — full screen ────────────────────────── */
  .ach-modal   { align-items: stretch; justify-content: stretch; }
  .ach-dialog  {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .ach-header  { padding: 1rem 1.1rem 0.85rem; }
  .ach-title   { font-size: 1.05rem; }
  .ach-body    { padding: 0.9rem 0.9rem 1.25rem; }
  .ach-grid    { gap: 0.45rem; }
  .ach-card    { padding: 0.65rem 0.2rem 0.6rem; border-radius: 9px; }
  .ach-card-img { width: min(52px, 72%); height: auto; }
  .ach-card-label { font-size: 0.68rem; }
  .ach-card-desc  { font-size: 0.61rem; }

  /* ── History modal — full-screen ────────────────────────────── */
  .history-modal   { align-items: stretch; justify-content: stretch; }
  .history-dialog  { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; }
  .history-body    { flex-direction: column; }
  /* Horizontal snap-scroll hand strip */
  .history-sidebar { width: 100% !important; border-right: none; border-bottom: 1px solid rgba(26,127,232,0.22); max-height: none; padding: 0.4rem 0 0.1rem; box-sizing: border-box; position: relative; }
  .history-sidebar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 6px; /* stop above scrollbar */
    width: 28px;
    background: linear-gradient(to right, transparent, var(--bg-modal, #0e1a2f));
    pointer-events: none;
    z-index: 1;
  }
  .history-sidebar-label { display: none; }
  .history-hand-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0.4rem;
    padding: 0 0.3rem 6px;   /* bottom padding makes room for thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(26,127,232,0.45) transparent;
    box-sizing: border-box;
  }
  .history-hand-list::-webkit-scrollbar { display: block; height: 3px; }
  .history-hand-list::-webkit-scrollbar-track { background: transparent; }
  .history-hand-list::-webkit-scrollbar-thumb { background: rgba(26,127,232,0.5); border-radius: 2px; }
  .history-hand-item {
    flex: 0 0 auto;
    width: auto;
    min-width: 80px;
    max-width: calc(100vw - 60px); /* never wider than viewport, always showing next tile peek */
    scroll-snap-align: start;
    border: 1px solid rgba(26,127,232,0.20);
    border-radius: 8px;
    border-left: 1px solid rgba(26,127,232,0.20);
    padding: 0.3rem 0.45rem;
    font-size: 0.72rem;
    box-sizing: border-box;
    background: rgba(255,255,255,0.03);
  }
  .history-hand-item.active { border-color: var(--accent); background: var(--accent-bg); border-left-color: var(--accent); }
  .hhi-top { margin-bottom: 0.15rem; gap: 0.25rem; }
  .hhi-num { font-size: 0.65rem; }
  .hhi-result { font-size: 0.58rem; padding: 1px 4px; }
  .hhi-board { white-space: nowrap; overflow: visible; font-size: 0.82rem; letter-spacing: 0.02em; }
  .hhi-meta  { display: none; }
  /* History detail — fixed height flex column; log expands to fill */
  .history-detail         { overflow: hidden; }
  .history-log            { flex: 1; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Hide download + bug-report buttons on mobile — log fills the space */
  #hh-report-row          { display: none; }
  /* Board on own row, players side-by-side below */
  .history-cards-area     { padding: 0.4rem 0.2rem 0.3rem; }
  .history-hole-row       { flex-wrap: wrap; gap: 0.2rem; }
  .history-community-slot { width: 100%; min-width: 0; flex: 0 0 100%; order: -1; }
  .history-player-slot    { min-width: 0; flex: 1; padding: 0.2rem 0.15rem; overflow: hidden; }
  .history-player-label   { font-size: 0.6rem; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Pills slightly smaller on mobile */
  .hh-pill                { font-size: 0.72rem; padding: 1px 4px; }
  .hh-best5-row .hh-pill  { font-size: 0.62rem; padding: 1px 3px; }
  /* Board cards compact on mobile */
  .hh-card                { width: 24px !important; height: 34px !important; font-size: 0 !important; border-radius: 3px !important; }
  .hh-best5-row           { flex-wrap: nowrap !important; gap: 2px; }
  .history-best5          { width: 100%; overflow-x: auto; align-items: flex-start !important; }
  .history-result         { margin: 0 0.45rem 0.4rem; font-size: 0.82rem; padding: 0.35rem 0.55rem; }
  .history-log-label      { padding: 0 0.55rem 0.25rem; font-size: 0.68rem; }
  .history-log            { padding: 0 0.55rem 0.75rem; font-size: 0.77rem; }
  .history-hand-rank      { font-size: 0.62rem; padding: 1px 4px; }

  /* ── Settings modal — bottom sheet ─────────────────────────── */
  .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);
    overflow: hidden;
    box-sizing: border-box;
  }
  .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* All sections inside modal: contain width but don't clip content */
  .settings-section,
  .settings-row-2,
  .settings-row-3,
  .settings-row-top-bar {
    max-width: 100%;
    box-sizing: border-box;
  }
  @keyframes modalSlideUpMobile { from { transform: translateY(100%); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }

  /* ── Exit / disconnect modals ────────────────────────────────── */
  .exit-confirm-card, .game-dim-card { width: min(90vw, 320px); padding: 1.5rem 1.75rem; }

  /* ── History: report panel touch targets ────────────────────── */
  .btn-hh-report,
  .btn-hh-download { padding: 0.7rem 0.9rem; font-size: 0.82rem; }
  .hh-tag-btn { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
  .btn-hh-submit  { padding: 0.7rem 1rem; font-size: 0.85rem; }
  .btn-hh-cancel  { padding: 0.7rem 0.9rem; font-size: 0.85rem; }
  .hh-report-notes { font-size: 16px; } /* prevent iOS zoom */

  /* ── Profile: mode row stacks on narrow screens ─────────────── */
  .profile-mode-row  { box-sizing: border-box; max-width: 100%; }
  .profile-mode-block { padding: 0.65rem 0.75rem; gap: 0.5rem; }
  .profile-mode-nums span:first-child { font-size: 0.85rem; }

  /* ── Achievements: subtitle wraps gracefully ─────────────────── */
  .ach-subtitle { font-size: 0.72rem; }
  .ach-header-trophy { font-size: 1.8rem; }
}


/* ── 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 rgba(255,255,255,0.08);
  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: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  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: var(--bg-card);
  border: 1px solid rgba(26,127,232,0.25);
  border-radius: var(--radius);
  width: min(900px, 96vw);
  height: min(620px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(26,127,232,0.07) inset,
    0 24px 64px rgba(0,0,0,0.75);
}

/* Header */
.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.history-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  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 rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  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 rgba(255,255,255,0.08);
  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 rgba(26,127,232,0.12);
  transition: background 0.1s;
}
.history-hand-item:hover   { background: rgba(255,255,255,0.04); }
.history-hand-item.active  { background: var(--accent-bg); border-left: 3px solid var(--accent); 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: rgba(26,127,232,0.18); color: var(--accent); }
.hhi-result.loss  { background: rgba(255,255,255,0.07); color: var(--text-muted); }
.hhi-result.split { background: rgba(200,148,74,0.15); 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 rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  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(--accent); border-bottom-color: var(--accent); }
.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;
  flex-wrap: wrap;
}
/* 3+ players: board on its own row, centered above player slots */
.history-hole-row[data-player-count="3"] .history-community-slot,
.history-hole-row[data-player-count="4"] .history-community-slot,
.history-hole-row[data-player-count="5"] .history-community-slot,
.history-hole-row[data-player-count="6"] .history-community-slot {
  flex: 0 0 100%;
  order: -1;
}
.history-player-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: border-color 0.2s;
  min-width: 70px;
  flex: 1;
  max-width: 180px;
}
.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 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.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;
}
.history-best5 {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}
.hh-best5-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  font-weight: 600;
}
.hh-best5-row {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  justify-content: center;
}
.hh-mini-card {
  width: 24px !important;
  height: 34px !important;
  border-radius: 3px !important;
}

/* ── N-player history scaling ─────────────────────────────── */
/* Player labels truncate gracefully */
.history-hole-row[data-player-count="4"] .history-player-label,
.history-hole-row[data-player-count="5"] .history-player-label,
.history-hole-row[data-player-count="6"] .history-player-label {
  font-size: 0.62rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Cards */
.hh-card {
  width: 34px;
  height: 48px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #ccc;
  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);
  position: relative;
  container-type: size;
  flex-shrink: 0;
}
.hh-card.red   { color: #c0392b; }
.hh-card.black { color: #1a1a1a; }
.hh-card.facedown {
  background: linear-gradient(150deg, #7a2419 0%, #4e1008 50%, #3a0c06 100%);
  border-color: rgba(0,0,0,0.4);
  color: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 1px 2px 6px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}
.hh-card.facedown::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
  pointer-events: none;
}
.hh-card.facedown::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 5px
    );
}
.hh-rank {
  position: absolute;
  top: 5%;
  left: 8%;
  font-size: 26cqh;
  line-height: 1;
}
.hh-suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40cqw;
  line-height: 1;
}
.hh-no-board, .hh-no-cards {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* ── Compact pill cards (player holes + best-5) ──────────── */
.hh-pill {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}
.hh-pill.red   { color: #c0392b; }
.hh-pill.black { color: #1a1a1a; }
.hh-pill.suit-d { color: #1a7fe8; }
.hh-pill.suit-c { color: #1a8a3e; }
.hh-pill-suit {
  font-size: 0.9em;
  line-height: 1;
}
.hh-pill-facedown {
  background: linear-gradient(150deg, #7a2419 0%, #3a0c06 100%);
  border-color: rgba(0,0,0,0.4);
  color: #888;
  font-weight: 600;
}
/* Best-5 pills slightly smaller */
.hh-best5-row .hh-pill {
  font-size: 0.72rem;
  padding: 1px 4px;
}
/* Highlight hole cards that are in the player's best-5 played hand */
.hh-pill.hh-pill-played {
  box-shadow: 0 0 0 1.5px rgba(255,215,0,0.7);
  background: rgba(255,215,0,0.12);
}

/* 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: rgba(52,199,130,0.08);
  color: #5de8aa;
  border: 1px solid rgba(52,199,130,0.35);
}
.history-result.loss  {
  background: rgba(220,80,80,0.08);
  color: #e87a7a;
  border: 1px solid rgba(220,80,80,0.35);
}
.history-result.split {
  background: rgba(200,148,74,0.08);
  color: var(--gold-light);
  border: 1px solid rgba(200,148,74,0.35);
}

/* 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 rgba(255,255,255,0.05); }
.hh-log-street {
  color: var(--accent);
  font-weight: 700;
  padding-top: 0.35rem;
  border-bottom-color: rgba(255,255,255,0.08);
}
.hh-log-empty { color: var(--text-muted); font-style: italic; font-size: 0.8rem; }

/* ── Hand report UI (in history modal) ────────────────────────── */
.hh-report-row {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.btn-hh-report {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: 0.2px;
}
.btn-hh-report:hover {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}
.btn-hh-report .material-symbols-rounded { font-size: 1rem; }
.btn-hh-report.hidden { display: none; }

.btn-hh-download {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: 0.2px;
  margin-bottom: 0.5rem;
}
.btn-hh-download:hover {
  background: rgba(80,160,255,0.07);
  border-color: rgba(80,160,255,0.35);
  color: #7ab8f5;
}
.btn-hh-download .material-symbols-rounded { font-size: 1rem; }

.hh-report-panel {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 0.9rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hh-report-panel.hidden { display: none; }

.hh-report-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.hh-report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.hh-tag-btn {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.28rem 0.65rem;
  transition: background 0.12s, border-color 0.12s;
}
.hh-tag-btn:hover { background: rgba(101,130,162,0.18); border-color: var(--accent); }
.hh-tag-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hh-report-notes {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.4rem 0.6rem;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s;
}
.hh-report-notes:focus { border-color: var(--accent-border); outline: none; }
.hh-report-notes::placeholder { color: var(--text-muted); }
.hh-report-actions {
  display: flex;
  gap: 0.5rem;
}
.btn-hh-submit {
  flex: 1;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.4rem 1rem;
  transition: filter 0.12s;
  letter-spacing: 0.2px;
}
.btn-hh-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-hh-submit:not(:disabled):hover { filter: brightness(1.1); }
.btn-hh-cancel {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  transition: border-color 0.12s, color 0.12s;
}
.btn-hh-cancel:hover { border-color: rgba(255,255,255,0.2); color: var(--text-secondary); }
.hh-report-status {
  font-size: 0.75rem;
  font-weight: 600;
  min-height: 1em;
}
.hh-report-status.ok  { color: #4ade80; }
.hh-report-status.err { color: #e07070; }

/* ── Admin reports view (inside settings modal) ───────────────── */
.btn-hh-admin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  transition: background 0.12s, border-color 0.12s;
}
.btn-hh-admin:hover { background: rgba(101,130,162,0.18); border-color: var(--accent); }
.btn-hh-admin .material-symbols-rounded { font-size: 1rem; }

/* Badge on "View Reported Hands" button */
.hh-reports-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.hh-reports-badge.has-new {
  color: var(--accent);
}

.hh-admin-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.hh-admin-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.hh-admin-back {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  transition: border-color 0.12s, color 0.12s;
}
.hh-admin-back:hover { border-color: var(--accent-border); color: var(--accent); }
.hh-admin-back .material-symbols-rounded { font-size: 0.95rem; }
.hh-admin-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
/* ── Admin list panel (paginated rows) ───────────────────────────── */
.hh-admin-list-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hh-admin-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0;
}
.hh-admin-loading,
.hh-admin-empty   { color: var(--text-muted); font-size: 0.85rem; padding: 1.5rem 1rem; }
.hh-admin-error   { color: #e07070; font-size: 0.85rem; padding: 1.5rem 1rem; }

/* Clickable list row */
.hh-admin-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.1s;
}
.hh-admin-row:hover { background: rgba(255,255,255,0.04); }
.hh-admin-row:last-child { border-bottom: none; }
.hh-admin-row-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.hh-admin-row-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.hh-admin-row-notes {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}
.hh-admin-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
}
.hh-admin-row-winner {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: right;
}
.hh-admin-row-chevron {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* Shared tag + date */
.hh-admin-tag {
  background: var(--accent-bg);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.12rem 0.4rem;
  text-transform: uppercase;
  display: inline-block;
}
.hh-admin-date {
  color: var(--text-muted);
  font-size: 0.68rem;
}

/* Delete button */
.hh-admin-delete {
  background: none;
  border: 1px solid rgba(224,112,112,0.25);
  border-radius: 5px;
  color: #e07070;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.hh-admin-delete:hover { background: rgba(224,112,112,0.12); border-color: #e07070; }
.hh-admin-delete .material-symbols-rounded { font-size: 0.9rem; }

/* Refresh button in header */
.hh-admin-refresh {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.2rem;
  margin-left: auto;
  transition: color 0.12s;
}
.hh-admin-refresh:hover { color: var(--accent); }
.hh-admin-refresh .material-symbols-rounded { font-size: 1.1rem; }

/* Pagination bar */
.hh-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.hh-admin-pg-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  transition: border-color 0.12s, color 0.12s;
}
.hh-admin-pg-btn:hover:not(:disabled) { border-color: var(--accent-border); color: var(--accent); }
.hh-admin-pg-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.hh-admin-pg-info { font-size: 0.75rem; color: var(--text-muted); }

/* ── Admin detail panel ───────────────────────────────────────────── */
.hh-admin-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  gap: 0.6rem;
}
.hh-admin-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hh-admin-detail-by {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.hh-admin-detail-notes {
  font-size: 0.78rem;
  color: #9ba3af;
  font-style: italic;
}
.hh-admin-detail-replayer {
  flex: 1;
}

/* ── Kept for legacy compat ──────────────────────────────────────── */
.hh-admin-meta { color: var(--text-secondary); font-size: 0.72rem; }
.hh-admin-meta code {
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  color: #9ba3af;
  font-size: 0.65rem;
  padding: 0.05rem 0.3rem;
}


/* ── Admin inline hand replayer ──────────────────────────────────── */
.hh-adm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 0.6rem;
  margin-top: 0.5rem;
}
.hh-adm-tab {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hh-adm-tab:hover:not(:disabled) { border-color: var(--accent-border); color: var(--accent); }
.hh-adm-tab.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
.hh-adm-tab.unavailable, .hh-adm-tab:disabled { opacity: 0.3; cursor: not-allowed; }
.hh-adm-board-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.hh-adm-board {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.hh-adm-players {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.hh-adm-slot {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 7px;
  padding: 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transition: border-color 0.15s;
}
.hh-adm-slot.winner {
  border-color: var(--gold);
  background: rgba(200,148,74,0.06);
}
.hh-adm-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hh-adm-cards {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.hh-adm-rank {
  font-size: 0.68rem;
  color: var(--gold);
  font-weight: 700;
  min-height: 1em;
  text-align: center;
}
.hh-adm-best5 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hh-adm-vs {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 700;
  padding-top: 1.5rem;
  flex-shrink: 0;
}
.hh-adm-result {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0;
  border-radius: 5px;
  margin-bottom: 0.4rem;
}
.hh-adm-result.win  { color: #4ade80; }
.hh-adm-result.loss { color: #e07070; }
.hh-adm-result.split { color: var(--gold); }
.hh-adm-log {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  max-height: 130px;
  overflow-y: auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.5;
}
/* Reuse .hh-log-line and .hh-log-street from history viewer */

/* 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; }

.history-empty-loading,
.history-empty-nohands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.history-empty-loading span,
.history-empty-nohands span {
  font-size: 0.8rem;
  opacity: 0.6;
}
.history-empty-loading.hidden,
.history-empty-nohands.hidden { display: none; }

.history-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.55);
  border-radius: 50%;
  animation: hh-spin 0.75s linear infinite;
}
@keyframes hh-spin {
  to { transform: rotate(360deg); }
}

/* 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: var(--green);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.3;
  transition: opacity 0.12s ease;
  font-family: var(--font);
}

/* ── Action label color modifiers ─────────────────────────────── */
/* Positive actions (bet, raise, all-in) — timer green */
.p-last-action.act-positive {
  color: #65cb74;
}
/* Call — timer green */
.p-last-action.act-call {
  color: #65cb74;
}
/* Fold — timer green */
.p-last-action.act-fold {
  color: #65cb74;
}
/* Check — game blue */
.p-last-action.act-check {
  color: var(--blue);
}
/* Winner — game gold */
.p-last-action.act-winner {
  color: var(--gold-light);
}
/* Split — game blue */
.p-last-action.act-split {
  color: var(--blue);
}

.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; }
  to   { opacity: 1; }
}

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

.badge-thinking {
  background: rgba(90, 100, 115, 0.12);
  border: 1px solid rgba(90, 100, 115, 0.30);
  color: #7a8696;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 1px 7px;
  border-radius: 10px;
  animation: thinkingPulse 1.4s ease-in-out infinite;
}

@keyframes thinkingPulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.75; }
}

/* ═══════════════════════════════════════════════════════════════
   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: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}

.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: #2ea84a; }
.action-rank-bar-fill.rank-mid    { background: var(--gold); }
.action-rank-bar-fill.rank-orange { background: #e07830; }
.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;
}

/* ═══════════════════════════════════════════════════════════════
   Active-turn highlight — breathing glow + background tint
   ═══════════════════════════════════════════════════════════════
   Approach: animate box-shadow (outer glow) and background-color
   together for a clear, readable pulse. Border stays gold and
   solid so there's always a visible edge even at glow-low.
   ═══════════════════════════════════════════════════════════════ */
.player-info-box.active-turn {
  transform: none !important;
  border-color: rgba(200,148,74,0.85) !important;
  animation: activeTurnBreathe 2s ease-in-out infinite !important;
}

@keyframes activeTurnBreathe {
  0%, 100% {
    background: linear-gradient(160deg, rgba(22,30,44,0.98) 0%, rgba(14,19,30,0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(200,148,74,0.25),
      0 0 10px rgba(200,148,74,0.20),
      0 0 24px rgba(200,148,74,0.08),
      0 4px 18px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
  50% {
    background: linear-gradient(160deg, rgba(36,26,14,0.98) 0%, rgba(26,18,8,0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(200,148,74,0.70),
      0 0 16px rgba(200,148,74,0.55),
      0 0 40px rgba(200,148,74,0.22),
      0 0 64px rgba(200,148,74,0.08),
      0 4px 18px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,224,160,0.07);
  }
}

/* Suppress the ::after pseudo element — glow is handled by box-shadow above */
.player-info-box.active-turn::after { content: none; }

.player-info-box { position: relative; }

/* ═══════════════════════════════════════════════════════════════
   Winning card highlight at showdown — static lift + glow, no loop
   ═══════════════════════════════════════════════════════════════ */
.card.winning-card {
  transform: translateY(-9px) !important;
  box-shadow:
    0 0 0 2px rgba(101,130,162,0.9),
    0 0 0 3px rgba(101,130,162,0.3),
    0 0 18px rgba(101,130,162,0.45),
    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;
}

/* Board B winner highlight — purple tint (distinct from board A blue) */
.card.winning-card--b {
  transform: translateY(-9px) !important;
  box-shadow:
    0 0 0 2px rgba(167,139,250,0.9),
    0 0 0 3px rgba(167,139,250,0.3),
    0 0 18px rgba(167,139,250,0.45),
    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 (legacy — kept for compatibility)
   ═══════════════════════════════════════════════════════════════ */
.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); }
.lobby-hamburger { display: none; }
.lobby-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 0 0 1rem;
}

/* ── How to Play placement row (between tagline and step 1) ─── */
.lobby-htp-row {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 1.25rem;
}
.lobby-htp-btn {
  flex: none !important;
  width: 130px;
  font-size: 0.8rem;
  padding: 0.55rem 0.75rem;
}

/* ── Utility bar (How to Play / Leaderboard / Settings) ─────── */
.lobby-util-bar {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.lobby-util-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.65rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.lobby-util-btn .material-symbols-rounded { font-size: 1.1rem; line-height: 1; }
.lobby-util-btn:hover {
  border-color: rgba(255,255,255,0.15);
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

/* ── Rules blurb ────────────────────────────────────────────── */
.lobby-unlock-section {
  /* margin handled by .lobby-duo-row */
}
.lobby-unlock-header {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(100deg, rgba(200,148,74,0.10) 0%, var(--bg-surface) 55%);
  border: 1px solid rgba(200,148,74,0.40);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: 0 2px 12px rgba(200,148,74,0.08);
}
.lobby-unlock-header:hover {
  background: linear-gradient(100deg, rgba(200,148,74,0.18) 0%, var(--bg-surface2) 55%);
  border-color: rgba(200,148,74,0.70);
}
.lobby-unlock-header.active {
  background: linear-gradient(100deg, rgba(200,148,74,0.18) 0%, var(--bg-surface2) 55%);
  border-color: rgba(200,148,74,0.70);
  border-radius: 10px 10px 0 0;
}
.lobby-unlock-header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.lobby-unlock-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.lobby-unlock-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  text-align: left;
}
.lobby-unlock-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-light);
}
.lobby-unlock-text span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.lobby-rules-blurb {
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  background: transparent;
  border: none;
  border-left: 2px solid rgba(200,148,74,0.35);
  border-radius: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.65;
  opacity: 0.75;
}
.lobby-rules-blurb strong { color: var(--text-secondary); }
.lobby-rules-blurb em { color: var(--text-secondary); font-style: italic; }

/* ── Recent hands strip ─────────────────────────────────────── */
.lobby-recent-hands {
  margin-top: 0.85rem;
}
.lobby-recent-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0.45rem;
}
.lobby-recent-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 0.5rem;
  padding-bottom: 4px; /* thin scrollbar room */
}
.lobby-recent-scroll::-webkit-scrollbar { height: 3px; }
.lobby-recent-scroll::-webkit-scrollbar-track { background: transparent; }
.lobby-recent-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* Default: 2 visible + partial peek of 3rd */
.lobby-recent-item {
  flex: 0 0 calc(50% - 0.25rem);
  scroll-snap-align: start;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.6rem 0.65rem 0.55rem;
}

/* 1 item — full width */
.lobby-recent-scroll[data-count="1"] .lobby-recent-item { flex: 0 0 100%; }

/* 2 items — split evenly, no peek needed */
.lobby-recent-scroll[data-count="2"] .lobby-recent-item { flex: 0 0 calc(50% - 0.25rem); }

/* Row: hand num + result badge */
.lrh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}
.lrh-hand-num {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 600;
}
.lrh-result {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 4px;
}
.lrh-result--won   { background: rgba(42,176,99,0.18);  color: #3fcf78; border: 1px solid rgba(42,176,99,0.3); }
.lrh-result--lost  { background: rgba(220,60,60,0.15);  color: #e86060; border: 1px solid rgba(220,60,60,0.25); }
.lrh-result--split { background: rgba(160,140,80,0.18); color: #c8a84a; border: 1px solid rgba(160,140,80,0.28); }

/* Mini cards row */
.lrh-hole,
.lrh-community {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2px;
  margin-bottom: 0.35rem;
}
.lrh-community {
  margin-bottom: 0.3rem;
}

/* Mini card element */
.lrh-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 28px;
  border-radius: 3px;
  background: #f0ede6;
  color: #1a1a2e;
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.lrh-card--red { color: #c8000a; }
.lrh-card--back { background: #1e3a6e; border-color: rgba(255,255,255,0.08); }

.lrh-rank {
  font-size: 8px;
  line-height: 1;
  display: block;
}
.lrh-suit {
  font-size: 7px;
  line-height: 1;
  display: block;
}

/* Hand description */
.lrh-desc {
  font-size: 0.6rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.2rem;
}

/* Pot amount */
.lrh-pot {
  font-size: 0.62rem;
  font-weight: 700;
  color: #c8a84a;
}

/* ══════════════════════ ACHIEVEMENTS + UNLOCK TAB SYSTEM ═══════════════════ */

/* ── Tab wrapper ────────────────────────────────────────────── */
.lobby-tabs-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  border: 1px solid rgba(200,148,74,0.35);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(200,148,74,0.08);
  overflow-anchor: none; /* prevent browser scroll-anchoring when panels expand/collapse */
}
.lobby-tabs-wrap.tabs-open {
  border-color: rgba(200,148,74,0.55);
}

/* ── Tab buttons (50% each, flex-wrap puts panels on new row) ── */
.lobby-tab-btn {
  flex: 1 1 50%;
  min-width: 0;
  padding: 0;
  background: linear-gradient(100deg, rgba(200,148,74,0.09) 0%, var(--bg-surface) 60%);
  border: none;
  border-right: 1px solid rgba(200,148,74,0.25);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-bottom-color 0.15s;
  touch-action: manipulation; /* prevents iOS double-tap-to-zoom / sticky :hover */
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .lobby-tab-btn:hover {
    background: linear-gradient(100deg, rgba(200,148,74,0.17) 0%, var(--bg-surface2) 60%);
  }
}
.lobby-tab-btn.active {
  background: linear-gradient(100deg, rgba(200,148,74,0.22) 0%, var(--bg-surface2) 60%);
  border-bottom-color: var(--gold);
}

/* ── Shared inner layout for tab buttons ────────────────────── */
.lobby-tab-inner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.8rem;
}
.lobby-tab-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}
.lobby-tab-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  flex: 1;
  text-align: left;
}
.lobby-tab-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}
.lobby-tab-text strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-light);
}
.lobby-tab-text span {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* ── Static ? pill on Achievements tab ──────────────────────── */
.lobby-tab-q {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200,148,74,0.35);
  color: rgba(200,148,74,0.6);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
}
.lobby-tab-btn.active .lobby-tab-q {
  border-color: var(--gold-light);
  color: var(--gold-light);
}
@media (hover: hover) {
  .lobby-tab-btn:hover .lobby-tab-q {
    border-color: var(--gold-light);
    color: var(--gold-light);
  }
}

/* ── Content panels: full-width row beneath tabs ────────────── */
.lobby-tab-content {
  flex: 0 0 100%;
  padding: 1.2rem;
  background: rgba(200,148,74,0.02);
  border-top: 1px solid rgba(200,148,74,0.22);
  overflow-anchor: none;
}

/* ── Achievements panel body ─────────────────────────────────── */
/* .ach-panel inside .lobby-tabs-wrap inherits .lobby-tab-content; no extra box */ 
.ach-panel {
  /* layout handled by .lobby-tab-content */
}
.ach-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Progress bar */
.ach-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ach-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-secondary);
}
.ach-progress-label strong { color: var(--gold-light); }
.ach-progress-pct {
  font-weight: 700;
  color: var(--gold);
}
.ach-progress-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.ach-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, #e0c060 100%);
  border-radius: 99px;
  transition: width 0.6s ease;
  min-width: 4px;
}

/* Tier sections */
.ach-tier-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ach-tier-section + .ach-tier-section {
  margin-top: 0.65rem;
}
.ach-tier-heading {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Badge grid — 4 per row in full-width panel (collapses to 1 on mobile) */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}

/* Badge card — horizontal: badge left, plaque right */
.ach-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
  cursor: default;
}
.ach-card--earned {
  background: linear-gradient(135deg, rgba(101,130,162,0.13) 0%, rgba(101,130,162,0.05) 100%);
  border: 1px solid rgba(101,130,162,0.28);
}
.ach-card--earned:hover {
  background: linear-gradient(135deg, rgba(101,130,162,0.2) 0%, rgba(101,130,162,0.08) 100%);
  border-color: rgba(101,130,162,0.5);
  box-shadow: 0 3px 10px rgba(101,130,162,0.15);
}
.ach-card--earned:hover .ach-card-label { color: var(--accent); }
.ach-card--earned:hover .ach-card-desc  { color: var(--text-secondary); }
.ach-card--locked {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  opacity: 0.45;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
}
.ach-card--locked:hover,
.ach-card--locked:focus-visible,
.ach-card--locked.previewing {
  opacity: 1;
  background: linear-gradient(135deg, rgba(101,130,162,0.14) 0%, rgba(101,130,162,0.05) 100%);
  border-color: rgba(101,130,162,0.38);
  box-shadow: 0 3px 10px rgba(101,130,162,0.12);
}

/* SVG badge image */
.ach-card-img {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: block;
  transition: filter 0.15s, transform 0.15s;
}
.ach-card--locked .ach-card-img {
  filter: grayscale(1) brightness(0.45);
}
.ach-card--locked:hover .ach-card-img,
.ach-card--locked:focus-visible .ach-card-img,
.ach-card--locked.previewing .ach-card-img {
  filter: drop-shadow(0 0 5px rgba(101,130,162,0.4));
  transform: scale(1.05);
}
.ach-card--earned:hover .ach-card-img {
  filter: drop-shadow(0 0 5px rgba(101,130,162,0.45));
  transform: scale(1.05);
}

/* Plaque: name + description stacked */
.ach-card-plaque {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.07rem;
}
.ach-card-label {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-card--locked .ach-card-label { color: var(--text-muted); }
.ach-card--locked:hover .ach-card-label,
.ach-card--locked:focus-visible .ach-card-label,
.ach-card--locked.previewing .ach-card-label { color: var(--accent); }
.ach-card-desc {
  font-size: 0.575rem;
  color: var(--text-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-card--locked:hover .ach-card-desc,
.ach-card--locked:focus-visible .ach-card-desc,
.ach-card--locked.previewing .ach-card-desc { color: var(--text-secondary); }

/* Earned checkmark corner */
.ach-card-earned-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent var(--gold) transparent transparent;
  pointer-events: none;
}
.ach-card-earned-badge svg {
  position: absolute;
  top: 2px;
  right: -18px;
  color: #1a1a1a;
  display: block;
}

/* Mobile-only divider above the tab section */
.lobby-tabs-hr {
  display: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 0.9rem 0 0;
}

/* ── Mobile sticky header ────────────────────────────────────── */
.lobby-mobile-header {
  display: none; /* hidden on desktop */
}

/* Tablet + Mobile: full-bleed lobby on any touch device (iPad, Android tablet, phone) */
@media (pointer: coarse) {
  /* Show speed-pick nudge badge until a speed is chosen */
  .speed-pick-nudge { display: inline-flex; align-items: center; }
  .lobby-mobile-header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0 1.25rem;
    height: 56px;
    background: #0a1535;
    border-bottom: 1px solid rgba(200,148,74,0.20);
    /* hidden until scrolled — slides down */
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .lobby-mobile-header.lmh-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .lmh-logo {
    flex: 1;
    min-width: 0;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .lmh-logo .logo-word-costanza { color: var(--text-primary); }
  .lmh-logo .logo-word-poker    { color: var(--gold-light); }
  .lmh-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }
  .lmh-chips {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(220,180,80,0.95);
    font-feature-settings: 'tnum';
  }
  .lmh-chip-icon { font-size: 0.9rem; line-height: 1; }
  .lmh-cog-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
  }
  .lmh-cog-btn .material-symbols-rounded { font-size: 1.3rem; }
  .lmh-cog-btn:hover { color: rgba(255,255,255,0.85); }

  #lobby {
    padding: 0;
    padding-top: env(safe-area-inset-top);
    background: var(--bg-card);
    align-items: stretch;
  }
  .lobby-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    max-width: none;
    padding: 1.5rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom));
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Full-bleed tabs and util bar — break out of card padding */
  .lobby-tabs-hr {
    display: block;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
  }
  .lobby-tabs-wrap {
    flex-direction: column;
    overflow: visible;
    border: none;
    box-shadow: none;
    gap: 0;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-top: 0.6rem;
  }
  .lobby-tab-btn {
    flex: none;
    width: 100%;
    border: 1px solid rgba(200,148,74,0.30);
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(100deg, rgba(200,148,74,0.10) 0%, var(--bg-surface) 55%);
  }
  .lobby-tab-btn.active {
    border-radius: 0;
    border-bottom-color: transparent;
  }
  /* Interleave: ach-btn → ach-panel → unlock-btn → unlock-panel */
  #btn-achievements-lobby { order: 1; }
  #ach-panel               { order: 2; }
  #egg-info-toggle         { order: 3; margin-top: 0; border: 1px solid rgba(200,148,74,0.30); border-left: none; border-right: none; border-radius: 0; border-top-color: rgba(200,148,74,0.30); }
  #egg-info-toggle.active  { border-radius: 0; border-bottom-color: transparent; }
  #egg-info-panel          { order: 4; }
  #egg-info-panel {
    border: 1px solid rgba(200,148,74,0.25);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .lobby-tab-content {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(200,148,74,0.25);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    background: rgba(200,148,74,0.03);
  }
  .ach-grid { grid-template-columns: 1fr; }
  .lv2-util-bar {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-top: 1px solid rgba(200,148,74,0.18);
  }
  /* Font size improvements for mobile legibility */
  .lobby-tab-text strong { font-size: 1rem; }
  .lobby-tab-text span   { font-size: 0.8rem; }
  .lobby-tab-inner       { padding: 0.8rem 1rem; }
  .ls-label              { font-size: 0.95rem; }
  .lv2-speed-btn         { font-size: 0.88rem; }
  .lv2-speed-btn .material-symbols-rounded { font-size: 1.25rem; }
  .lv2-speed-sub         { font-size: 0.78rem; }
  .lv2-util-btn          { font-size: 0.82rem; padding: 0.75rem 0.25rem; }
  .lv2-util-btn .material-symbols-rounded  { font-size: 1.35rem; }
  /* Achievements panel — panel content legibility */
  .ach-card              { padding: 0.6rem 0.5rem; gap: 0.65rem; }
  .ach-card-img          { width: 48px; height: 48px; }
  .ach-card-label        { font-size: 0.88rem; white-space: normal; }
  .ach-card-desc         { font-size: 0.78rem; white-space: normal; }
  .ach-progress-label    { font-size: 0.82rem; }
  .ach-tier-heading      { font-size: 0.75rem; }
  /* Free Upgrades panel — panel content legibility */
  .egg-info-item         { padding: 0.55rem 0.5rem; gap: 0.75rem; }
  .egg-info-icon         { font-size: 1.3rem; width: 1.7rem; }
  .egg-info-name         { font-size: 1.05rem; }
  .egg-info-hint         { font-size: 0.9rem; }
  .egg-info-group-title  { font-size: 0.82rem; }
  .egg-info-intro        { font-size: 0.9rem; }
}

/* Mobile: tab wrap becomes stacked accordion, full-width buttons */
@media (max-width: 768px) {
  .lobby-mobile-header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0 1.25rem;
    height: 56px;
    background: #0a1535;
    border-bottom: 1px solid rgba(200,148,74,0.20);
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .lobby-mobile-header.lmh-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .lmh-logo {
    flex: 1;
    min-width: 0;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .lmh-logo .logo-word-costanza { color: var(--text-primary); }
  .lmh-logo .logo-word-poker    { color: var(--gold-light); }
  .lmh-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }
  .lmh-chips {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(220,180,80,0.95);
    font-feature-settings: 'tnum';
  }
  .lmh-chip-icon { font-size: 0.9rem; line-height: 1; }
  .lmh-cog-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
  }
  .lmh-cog-btn .material-symbols-rounded { font-size: 1.3rem; }
  .lmh-cog-btn:hover { color: rgba(255,255,255,0.85); }

  /* Full-bleed lobby — no background gap, card fills the screen */
  #lobby {
    padding: 0;
    padding-top: env(safe-area-inset-top);
    background: var(--bg-card);
    align-items: stretch;
  }
  .lobby-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    max-width: none;
    padding: 1.25rem 1.25rem 1.75rem;
    padding-bottom: calc(1.75rem + 100px + env(safe-area-inset-bottom));
    min-height: 100vh;
    min-height: 100dvh;
  }

  .lobby-tabs-hr { display: block; margin-left: -1.25rem; margin-right: -1.25rem; width: calc(100% + 2.5rem); }
  .lobby-tabs-wrap {
    flex-direction: column;
    overflow: visible;
    border: none;
    box-shadow: none;
    gap: 0;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-top: 0.6rem;
  }
  .lobby-tab-btn {
    flex: none;
    width: 100%;
    border: 1px solid rgba(200,148,74,0.30);
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(100deg, rgba(200,148,74,0.10) 0%, var(--bg-surface) 55%);
  }
  .lobby-tab-btn.active {
    border-radius: 0;
    border-bottom-color: transparent;
  }
  /* Interleave: ach-btn → ach-panel → unlock-btn → unlock-panel */
  #btn-achievements-lobby { order: 1; }
  #ach-panel               { order: 2; }
  #egg-info-toggle         { order: 3; margin-top: 0; }
  #egg-info-panel          { order: 4; }
  /* ID selector (1,0,0) beats .lobby-tabs-wrap .egg-info-panel (0,2,0) which resets border:none */
  #egg-info-panel {
    border: 1px solid rgba(200,148,74,0.25);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .lobby-tab-content {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(200,148,74,0.25);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    background: rgba(200,148,74,0.03);
  }
  .ach-grid { grid-template-columns: 1fr; }
  .lv2-util-bar {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-top: 1px solid rgba(200,148,74,0.18);
  }
  /* Font size improvements for mobile legibility */
  .lobby-tab-text strong { font-size: 1rem; }
  .lobby-tab-text span   { font-size: 0.8rem; }
  .lobby-tab-inner       { padding: 0.8rem 1rem; }
  .ls-label              { font-size: 0.95rem; }
  .lv2-speed-btn         { font-size: 0.88rem; }
  .lv2-speed-btn .material-symbols-rounded { font-size: 1.25rem; }
  .lv2-speed-sub         { font-size: 0.78rem; }
  .lv2-util-btn          { font-size: 0.82rem; padding: 0.75rem 0.25rem; }
  .lv2-util-btn .material-symbols-rounded  { font-size: 1.35rem; }
  /* Achievements panel — panel content legibility */
  .ach-card              { padding: 0.6rem 0.5rem; gap: 0.65rem; }
  .ach-card-img          { width: 48px; height: 48px; }
  .ach-card-label        { font-size: 0.88rem; white-space: normal; }
  .ach-card-desc         { font-size: 0.78rem; white-space: normal; }
  .ach-progress-label    { font-size: 0.82rem; }
  .ach-tier-heading      { font-size: 0.75rem; }
  /* Free Upgrades panel — panel content legibility */
  .egg-info-item         { padding: 0.55rem 0.5rem; gap: 0.75rem; }
  .egg-info-icon         { font-size: 1.3rem; width: 1.7rem; }
  .egg-info-name         { font-size: 1.05rem; }
  .egg-info-hint         { font-size: 0.9rem; }
  .egg-info-group-title  { font-size: 0.82rem; }
  .egg-info-intro        { font-size: 0.9rem; }
}



/* ── 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-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.lobby-footer a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.lobby-footer a:hover { opacity: 1; color: var(--text-secondary); }
.lobby-footer-sep { opacity: 0.4; }
.lobby-footer-bvb-btn {
  background: none;
  border: none;
  color: rgba(200,148,74,0.80);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
}
.lobby-footer-bvb-btn:hover { color: rgba(200,148,74,1); }
.btn-sm { padding: 6px 14px !important; font-size: 0.78rem !important; }

/* ═══════════════════════════════════════════════════════════════
   Lobby Skin 2 — Full-page app chrome (replayer aesthetic)
   Applied when <body class="lobby-skin-2"> is set.
   Skin 1 = default (card on gradient, no class needed).
   Skin 3 = retro-mode (body.retro-mode, separate block).
   ═══════════════════════════════════════════════════════════════ */

/* ── Full-viewport container ────────────────────────────────── */
body.lobby-skin-2 #lobby {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;           /* explicit stacking level — modal-overlay (z:900) clearly above */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #0a1535 !important;
  scrollbar-width: none !important;
}
/* Grid texture overlay — matches homepage hero aesthetic */
body.lobby-skin-2 #lobby::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(24,114,212,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,114,212,0.09) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 30%, black 30%, transparent 85%);
  pointer-events: none;
}
/* Felt glow at bottom — matches homepage hero */
body.lobby-skin-2 #lobby::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 55%;
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(28,56,112,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 130% 65% at 50% 110%, rgba(24,114,212,0.2) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
/* Hide lobby when game is active — overrides the !important display:flex above */
body.desktop-game-active.lobby-skin-2 #lobby,
body.mobile-game-active.lobby-skin-2 #lobby { display: none !important; }

/* ── Persistent app header bar ──────────────────────────────── */
body.lobby-skin-2 .lobby-mobile-header {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* Content constrained to match the 1200px card below */
  padding: 0 max(0.75rem, calc((100% - 1200px) / 2 + 0.75rem)) 0 max(1.25rem, calc((100% - 1200px) / 2 + 1.25rem)) !important;
  padding-top: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  background: rgba(9,17,43,0.92) !important;
  border-bottom: 1px solid rgba(24,114,212,0.22) !important;
  z-index: 100 !important;
  position: relative !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
  top: auto !important; left: auto !important; right: auto !important;
}
body.lobby-skin-2 .lmh-logo {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1;
}
body.lobby-skin-2 .lmh-logo .logo-word-costanza { color: var(--text-primary); }
body.lobby-skin-2 .lmh-logo .logo-word-poker    { color: var(--gold-light); }
body.lobby-skin-2 .lobby-mobile-header .lobby-av-wrap {
  position: static;
  flex-shrink: 0;
}

/* ── Scrollable content body ─────────────────────────────────── */
body.lobby-skin-2 .lobby-scroll-body {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #1a2d6b transparent;
  position: relative;
  z-index: 1;
}
body.lobby-skin-2 .lobby-scroll-body::-webkit-scrollbar { width: 5px; }
body.lobby-skin-2 .lobby-scroll-body::-webkit-scrollbar-track { background: transparent; }
body.lobby-skin-2 .lobby-scroll-body::-webkit-scrollbar-thumb { background: #1e3270; border-radius: 10px; }

/* ── Card → flat transparent content pane ────────────────────── */
body.lobby-skin-2 .lobby-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 1200px !important;
  min-height: 0 !important;
  padding: 1.5rem 0.75rem 2.5rem !important;
  margin: 0 auto !important;
}

/* ── Hide hero logo — header carries the brand ────────────────── */
body.lobby-skin-2 .lobby-logo { display: none; }

/* ── Profile hero — hidden in all other skins ────────────────── */
body:not(.lobby-skin-2) #s2-profile-hero { display: none !important; }
body.lobby-skin-2 .s2-profile-hero { display: none; } /* JS removes .hidden to show */
body.lobby-skin-2 .s2-profile-hero:not(.hidden) {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0;
  background: rgba(13,31,82,0.6);
  border: 1px solid rgba(26,127,232,0.28);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
/* Only the name/avatar area acts as a back-to-lobby click — not the edit button */
body.lobby-skin-2 .s2-profile-edit-btn { cursor: pointer; }
/* Headline acts as home link when panel is open */
body.s2-panel-active.lobby-skin-2 .ls-hero { cursor: pointer; }
body.lobby-skin-2 .s2-profile-hero:not(.hidden)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200,148,74,0.6), transparent);
}
body.lobby-skin-2 .s2-profile-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(200,148,74,0.6);
  flex-shrink: 0;
  background: #1a2d6b;
  box-shadow: 0 0 16px rgba(200,148,74,0.2);
}
body.lobby-skin-2 .s2-profile-info {
  flex: 1;
  min-width: 0;
}
body.lobby-skin-2 .s2-profile-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.2rem;
}
body.lobby-skin-2 .s2-profile-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--gold-light);
  opacity: 0.8;
}
body.lobby-skin-2 .s2-chip-icon { font-size: 0.75rem; }
body.lobby-skin-2 .s2-profile-edit-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
body.lobby-skin-2 .s2-profile-edit-btn .material-symbols-rounded { font-size: 1.1rem; }
@media (hover: hover) {
  body.lobby-skin-2 .s2-profile-edit-btn:hover {
    background: rgba(200,148,74,0.1);
    border-color: rgba(200,148,74,0.35);
    color: var(--gold-light);
  }
}

/* ── Always hide the tab divider line ────────────────────────── */
body.lobby-skin-2 .lobby-tabs-hr { display: none !important; }

/* ── JS compat stubs stay hidden ─────────────────────────────── */
body.lobby-skin-2 #lobby-sticky-chip-count { display: none !important; }
body.lobby-skin-2 #lobby-sticky-av-btn     { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   Two-column layout — desktop (≥720px)
   Left:  .ls-rail / #s2-panel (play flow)   Right: #s2-sidebar (fixed, never shifts)
   Below: rules blurb + footer (full width)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  body.lobby-skin-2 #lobby-gated {
    display: grid;
    grid-template-columns: 1fr 260px;
    grid-template-areas:
      "rail  side"
      "blurb blurb"
      "foot  foot";
    column-gap: 1.75rem;
    align-items: stretch;
  }
  body.lobby-skin-2 .ls-rail           { grid-area: rail; }
  body.lobby-skin-2 #s2-panel          { grid-area: rail; }
  body.lobby-skin-2 #s2-sidebar {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: stretch;
    background: rgba(10,24,70,0.88);
    border: 1px solid rgba(26,127,232,0.22);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
  }
  body.lobby-skin-2 #s2-sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(200,148,74,0.55), transparent);
    pointer-events: none;
    z-index: 1;
  }
  body.lobby-skin-2 .lobby-rules-blurb { grid-area: blurb; }
  body.lobby-skin-2 .lobby-footer      { grid-area: foot; }

  /* Sidebar: util buttons become flat text-left rows */
  body.lobby-skin-2 .lv2-util-bar { flex-direction: column; gap: 0; border-top: 1px solid rgba(26,127,232,0.15); padding-top: 0; margin-top: 0; }
  body.lobby-skin-2 .lv2-util-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(26,127,232,0.08);
    border-radius: 0;
  }
  body.lobby-skin-2 .lv2-util-btn:last-child { border-bottom: none; }
  body.lobby-skin-2 .lv2-util-btn .material-symbols-rounded { font-size: 1rem; }

  /* Profile hero — flat top section of the unified sidebar card */
  body.lobby-skin-2 #s2-sidebar .s2-profile-hero:not(.hidden) {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(26,127,232,0.15);
    overflow: visible;
    padding: 0.85rem 1rem;
    gap: 0.65rem;
    margin-bottom: 0;
  }
  body.lobby-skin-2 #s2-sidebar .s2-profile-hero::before { display: none; }
  body.lobby-skin-2 #s2-sidebar .s2-profile-img { width: 44px; height: 44px; }

  /* Active sidebar button — visually connects to the open panel on the left */
  body.lobby-skin-2 .lv2-util-btn.s2-active,
  body.lobby-skin-2 .lobby-tab-btn.s2-active {
    background: rgba(26,127,232,0.13) !important;
    border-color: rgba(26,127,232,0.5) !important;
    color: rgba(255,255,255,0.95) !important;
    position: relative;
  }
  body.lobby-skin-2 .lv2-util-btn.s2-active::after,
  body.lobby-skin-2 .lobby-tab-btn.s2-active::after {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: rgba(26,127,232,0.75);
    border-radius: 0 2px 2px 0;
  }

  /* Sidebar: tabs wrap becomes a vertical list */
  body.lobby-skin-2 .lobby-tabs-wrap {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    gap: 0;
    margin-top: 0;
  }
  body.lobby-skin-2 .lobby-tab-btn {
    flex: none;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(26,127,232,0.1);
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
    padding: 0.75rem 1rem;
  }
  body.lobby-skin-2 .lobby-tab-btn:last-of-type { border-bottom: none; }
  body.lobby-skin-2 .lobby-tab-content {
    width: 100%;
  }
  /* Hide ach/egg panels inside sidebar on desktop — they load in main panel */
  body.lobby-skin-2 #s2-sidebar .lobby-tab-content { display: none !important; }

  /* Bot Wars banner — flat bottom section of the unified sidebar card */
  body.lobby-skin-2 #s2-sidebar .s2-bwars-banner {
    background: rgba(139,92,246,0.05);
    border: none;
    border-radius: 0;
    border-top: 1px solid rgba(139,92,246,0.18);
    margin-top: 0;
  }
  body.lobby-skin-2 #s2-sidebar .s2-bwars-banner::before {
    background: linear-gradient(90deg, transparent, rgba(167,139,250,0.45), transparent);
  }
}

/* Hover: sidebar flat rows (outside @media to keep specificity clean) */
@media (min-width: 720px) and (hover: hover) {
  body.lobby-skin-2 #s2-sidebar .lobby-tab-btn:not(.s2-active):hover,
  body.lobby-skin-2 #s2-sidebar .lv2-util-btn:not(.s2-active):hover {
    background: rgba(26,127,232,0.07);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile (<720px) — single column, full-width util bar
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 719px) {
  body.lobby-skin-2 #s2-sidebar {
    display: contents; /* transparent wrapper on mobile — children flow normally */
  }
  body.lobby-skin-2 .lv2-util-bar {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(26,127,232,0.15);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
  /* Tabs wrap: keep horizontal 2-up layout on mobile */
  body.lobby-skin-2 .lobby-tabs-wrap {
    background: transparent;
    border-color: rgba(26,127,232,0.15);
  }
  body.lobby-skin-2 .lobby-tab-btn {
    background: rgba(10,24,70,0.5);
    border-color: rgba(26,127,232,0.15);
    border-right: 1px solid rgba(26,127,232,0.15);
    border-bottom: 2px solid transparent;
  }
  body.lobby-skin-2 .lobby-tab-btn.active {
    background: rgba(200,148,74,0.07);
    border-color: rgba(200,148,74,0.35);
    border-bottom-color: rgba(200,148,74,0.5);
  }
  body.lobby-skin-2 .s2-bwars-banner { margin-top: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   S2 In-page content panel
   ═══════════════════════════════════════════════════════════════ */
body.lobby-skin-2 #s2-panel {
  display: none;
  flex-direction: column;
  background: rgba(10,24,70,0.65);
  border: 1px solid rgba(26,127,232,0.22);
  border-right: 2px solid rgba(26,127,232,0.35);
  border-radius: 18px;
  overflow: hidden;
  min-height: 300px;
  position: relative;
}
body.lobby-skin-2 #s2-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(26,127,232,0.5), transparent);
  pointer-events: none;
}
body.lobby-skin-2 .s2-panel-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(26,127,232,0.15);
  background: rgba(13,31,82,0.4);
  flex-shrink: 0;
}
body.lobby-skin-2 .s2-panel-back {
  background: rgba(26,127,232,0.08);
  border: 1px solid rgba(26,127,232,0.2);
  cursor: pointer;
  color: #7ba8d8;
  display: flex;
  align-items: center;
  padding: 0.3rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
body.lobby-skin-2 .s2-panel-back:hover {
  color: #fff;
  background: rgba(26,127,232,0.15);
  border-color: rgba(26,127,232,0.4);
}
body.lobby-skin-2 .s2-panel-back .material-symbols-rounded { font-size: 1.25rem; }
body.lobby-skin-2 .s2-panel-title {
  font-weight: 800;
  font-size: 1rem;
  color: #e8eef8;
  flex: 1;
  letter-spacing: -0.01em;
}
body.lobby-skin-2 .s2-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
/* Strip modal chrome — hide duplicate headers & close buttons */
body.s2-panel-active .s2-panel-body .lb-header,
body.s2-panel-active .s2-panel-body .profile-header,
body.s2-panel-active .s2-panel-body .modal-header { display: none !important; }

body.s2-panel-active .s2-panel-body .lb-close,
body.s2-panel-active .s2-panel-body .profile-close,
body.s2-panel-active .s2-panel-body .modal-close { display: none !important; }

/* Reset dialog containers to plain blocks — no modal sizing, no animation */
/* Strip profile-coach card chrome when embedded in s2 panel */
body.s2-panel-active .s2-panel-body .profile-coach {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.s2-panel-active .s2-panel-body .lb-dialog,
body.s2-panel-active .s2-panel-body .profile-dialog,
body.s2-panel-active .s2-panel-body .modal-dialog {
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  animation: none !important;
}

/* ── Add Chips in s2Panel — strip card chrome, relay in panel space ── */
body.lobby-skin-2 #s2-panel-body > .zc-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
  width: 100%;
  text-align: left;
  padding: 1.75rem;
  margin: 0;
}
body.lobby-skin-2 #s2-panel-body.s2-chips-view {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
body.lobby-skin-2 #s2-panel-body.s2-chips-view > .zc-card {
  /* Pin height to sidebar so flex chain works even with align-items:start grid */
  min-height: 380px;
  overflow: hidden;
  position: relative;
}
/* Keep icon visible when gif is active inside panel (original CSS hides it) */
body.lobby-skin-2 #s2-panel-body > .zc-card--gif .zc-icon { display: block !important; }
/* Hide redundant Close button — back arrow handles navigation */
body.lobby-skin-2 #s2-panel-body > .zc-card .zc-close-btn { display: none; }
body.lobby-skin-2 #s2-panel-body > .zc-card .zc-btn-row { justify-content: flex-end; }
/* Gif easter egg — cover the full card area */
body.lobby-skin-2 #s2-panel-body > .zc-card--gif .zc-bg-img,
body.lobby-skin-2 #s2-panel-body > .zc-card--gif::before { border-radius: 0; }
/* All content inside gif card must sit above the image overlay */
body.lobby-skin-2 #s2-panel-body > .zc-card--gif > *:not(.zc-bg-img) {
  position: relative;
  z-index: 2;
}
/* Header logo clickable in skin-2 */
body.lobby-skin-2 .lmh-logo { cursor: pointer; }

/* Reset inner scroll areas — panel body (the outer scroll body) handles scrolling */
body.s2-panel-active .s2-panel-body .lb-body,
body.s2-panel-active .s2-panel-body .profile-body,
body.s2-panel-active .s2-panel-body .modal-body {
  overflow-y: visible !important;
  max-height: none !important;
  flex: none !important;
  padding: 0 !important;
}

/* Hide the now-empty modal containers */
body.s2-panel-active #leaderboard-modal,
body.s2-panel-active #profile-modal,
body.s2-panel-active #htp-modal,
body.s2-panel-active #settings-modal { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   S2 Bot Wars Coming Soon banner
   ═══════════════════════════════════════════════════════════════ */
body.lobby-skin-2 .s2-bwars-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.22);
  border-radius: 12px;
  margin-top: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}
body.lobby-skin-2 .s2-bwars-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a78bfa, transparent);
}
body.lobby-skin-2 .s2-bwars-icon { font-size: 1.4rem; flex-shrink: 0; }
body.lobby-skin-2 .s2-bwars-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
body.lobby-skin-2 .s2-bwars-text strong {
  font-size: 0.85rem;
  color: #c4b5fd;
  font-weight: 700;
}
body.lobby-skin-2 .s2-bwars-text span {
  font-size: 0.73rem;
  color: rgba(196,181,253,0.6);
  margin-top: 0.1rem;
}
body.lobby-skin-2 .s2-bwars-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a78bfa;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.35);
  border-radius: 20px;
  padding: 0.15rem 0.55rem;
  flex-shrink: 0;
}
/* On mobile, bwars banner spacing handled by #s2-sidebar gap */

/* ═══════════════════════════════════════════════════════════════
   Step rail — transform from wizard timeline into clean cards
   ═══════════════════════════════════════════════════════════════ */
/* Rail is the single unified card */
body.lobby-skin-2 .ls-rail {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
  background: rgba(10,24,70,0.88);
  border: 1px solid rgba(26,127,232,0.22);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
body.lobby-skin-2 .ls-rail::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(26,127,232,0.5), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Lobby hero headline ─────────────────────────────────────── */
body.lobby-skin-2 .ls-hero {
  padding: 2.75rem 1.75rem 2.5rem;
  border-bottom: 1px solid rgba(200,148,74,0.12);
  margin-bottom: 0;
  position: relative;
  padding-right: 8.5rem; /* reserve space for the absolute play button */
}
body.lobby-skin-2 .ls-hero-text { display: block; }

/* ── Hero play button — absolute, vertically centered on the right ── */
body.lobby-skin-2 .ls-hero-play-btn {
  position: absolute;
  top: 50%;
  right: 1.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.035rem;
  font-weight: 700;
  padding: 0.63rem 1.3rem;
  background: linear-gradient(135deg, #d4a060 0%, #b87840 100%);
  color: #1a0d00;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(200,148,74,0.4);
  transition: filter 0.15s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
body.lobby-skin-2 .ls-hero-play-btn:hover { filter: brightness(1.1); }
@media (hover: hover) { body.lobby-skin-2 .ls-hero-play-btn:hover { transform: translateY(calc(-50% - 1px)); } }
body.lobby-skin-2 .ls-hero-play-btn:active { transform: translateY(-50%); filter: brightness(0.95); }
body.lobby-skin-2 .ls-hero-play-btn .material-symbols-rounded { font-size: 1.2rem; }
body.lobby-skin-2 .ls-hero-eyebrow {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.45rem;
}
body.lobby-skin-2 .ls-hero-headline {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.1;
  margin: 0 0 0.55rem;
}
body.lobby-skin-2 .ls-hero-headline em {
  font-style: normal;
  color: var(--gold-light);
}
body.lobby-skin-2 .ls-hero-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 440px;
  margin: 0;
}

/* Steps are flat sections inside the card — no individual borders or backgrounds */
body.lobby-skin-2 .ls {
  padding: 2rem 1.5rem !important;
  margin-bottom: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(26,127,232,0.1);
  position: relative;
  overflow: visible;
  opacity: 1;
}
body.lobby-skin-2 .ls::before { display: none; }
body.lobby-skin-2 .ls:last-child { border-bottom: none; }
body.lobby-skin-2 .ls + .ls { padding-top: 2rem !important; }

/* Step 3 — gold top divider to signal "this is the action" */
body.lobby-skin-2 .ls--step3 {
  border-top: 1px solid rgba(200,148,74,0.25);
  border-bottom: none;
  padding-bottom: 2.5rem !important;
}

/* Step 2 — when it's the last visible step (no more step3), match the bottom padding */
body.lobby-skin-2 .ls--step2:last-child { padding-bottom: 2.5rem !important; }

/* TABLE SIZE row — extra top gap to visually separate from speed picker above */
body.lobby-skin-2 .lv2-players-row { margin-top: 1.5rem; }

/* Avatar row — top margin when it follows TABLE SIZE inside step 2 */
body.lobby-skin-2 .ls--step2 .lv2-avatar-row { margin-top: 1.25rem; }

/* Step number — hidden in skin-2 */
body.lobby-skin-2 .ls-num { display: none; }

/* Step label — plain section headline */
body.lobby-skin-2 .ls-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1rem;
}
body.lobby-skin-2 .ls-label-icon {
  font-size: 1rem;
  opacity: 0.7;
  font-variation-settings: 'FILL' 1;
}

/* ═══════════════════════════════════════════════════════════════
   Mode tabs — enlarged opponent selector cards
   ═══════════════════════════════════════════════════════════════ */
body.lobby-skin-2 .lv2-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: transparent;
  border: none;
  padding: 0;
}
body.lobby-skin-2 .lv2-mode-tab {
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.15rem 0.85rem;
  height: auto;
  min-height: 88px;
  background: rgba(10,24,70,0.55);
  border: 1px solid rgba(26,127,232,0.18);
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}
body.lobby-skin-2 .lv2-mode-tab::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.18s;
}
body.lobby-skin-2 .lv2-mode-tab[data-mode="computer"]::before {
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
}
body.lobby-skin-2 .lv2-mode-tab[data-mode="friend"]::before {
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
body.lobby-skin-2 .lv2-mode-tab .material-symbols-rounded {
  font-size: 1.5rem;
  opacity: 0.5;
  transition: opacity 0.18s;
}
@media (hover: hover) {
  body.lobby-skin-2 .lv2-mode-tab:hover:not(.active) {
    background: rgba(13,31,82,0.7);
    border-color: rgba(26,127,232,0.35);
    color: rgba(255,255,255,0.75);
    transform: translateY(-1px);
  }
  body.lobby-skin-2 .lv2-mode-tab:hover:not(.active) .material-symbols-rounded { opacity: 0.75; }
  body.lobby-skin-2 .lv2-mode-tab:hover:not(.active)::before { opacity: 0.5; }
}
body.lobby-skin-2 .lv2-mode-tab[data-mode="computer"].active {
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.42);
  color: #7dd3fc;
  box-shadow: 0 4px 20px rgba(56,189,248,0.08);
}
body.lobby-skin-2 .lv2-mode-tab[data-mode="friend"].active {
  background: rgba(200,148,74,0.09);
  border-color: rgba(200,148,74,0.5);
  color: var(--gold-light);
  box-shadow: 0 4px 20px rgba(200,148,74,0.1);
}
body.lobby-skin-2 .lv2-mode-tab.active .material-symbols-rounded { opacity: 1; }
body.lobby-skin-2 .lv2-mode-tab.active::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   Speed strip — flat dark button chips
   ═══════════════════════════════════════════════════════════════ */
body.lobby-skin-2 .lv2-speed-btn {
  background: rgba(10,24,70,0.5);
  border-color: rgba(26,127,232,0.15);
  color: rgba(255,255,255,0.45);
  border-radius: 10px;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}
body.lobby-skin-2 .lv2-speed-btn.active {
  background: rgba(200,148,74,0.1);
  border-color: rgba(200,148,74,0.5);
  color: var(--gold-light);
  box-shadow: 0 2px 12px rgba(200,148,74,0.12);
}
@media (hover: hover) {
  body.lobby-skin-2 .lv2-speed-btn:hover:not(.active) {
    background: rgba(13,31,82,0.65);
    border-color: rgba(26,127,232,0.32);
    color: rgba(255,255,255,0.85);
    transform: translateY(-1px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Util bar base — color tokens (layout per breakpoint above)
   ═══════════════════════════════════════════════════════════════ */
body.lobby-skin-2 .lv2-util-btn {
  background: rgba(10,24,70,0.55);
  border-color: rgba(26,127,232,0.18);
  color: rgba(255,255,255,0.65);
  border-radius: 10px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
@media (hover: hover) {
  body.lobby-skin-2 .lv2-util-btn:hover {
    background: rgba(200,148,74,0.08);
    border-color: rgba(200,148,74,0.38);
    color: var(--text-primary);
  }
  body.lobby-skin-2 .lv2-util-btn:hover .material-symbols-rounded { color: var(--gold-light); }
}
body.lobby-skin-2 .lv2-util-btn .material-symbols-rounded { color: var(--gold-light); }

/* ═══════════════════════════════════════════════════════════════
   Tab buttons — colour tokens (layout per breakpoint above)
   ═══════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  body.lobby-skin-2 .lobby-tab-btn:hover {
    background: rgba(200,148,74,0.05);
    border-color: rgba(200,148,74,0.25);
  }
}
/* Desktop active state (mobile active handled in mobile block above) */
@media (min-width: 720px) {
  body.lobby-skin-2 .lobby-tab-btn {
    background: rgba(10,24,70,0.55);
    border-color: rgba(26,127,232,0.18);
    border-radius: 12px;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
  }
  body.lobby-skin-2 .lobby-tab-btn:hover:not(.active) {
    background: rgba(13,31,82,0.7);
    border-color: rgba(26,127,232,0.3);
    transform: translateY(-1px);
  }
  body.lobby-skin-2 .lobby-tab-btn.active {
    background: rgba(200,148,74,0.08);
    border-color: rgba(200,148,74,0.42);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Rules blurb + footer
   ═══════════════════════════════════════════════════════════════ */
body.lobby-skin-2 .lobby-rules-blurb {
  border-color: rgba(26,127,232,0.15);
  background: rgba(10,24,70,0.4);
}
body.lobby-skin-2 .lobby-footer { opacity: 0.3; }

/* ── Play / Join buttons — gold primary gradient ───────────────── */
body.lobby-skin-2 .join-returning-join,
body.lobby-skin-2 #btn-play-computer-acct,
body.lobby-skin-2 #btn-play-friend-acct,
body.lobby-skin-2 #btn-start-computer,
body.lobby-skin-2 #btn-start-friend {
  background: linear-gradient(135deg, var(--gold) 0%, #e8a040 100%) !important;
  color: #1a0e00 !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 2px 14px rgba(200,148,74,0.32) !important;
  border-radius: 10px !important;
  transition: box-shadow 0.18s, transform 0.18s !important;
}
body.lobby-skin-2 .join-returning-join:hover,
body.lobby-skin-2 #btn-play-computer-acct:hover,
body.lobby-skin-2 #btn-start-computer:hover,
body.lobby-skin-2 #btn-start-friend:hover {
  box-shadow: 0 4px 22px rgba(200,148,74,0.48) !important;
  transform: translateY(-1px) !important;
}

/* ── join-returning (player info row in step 3) ────────────────── */
body.lobby-skin-2 .join-returning {
  background: rgba(13,31,82,0.5) !important;
  border: 1px solid rgba(26,127,232,0.2) !important;
  border-radius: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   Join view — friend join flow (stays full-width, shows logo)
   ═══════════════════════════════════════════════════════════════ */
body.lobby-skin-2 #lobby-join-view { padding-top: 1rem; }
body.lobby-skin-2 #lobby-join-view .lobby-logo {
  display: block;
  text-align: center;
  border: none;
  padding-bottom: 0;
}
body.lobby-skin-2 #lobby-join-view .lobby-logo h1    { display: block; }
body.lobby-skin-2 #lobby-join-view .lobby-logo-suits { display: inline-block; }

/* ── Ante toggle ────────────────────────────────────────────── */
.toggle-pair {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.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 rgba(255,255,255,0.1);
  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: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.settings-toggle-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.settings-toggle-check {
  flex-shrink: 0;
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}
.settings-toggle-text {
  font-size: 0.9rem;
  color: var(--text-primary, #e8e8e8);
  cursor: pointer;
  align-self: end;
}
.settings-toggle-row .settings-toggle-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  align-self: start;
}

/* 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: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-thumb {
  position: absolute;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3a5a90;
  transition: left 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--accent-bg);
  border-color: var(--accent-border);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  left: 20px;
  background: var(--accent);
}

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

.blind-level-timer {
  color: rgba(255,255,255,0.42);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  min-width: 3.6em;      /* wide enough for "10:00" without layout shift */
  text-align: center;
}

/* ── Level-up flash — applied to header badges on mobile when blinds increase ── */
@keyframes levelUpFlash {
  0%   { background: #f5c842; border-color: #c9962a; color: #1c1800; }
  55%  { background: #f5c842; border-color: #c9962a; color: #1c1800; }
  100% { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.42); }
}
.level-up-flash {
  animation: levelUpFlash 2.5s ease-in forwards;
}

/* ═══════════════════════════════════════════════════════════════
   Shared modal overlay + dialog
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  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: var(--bg-card);
  border: 1px solid rgba(26,127,232,0.25);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(26,127,232,0.07) inset,
    0 24px 64px rgba(0,0,0,0.75);
  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 rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.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: rgba(255,255,255,0.08); color: var(--text-primary); }
.modal-body {
  overflow-y: auto;
  padding: 1.25rem;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #2a50a8 transparent;
}
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.modal-body::-webkit-scrollbar-thumb { background: #2a50a8; border-radius: 10px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #3a6acc; }
.modal-footer {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  border-radius: 0 0 14px 14px;
}

/* Locked avatars — blurred/dimmed until magic word is entered */
.avatar-btn.avatar-locked {
  display: none;
  cursor: default;
  position: relative;
}
.avatar-btn.avatar-locked.unlocked {
  display: inline-flex;
  cursor: pointer;
}
.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 .avatar-img {
  opacity: 1;
  filter: none;
}
.avatar-btn.avatar-locked.unlocked .avatar-lock-overlay {
  display: none;
}

/* ── Premium Avatars section ─────────────────────────────────── */
.premium-avatars-section {
  border: 1px solid rgba(101,130,162,0.22);
  border-radius: 10px;
  padding: 0.9rem 1rem 1rem;
  background: linear-gradient(135deg, rgba(101,130,162,0.04) 0%, rgba(0,0,0,0) 60%);
}
.premium-avatars-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.5rem;
}
.premium-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.5;
}
/* 1BB label sits centered between the label underline and the teaser grid */
.premium-bb-label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.45rem 0 0.55rem;
}
.premium-bb-pill {
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.5;
}

/* Teaser thumbnails — visible but locked, 8 across */
.premium-avatar-teaser {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 0.85rem;
}
.premium-avatar-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.07);
  cursor: default;
}
.premium-avatar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.25s ease, transform 0.25s ease;
  filter: brightness(0.8) saturate(0.85);
}
.premium-avatar-thumb:hover img {
  filter: brightness(0.35) saturate(0.4);
  transform: scale(1.04);
}
/* Corner lock badge — always visible */
.premium-thumb-lock {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  background: rgba(0,0,0,0.65);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border: 1px solid rgba(255,255,255,0.12);
}
.premium-thumb-lock .material-symbols-rounded {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}
/* On hover show centered lock overlay */
.premium-avatar-thumb::after {
  content: 'lock';
  font-family: 'Material Symbols Rounded';
  font-size: 1.4rem;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.9));
}
.premium-avatar-thumb:hover::after {
  opacity: 1;
}
.premium-avatar-thumb:hover .premium-thumb-lock {
  opacity: 0;
}

/* CTA area */
.premium-cta { display: flex; flex-direction: column; gap: 0.55rem; }
.premium-cta-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.premium-cta-text strong { color: var(--accent); }
.premium-dm-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.premium-dm-link:hover { color: var(--text-primary); text-decoration: underline; }

.premium-code-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.premium-code-hint:empty {
  display: none;
}
.premium-code-input {
  flex: 1;
  font-size: 0.82rem;
  padding: 0.42rem 0.75rem;
  letter-spacing: 0.3px;
}
.btn-premium-unlock {
  padding: 0.42rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.btn-premium-unlock:hover  { filter: brightness(1.12); }
.btn-premium-unlock:active { transform: scale(0.97); }
.btn-premium-unlock:disabled { opacity: 0.55; cursor: default; filter: none; }

.premium-code-hint {
  font-size: 0.76rem;
  min-height: 1.1em;
  transition: color 0.2s;
}



/* ── Egg info panel ──────────────────────────────────────────── */
/* When inside .lobby-tabs-wrap, layout comes from .lobby-tab-content; reset box styles */
.lobby-tabs-wrap .egg-info-panel {
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 1.2rem;
}
/* Standalone usage (outside tabs-wrap) keeps original look */
.egg-info-panel {
  padding: 0.6rem 0.75rem 0.7rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
}
.lobby-tabs-wrap .lobby-tab-content .premium-code-row {
  margin-top: 0.6rem;
  margin-bottom: 0.65rem;
}
.egg-info-intro {
  color: var(--text-muted);
  font-size: 0.74rem;
  margin: 0 0 0.55rem;
  line-height: 1.45;
}
.egg-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.egg-info-group-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.1rem 0 0.25rem;
  opacity: 0.7;
}
.egg-info-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0.3rem;
  border-radius: 5px;
}
/* Clickable toggle items */
.egg-info-item--toggle {
  cursor: pointer;
  transition: background 0.15s;
  touch-action: manipulation; /* eliminates 300ms tap delay on iOS */
  -webkit-tap-highlight-color: transparent;
}
.egg-info-item--toggle:hover {
  background: rgba(255,255,255,0.05);
}
.egg-info-icon {
  font-size: 0.95rem;
  width: 1.3rem;
  text-align: center;
  flex-shrink: 0;
}
.egg-info-text {
  flex: 1;
  min-width: 0;
}
.egg-info-name {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.egg-info-hint {
  display: block;
  font-size: 0.69rem;
  color: var(--text-muted);
  line-height: 1.3;
}
/* Lock icon for avatar unlock items */
.egg-info-status {
  font-size: 0.85rem;
  flex-shrink: 0;
  color: rgba(255,255,255,0.2);
  transition: color 0.2s;
}
.egg-info-item.egg-unlocked .egg-info-status {
  color: var(--gold-light, #fcd34d);
}
.egg-info-item.egg-unlocked .egg-info-name {
  color: var(--gold-light, #fcd34d);
}
/* Toggle pill for game mode items */
.egg-info-toggle-pill {
  flex-shrink: 0;
  width: 2rem;
  height: 1.1rem;
  border-radius: 0.6rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.egg-info-toggle-pill::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.15rem;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: transform 0.2s, background 0.2s;
}
.egg-info-item--toggle.egg-active .egg-info-toggle-pill {
  background: var(--gold, #c8944a);
  border-color: var(--gold-light, #fcd34d);
}
.egg-info-item--toggle.egg-active .egg-info-toggle-pill::after {
  transform: translateY(-50%) translateX(0.85rem);
  background: #fff;
}
.egg-info-item--toggle.egg-active .egg-info-name {
  color: var(--gold-light, #fcd34d);
}

@media (max-width: 768px) {
  /* Hide advanced/obscure game modes on mobile to keep the list tidy */
  .egg-info-item[data-egg-session="costanza_godmode_armed"],
  .egg-info-item[data-egg-session="costanza_penny"],
  .egg-info-item[data-egg-session="costanza_fulltilt"],
  .egg-info-item[data-egg-session="costanza_finaltable"],
  .egg-info-item[data-egg-session="costanza_ante"],
  .egg-info-item[data-egg-session="costanza_retro"] { display: none; }
}
@media (min-width: 769px) {
  .egg-info-name { font-size: 0.86rem; }
  .egg-info-hint { font-size: 0.77rem; }
  .egg-info-icon { font-size: 1.05rem; }
}

/* Unlocked premium avatar picker — matches the standard picker layout */
#premium-unlocked-view .avatar-picker {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding-top: 0.1rem;
}

/* ── How to Play ─────────────────────────────────────────────── */
.htp-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  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(--accent);
  border-bottom-color: var(--accent);
}
.htp-body { font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); }
.htp-tagline {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--accent);
  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(--text-primary);
  margin: 0 0 0.65rem;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent-border);
}
.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 rgba(255,255,255,0.09);
}
.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: var(--accent);
  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 hero: avatar + name + View Profile button */
.settings-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.settings-hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(24,114,212,0.45);
  background: var(--bg-dark);
}
.settings-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.settings-hero-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-hero-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.settings-hero-links-sep {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.2);
}
.settings-hero-profile-btn,
.settings-hero-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: normal;
  color: rgba(255,255,255,0.4);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.settings-hero-profile-btn:hover,
.settings-hero-edit-btn:hover { color: rgba(255,255,255,0.75); }
.settings-hero-profile-btn .material-symbols-rounded { font-size: 0.9rem; line-height: 1; }

/* Degen Mode unlocked toggle row — purple tint to match the badge */
.degen-mode-section { margin-top: -0.25rem; margin-bottom: -0.25rem; }
.degen-toggle-row {
  background: rgba(167,139,250,0.06) !important;
  border-color: rgba(167,139,250,0.22) !important;
}
.degen-toggle-row .settings-toggle-text {
  color: rgba(196,180,252,0.92);
}
.degen-toggle-row .settings-toggle-check {
  accent-color: #a78bfa;
}

/* ── Team Allegiance picker (settings) ────────────────── */
.settings-section-team { margin-top: -0.1rem; }
.settings-label-optional {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.2rem;
}
.team-picker {
  display: flex;
  gap: 0.55rem;
}
.team-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.team-btn-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.team-btn-text { display: flex; flex-direction: column; gap: 0.06rem; }
.team-btn-text strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.team-btn-text span {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.2;
}
.team-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.2);
}
/* Hero — gold */
.team-btn--hero.selected {
  background: rgba(200,148,74,0.14);
  border-color: rgba(200,148,74,0.65);
  box-shadow: 0 0 0 1px rgba(200,148,74,0.25);
}
.team-btn--hero.selected .team-btn-text strong { color: var(--gold-light); }
.team-btn--hero.selected .team-btn-text span   { color: rgba(200,148,74,0.75); }
/* Misfit — red/crimson */
.team-btn--misfit.selected {
  background: rgba(220,38,38,0.12);
  border-color: rgba(220,38,38,0.55);
  box-shadow: 0 0 0 1px rgba(220,38,38,0.2);
}
.team-btn--misfit.selected .team-btn-text strong { color: #fca5a5; }
.team-btn--misfit.selected .team-btn-text span   { color: rgba(252,165,165,0.65); }

/* Top bar: Name (grows) + Show chips as + Bot — all in one line */
.settings-row-top-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem 1rem;
  align-items: end;
}
.settings-section-name { min-width: 0; }
.settings-name-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.settings-name-row .settings-input { flex: 1; min-width: 0; }
.save-name-btn {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(200,148,74,0.5);
  background: var(--gold);
  color: #111;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.save-name-btn:hover:not(:disabled) { filter: brightness(1.1); }
.save-name-btn:disabled { opacity: 0.55; cursor: default; }
/* Bot toggle: same pill container as chip-seg — fills its column */
.chip-seg-bot {
  width: 100%;
}

.settings-row-2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.settings-row-2.settings-row-top {
  align-items: end;
}
.settings-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}
/* Vertically center the content of a settings-section */
.settings-section-vcenter {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.settings-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(26,127,232,0.22);
}
.settings-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid rgba(255,255,255,0.1);
  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(--accent-border); }
.settings-input--locked {
  opacity: 0.55;
  cursor: default;
  border-color: rgba(255,255,255,0.06);
}
.settings-input--locked:focus { border-color: rgba(255,255,255,0.06); }
.settings-name-lock-note {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
}
.settings-input--name-error {
  border-color: #f87171 !important;
}
.settings-name-error {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #f87171;
}

/* ── Account switcher ─────────────────────────────────────────── */
.settings-accounts-section {
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.settings-accounts-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.settings-accounts-max {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.6;
  text-transform: none;
  letter-spacing: 0;
}
.settings-account-tiles {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}
.acct-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 64px;
}
.acct-tile:hover:not(.acct-tile--active) {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
}
.acct-tile--active {
  border-color: var(--gold, #e3aa42);
  background: rgba(227,170,66,0.08);
  cursor: default;
}
.acct-tile--add {
  border-style: dashed;
  border-color: rgba(255,255,255,0.14);
}
.acct-tile--add:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.04);
}
.acct-tile-avatar {
  position: relative;
  width: 34px;
  height: 34px;
}
.acct-tile-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.acct-tile-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  background: var(--gold, #e3aa42);
  color: #0a0f1a;
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.acct-tile-add-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1.5px dashed rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 300;
  color: rgba(255,255,255,0.28);
  line-height: 1;
}
.acct-tile-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary, #8b949e);
  text-align: center;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-tile--active .acct-tile-name {
  color: var(--gold-light, #f5c86a);
}

/* New account setup form (inline, below account tiles) */
.new-acct-setup {
  margin-top: 0.75rem;
  padding: 0.75rem 0.7rem 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.na-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.na-avatar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.na-avatar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.na-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  image-rendering: high-quality;
}
.na-avatar-btn--sel {
  border-color: var(--gold-light, #f5c86a);
  box-shadow: 0 0 0 2px rgba(245,200,106,0.35);
}
.na-name-row {
  display: flex;
}
.na-name-input {
  flex: 1;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  padding: 0.45rem 0.65rem;
  outline: none;
  min-width: 0;
}
.na-name-input:focus {
  border-color: rgba(255,255,255,0.4);
}
.na-name-input.na-name-error {
  border-color: #e05555;
  box-shadow: 0 0 0 2px rgba(224,85,85,0.25);
}
.na-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.na-desktop-notice {
  display: none;
  text-align: center;
  font-size: 0.75rem;
  color: var(--gold-light, #f5c86a);
  margin-top: 0.4rem;
}
.na-desktop-notice .material-symbols-rounded {
  font-size: 0.95rem;
  vertical-align: -0.15em;
}
@media (max-width: 1023px) {
  .na-desktop-notice { display: block; }
}
.na-cancel-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.55);
  border-radius: 7px;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.na-cancel-btn:hover { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); }
.na-create-btn {
  background: var(--gold-light, #f5c86a);
  border: none;
  color: #1a1200;
  border-radius: 7px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.na-create-btn:hover { background: #ffd980; }

/* ── First-run account setup overlay ─────────────────────────────────────── */
.fro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(8, 18, 45, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: froFadeIn 0.3s ease both;
}
.fro-overlay--out {
  animation: froFadeOut 0.25s ease both;
}
@keyframes froFadeIn  { from { opacity: 0; } to   { opacity: 1; } }
@keyframes froFadeOut { from { opacity: 1; } to   { opacity: 0; } }
.fro-card {
  background: linear-gradient(160deg, #0e2060, #091840);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 2rem 1.75rem 1.5rem;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  animation: froSlideUp 0.3s ease both;
}
@keyframes froSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.fro-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
}
.fro-subtitle {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-top: -0.5rem;
}
.fro-avatar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.fro-avatar-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, transform 0.12s;
}
.fro-avatar-btn:hover { transform: scale(1.08); }
.fro-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.fro-avatar-btn--sel {
  border-color: var(--gold-light, #f5c86a);
  box-shadow: 0 0 0 3px rgba(245,200,106,0.3);
  transform: scale(1.1);
}
/* ── Avatar carousel (first-run & new account setup) ─────────── */
.av-paged { display: flex; flex-direction: column; gap: 0.6rem; }
.av-page-row { display: flex; gap: 8px; justify-content: center; }
.av-page-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, transform 0.12s;
}
.av-page-btn:hover { transform: scale(1.08); }
.av-page-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.av-page-btn--sel {
  border-color: var(--gold-light, #f5c86a);
  box-shadow: 0 0 0 3px rgba(245,200,106,0.3);
  transform: scale(1.1);
}
.av-page-nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.av-pg-dots { font-size: 0.72rem; color: rgba(255,255,255,0.4); min-width: 4em; text-align: center; }
.av-pg-arrow {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}
.av-pg-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
.av-pg-arrow:disabled { opacity: 0.3; cursor: default; }
.fro-name-row {
  display: flex;
}
.fro-name-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  outline: none;
  min-width: 0;
  text-align: center;
}
.fro-name-input:focus { border-color: rgba(255,255,255,0.45); }
.fro-name-input.na-name-error { border-color: #e05555; box-shadow: 0 0 0 2px rgba(224,85,85,0.25); }
.fro-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: stretch;
}
.fro-skip-btn {
  flex: 1;
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45);
  border-radius: 9px;
  padding: 0.55rem 0.5rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.fro-skip-btn:hover { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.35); }
.fro-create-btn {
  flex: 2;
  background: var(--gold-light, #f5c86a);
  border: none;
  color: #1a1200;
  border-radius: 9px;
  padding: 0.55rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.fro-create-btn:hover { background: #ffd980; }

/* Poker Coach section inside Profile modal */
.profile-coach {
  margin: 0.35rem 0 0;
  padding: 0.8rem 0.9rem 0.6rem;
  background: rgba(200,148,74,0.06);
  border: 1px solid rgba(200,148,74,0.18);
  border-radius: 10px;
}
.coach-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid rgba(200,148,74,0.15);
  cursor: pointer;
  user-select: none;
}
.coach-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(200,148,74,0.45);
  flex-shrink: 0;
}
.coach-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
}
.coach-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(200,148,74,0.9);
  letter-spacing: 0.01em;
}
.coach-title {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.coach-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}
.coach-tab {
  flex: 1;
  padding: 0.28rem 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-align: center;
  white-space: nowrap;
}
.coach-tab:hover {
  background: rgba(200,148,74,0.1);
  color: rgba(200,148,74,0.85);
  border-color: rgba(200,148,74,0.25);
}
.coach-tab.is-active {
  background: rgba(200,148,74,0.15);
  color: rgba(200,148,74,0.95);
  border-color: rgba(200,148,74,0.4);
}
.coach-tab.is-locked { opacity: 0.5; }
.coach-tab-lock { font-size: 0.6rem; }
@media (max-width: 768px) {
  /* Hide locked/premium coach tabs (Hand Reviews, Dashboard) on mobile */
  .coach-tab:nth-child(2),
  .coach-tab:nth-child(3) { display: none; }
}
/* Notification badge */
.coach-notif-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #ef4444;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(239,68,68,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  padding: 0 4px;
  line-height: 18px;
}
/* Collapse chevron */
.coach-collapse-icon {
  font-size: 0.65rem;
  color: rgba(200,148,74,0.55);
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s;
}
.coach-header:hover .coach-collapse-icon {
  color: rgba(200,148,74,0.9);
}
/* Remove separator border when collapsed */
.coach-collapsed .coach-header {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.coach-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Teaser (locked tab) — blurred sample + overlay */
.coach-teaser-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 120px;
}
.coach-teaser-sample {
  filter: blur(2.5px);
  opacity: 0.38;
  pointer-events: none;
}
.coach-teaser-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(1px);
  text-align: center;
  padding: 0.75rem;
  border-radius: 8px;
}
.coach-teaser-lock { font-size: 1.4rem; line-height: 1; }
.coach-teaser-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.coach-teaser-msg {
  font-size: 0.74rem;
  color: var(--text-secondary);
}
.coach-teaser-msg strong { color: rgba(200,148,74,0.9); }
.coach-teaser-prog {
  width: 100%;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  margin-top: 0.1rem;
}
.coach-teaser-bar {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.coach-teaser-fill {
  height: 100%;
  background: rgba(200,148,74,0.6);
  border-radius: 3px;
}
.coach-teaser-count {
  font-size: 0.63rem;
  color: var(--text-muted);
}
/* Mini playing cards */
.mini-card {
  display: inline-flex;
  align-items: baseline;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.08rem 0.22rem;
  border-radius: 3px;
  line-height: 1.2;
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.12);
  letter-spacing: -0.01em;
}
.mini-card--rd { color: #e05050; }
.mini-card--bk { color: #d4d4d4; }
.mini-card--hidden { color: rgba(255,255,255,0.25); }
.mini-card-suit { font-size: 0.85em; }
/* Hand review cards */
.coach-body-inner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 0.15rem;
}
.coach-review-card {
  padding: 0.45rem 0.55rem;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-shrink: 0;
}
.coach-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.coach-review-header-left {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.coach-review-header-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.coach-review-pot-badge {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #c8944a;
  background: rgba(200,148,74,0.13);
  border: 1px solid rgba(200,148,74,0.3);
  border-radius: 3px;
  padding: 0.05rem 0.28rem;
  white-space: nowrap;
}
.coach-review-pot {
  font-size: 0.65rem;
  color: #c8944a;
  font-weight: 600;
  white-space: nowrap;
}
.coach-review-age {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
}
.coach-review-won  { color: #5cb85c; font-weight: 700; }
.coach-review-lost { color: #d9534f; font-weight: 700; }
.coach-review-cards {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.coach-review-note {
  font-size: 0.71rem;
  color: var(--text-secondary);
  line-height: 1.45;
  padding-top: 0.05rem;
}
.coach-review-note::before { content: '\1F4AC\00A0'; font-size: 0.68rem; }
/* Dashboard */
.coach-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* IQ block */
.coach-dash-iq {
  background: rgba(200,148,74,0.07);
  border: 1px solid rgba(200,148,74,0.2);
  border-radius: 7px;
  padding: 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.coach-dash-iq-label {
  font-size: 0.72rem;
  color: rgba(200,148,74,0.9);
  font-weight: 700;
}
.coach-dash-iq-sub {
  font-size: 0.59rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.coach-dash-iq-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.22rem;
  min-width: 50px;
}
.coach-dash-iq-score {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(200,148,74,0.95);
}
.coach-dash-iq-bar {
  width: 50px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.coach-dash-iq-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(200,148,74,0.5), rgba(200,148,74,1));
  border-radius: 2px;
}
/* Insight rows */
.coach-dash-insight {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.45rem 0.55rem;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.coach-dash-style {
  border-color: rgba(200,148,74,0.15);
  background: rgba(200,148,74,0.04);
}
.coach-dash-insight-icon {
  font-size: 1.05rem;
  line-height: 1.3;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.coach-dash-insight-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.18rem;
  letter-spacing: 0.01em;
}
.coach-dash-insight-text {
  font-size: 0.71rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
/* Next milestone bar */
.coach-dash-milestone {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.45rem 0.55rem;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.coach-dash-milestone-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-secondary);
}
.coach-loading {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  padding: 1.2rem 0;
}
.coach-tip {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.4rem 0.3rem;
  border-radius: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.coach-tip:last-child { border-bottom: none; }
.coach-tip-icon {
  font-size: 1.05rem;
  line-height: 1.3;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.coach-tip-text {
  font-size: 0.77rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Account switcher inside Profile modal */
.profile-accounts-section {
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.profile-accounts-details {
  outline: none;
}
.profile-accounts-summary {
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  list-style: none;
  user-select: none;
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.profile-accounts-summary::-webkit-details-marker { display: none; }
.profile-accounts-summary::before {
  content: '▶';
  font-size: 0.55rem;
  transition: transform 0.15s;
  display: inline-block;
}
.profile-accounts-details[open] .profile-accounts-summary::before {
  transform: rotate(90deg);
}
.profile-accounts-details[open] .settings-account-tiles {
  margin-top: 0.65rem;
}

/* Twitter handle input */
.twitter-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.twitter-input-wrap:focus-within { border-color: var(--accent-border); }
.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: grid !important;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.avatar-btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: none;
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s;
}
.avatar-btn:hover    { border-color: var(--accent); outline: 1.5px solid var(--accent); transform: translate3d(0, -1px, 0); }
.avatar-btn.selected { border-color: var(--accent); outline: 1.5px solid var(--accent); }
.avatar-btn span     { display: none; }

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  background-color: var(--bg-dark);
  border: none;
  display: block;
  overflow: hidden;
  image-rendering: high-quality;
  -webkit-optimize-contrast: high-quality; /* Safari <15.1 */
}
.avatar-btn.selected .avatar-img { border-color: transparent; }

/* ── 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;
  margin-bottom: 0.5rem;
}

/* ── 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 rgba(255,255,255,0.1);
  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;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.opponent-btn:hover  { border-color: var(--accent-border); color: var(--accent); background: var(--accent-bg); }
.opponent-btn.active { border-color: var(--accent-border); color: var(--accent); background: rgba(101,130,162,0.1); box-shadow: 0 0 10px rgba(101,130,162,0.12); }
.opponent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background-color: var(--bg-dark);
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.1);
}
.opponent-btn.active .opponent-avatar { border-color: var(--accent); }
.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(101,130,162,0.7); }

.deck-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.deck-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: var(--bg-input);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 5px;
  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: var(--accent-border); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.deck-btn.selected { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }

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

.bot-speed-btn,
.bot-skill-btn,
.bot-difficulty-btn,
.chip-display-btn {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  background: var(--bg-input);
  border: 1.5px solid rgba(255,255,255,0.1);
  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;
  line-height: 1.2;
  white-space: nowrap;
}
@media (hover: hover) {
  .bot-speed-btn:hover,
  .bot-skill-btn:hover,
  .bot-difficulty-btn:hover,
  .chip-display-btn:hover {
    border-color: var(--accent-border);
    background: var(--accent-bg);
  }
}
.bot-speed-btn.selected,
.bot-skill-btn.selected,
.bot-difficulty-btn.selected,
.chip-display-btn.selected {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}
.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;
}

/* ── Chip display segmented toggle ($ / BB) ─────────────── */
.chip-seg-toggle {
  display: flex;
  height: 39px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: var(--bg-input);
  gap: 3px;
  padding: 3px;
  box-sizing: border-box;
}
.chip-seg-btn {
  flex: 1;
  border: 1.5px solid transparent;
  background: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 14px;
  border-radius: 5px;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.chip-seg-btn.selected {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}
@media (hover: hover) {
  .chip-seg-btn:not(.selected):hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
  }
}

.deck-preview {
  width: 32px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.1);
  position: relative;
}
.deck-preview::after { display: none; }
.deck-blue  { background: linear-gradient(160deg, #1a3a7a 0%, #0d1f4a 100%); }
.deck-red   { background: linear-gradient(160deg, #7a2419 0%, #4e1008 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, #7a2419 0%, #4e1008 100%) !important; }
body[data-deck="green"] .card.back { background: linear-gradient(160deg, #0e4a1e 0%, #082c10 100%) !important; }

/* ── Table felt color theming ─────────────────────────────── */
/* :root is now blue-navy. 'blue' = no override (uses :root). 'green'/'red' = explicit. */
body[data-table-color="green"] {
  --felt-primary:   #1a4726;
  --felt-secondary: #123318;
  --felt-mid:       #215830;
  --felt-hi:        #2a6e3c;
}
body[data-table-color="red"] {
  --felt-primary:   #4a1515;
  --felt-secondary: #3a0e0e;
  --felt-mid:       #5a1c1c;
  --felt-hi:        #6e2424;
}
/* Blue felt = :root values — listed explicitly so settings overrides are unambiguous */
body[data-table-color="blue"] {
  --felt-primary:   #1c3870;
  --felt-secondary: #142d5c;
  --felt-mid:       #243f84;
  --felt-hi:        #2e4e9a;
}

/* ── Table color swatch picker ───────────────────────────── */
.table-color-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.table-color-btn,
.bg-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: var(--bg-input);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 5px;
  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,
.bg-theme-btn:hover    { border-color: var(--accent-border); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.table-color-btn.selected,
.bg-theme-btn.selected { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.table-color-swatch {
  width: 32px;
  height: 20px;
  border-radius: 4px;
  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%); }

/* Background theme picker */
.bg-theme-picker { display: flex; gap: 6px; flex-wrap: wrap; }

/* Background theme swatches */
.bg-theme-black   { background: linear-gradient(135deg, #2c2f36 0%, #111113 100%); }
.bg-theme-red     { background: linear-gradient(135deg, #561a1a 0%, #2e0e0e 100%); }
.bg-theme-green   { background: linear-gradient(135deg, #1c4a30 0%, #102614 100%); }
.bg-theme-blue    { background: linear-gradient(135deg, #1e3a82 0%, #0a1535 100%); }
.bg-theme-fulltilt    { background: url('avatars/tilt.jpg') center/cover; }
.bg-theme-finaltable  { background: url('avatars/finaltable.jpg') center/cover; }

/* ══ Test Mode panel ═══════════════════════════════════════════════════════
   Remove this block along with hand-test.js and api/hand-test.php to fully
   strip the feature.
   ══════════════════════════════════════════════════════════════════════ */
.px-hidden { display: none !important; }

.px-panel {
  background: linear-gradient(160deg, rgba(20,10,35,0.97) 0%, rgba(12,6,22,0.97) 100%);
  border-top: 1px solid rgba(167,139,250,0.35);
  border-bottom: none;
  padding: 5px 14px 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  font-size: 0.72rem;
  flex-shrink: 0;
  /* Full-width bar pinned to bottom of .bottom-zone */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  min-width: 0;
}
.px-header {
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a78bfa;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-right: 10px;
  border-right: 1px solid rgba(167,139,250,0.2);
  margin-right: 6px;
}
.px-header-title {
  flex: 1;
}
.px-btn-close {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.62rem;
  padding: 1px 6px;
  opacity: 0.7;
}
.px-btn-close:hover { opacity: 1; }
.px-section { display: flex; flex-direction: column; gap: 3px; }
.px-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(167,139,250,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.px-peek-row,
.px-force-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.px-btn {
  background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.3);
  color: #c4b5fd;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.px-btn:hover:not(:disabled) { background: rgba(167,139,250,0.22); border-color: rgba(167,139,250,0.55); }
.px-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.px-btn-dim { color: rgba(167,139,250,0.5); }
.px-info {
  font-size: 0.68rem;
  color: #a78bfa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.px-btn-win { background: rgba(180,130,0,0.18); border-color: rgba(250,200,60,0.4); color: #fcd34d; }
.px-btn-win:hover:not(:disabled) { background: rgba(180,130,0,0.32); border-color: rgba(250,200,60,0.7); color: #fde68a; }
.px-btn-split { background: rgba(0,140,120,0.18); border-color: rgba(52,211,153,0.4); color: #6ee7b7; }
.px-btn-split:hover:not(:disabled) { background: rgba(0,140,120,0.32); border-color: rgba(52,211,153,0.7); color: #a7f3d0; }
.px-btn-river { background: rgba(30,80,160,0.22); border-color: rgba(96,165,250,0.45); color: #7dd3fc; }
.px-btn-river:hover:not(:disabled) { background: rgba(30,80,160,0.38); border-color: rgba(96,165,250,0.75); color: #bae6fd; }
.px-input {
  width: 52px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(167,139,250,0.3);
  color: #e2d9ff;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.px-input:focus { outline: none; border-color: rgba(167,139,250,0.7); }
.px-select {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(167,139,250,0.3);
  color: #c4b5fd;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}
.px-peek-cards {
  display: flex;
  gap: 4px;
  align-items: center;
}
.px-flipper {
  position: relative;
  width: 28px;
  height: 40px;
  perspective: 200px;
  flex-shrink: 0;
}
.px-card-back,
.px-card-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px;
  transition: transform 0.28s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 1px 2px 5px rgba(0,0,0,0.4);
}
.px-card-back {
  background: linear-gradient(150deg, #7a2419 0%, #4e1008 100%); /* default: red */
  transform: rotateY(0deg);
}
body[data-deck="red"]   .px-card-back { background: linear-gradient(135deg, #7a2419 0%, #4e1008 100%); }
body[data-deck="green"] .px-card-back { background: linear-gradient(135deg, #0e4a1e 0%, #082c10 100%); }
.px-card-back::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.06) 0,
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.06) 0,
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 5px
    );
}
.px-card-front {
  background: linear-gradient(160deg, #fefcf7 0%, #f5f0e8 100%);
  transform: rotateY(180deg);
  font-weight: 900;
}
.px-flipper.px-flipped .px-card-back  { transform: rotateY(-180deg); }
.px-flipper.px-flipped .px-card-front { transform: rotateY(0deg); }
.px-card {
  width: 28px;
  height: 40px;
  background: linear-gradient(160deg, #fefcf7 0%, #f5f0e8 100%);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 1px 2px 5px rgba(0,0,0,0.4);
  position: relative;
  flex-shrink: 0;
  font-weight: 900;
}
.px-card-red   { color: #c0392b; }
.px-card-black { color: #1a1a2e; }
.px-card-rank {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}
.px-card-suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  line-height: 1;
}
.px-status {
  font-size: 0.62rem;
  color: rgba(167,139,250,0.65);
  min-height: 12px;
  font-style: italic;
}
/* ── /Test Mode panel ═══════════════════════════════════════════════════ */

/* ── Test Mode — horizontal skills bar (spans empty space right of log) ── */
.px-skills-bar {
  position: absolute;
  top: 0;
  left: 220px;  /* matches .bottom-zone-log width */
  right: 0;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: rgba(20,10,35,0.72);
  border-bottom: 1px solid rgba(167,139,250,0.18);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.px-bar-label {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(167,139,250,0.45);
  flex-shrink: 0;
  margin-right: 2px;
}
.px-bar-pill {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.px-bar-pill-on {
  background: rgba(52,211,153,0.12);
  border: 1px solid rgba(52,211,153,0.3);
  color: #6ee7b7;
}
.px-bar-pill-off {
  background: transparent;
  border: 1px solid rgba(167,139,250,0.12);
  color: rgba(167,139,250,0.3);
}
/* Shark and tilt get their own pill colours when active */
.px-bar-pill.px-skill-shark {
  background: rgba(251,146,60,0.15);
  border-color: rgba(251,146,60,0.4);
  color: #fb923c;
}
.px-bar-pill.px-skill-tilt {
  background: rgba(248,113,113,0.13);
  border-color: rgba(239,68,68,0.35);
  color: #f87171;
}
/* Push bottom-zone-main content down by the skills bar height when bar is present */
.bottom-zone:has(.px-skills-bar) .bottom-zone-main {
  padding-top: 22px;
}
/* When test panel is active, hide the sizing row — it's covered by the panel */
.bottom-zone:has(#px-root:not(.px-hidden)) .sizing-row {
  visibility: hidden;
  pointer-events: none;
}

/* ── Test Mode — horizontal bar layout ──────────────────────────────── */
.px-body-cols {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}
.px-col-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
/* Each px-section inside px-col-left is a horizontal group */
.px-col-left .px-section {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  border-left: 1px solid rgba(167,139,250,0.15);
  padding-left: 14px;
  margin-left: 0;
}
.px-col-left .px-section:first-child {
  border-left: none;
  padding-left: 0;
}
/* Info message section takes remaining space */
.px-section-info {
  flex: 1;
  min-width: 0;
}
.px-col-right {
  display: none;
}
.px-skills-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.px-skills-diff {
  font-size: 0.60rem;
  font-weight: 700;
  color: rgba(167,139,250,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.px-skill-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
}
.px-skill-dot { font-size: 0.55rem; }
.px-skill-on  { color: #6ee7b7; }
.px-skill-on .px-skill-dot  { color: #34d399; }
.px-skill-off { color: rgba(167,139,250,0.35); }
.px-skill-off .px-skill-dot { color: rgba(167,139,250,0.25); }
.px-skill-shark { color: #fb923c; }
.px-skill-shark .px-skill-dot { color: #f97316; }
.px-skill-tilt { color: #f87171; }
.px-skill-tilt .px-skill-dot { color: #ef4444; }
.px-diff-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 3px;
}
.px-diff-hard {
  background: rgba(251,146,60,0.18);
  border: 1px solid rgba(251,146,60,0.4);
  color: #fb923c;
}
.px-diff-easy {
  background: rgba(110,231,183,0.12);
  border: 1px solid rgba(52,211,153,0.35);
  color: #6ee7b7;
}


/* ── Sound controls in settings modal ───────────────────────── */
.sound-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sound-mute-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.sound-vol-icon { font-size: 0.9rem; flex-shrink: 0; }
.sound-volume-slider {
  flex: 1;
  min-width: 60px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  outline: none;
  cursor: pointer;
}
.sound-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.sound-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  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: var(--bg-card);
  border: 1px solid rgba(26,127,232,0.25);
  border-radius: var(--radius);
  width: min(640px, 96vw);
  min-height: min(900px, 85vh);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(26,127,232,0.07) inset,
    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 rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.lb-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  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 rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  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(--accent);
  border-bottom-color: var(--accent);
}

.lb-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #2a50a8 transparent;
}
.lb-body::-webkit-scrollbar { width: 5px; }
.lb-body::-webkit-scrollbar-thumb { background: #2a50a8; 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 rgba(255,255,255,0.08);
}
.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: var(--accent-bg);
}
.lb-table tbody tr.lb-row--me .lb-player-name {
  color: var(--accent);
}
.lb-table tbody tr.lb-row--ghost td {
  opacity: 0.45;
  font-style: italic;
}

/* Mobile card cell — hidden on desktop, shown only inside mobile media query */
.lb-col-mobile-card { display: none; }

/* ── Mobile card layout ─────────────────────────────────────────── */
.lb-mc-wrap {
  display: flex;
  align-items: stretch;
}
/* Big square PFP — left column */
.lb-mc-pfp-col { flex-shrink: 0; }
.lb-mc-pfp {
  width: 90px !important;
  height: 90px !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  display: block;
  background-position: center center;
  background-size: cover;
}
/* Right: name + stats */
.lb-mc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 10px 10px 12px;
  gap: 6px;
}
/* Name row: name left, rank right */
.lb-mc-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
.lb-mc-info .lb-player-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
/* Rank badge — top right of card */
.lb-mc-corner {
  flex-shrink: 0;
  line-height: 1;
  white-space: nowrap;
}
.lb-mc-corner--medal {
  font-size: 1.05rem;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.lb-mc-corner--num {
  font-size: 0.62rem;
  font-weight: 900;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-mono, monospace);
  padding-top: 2px;
}
/* Stats row */
.lb-mc-stats {
  display: flex;
  gap: 14px;
}
.lb-mc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-stat-lbl {
  font-size: 0.5rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.lb-you {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
}

.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; }

/* Sortable column headers */
.lb-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.lb-table th[data-sort]:hover {
  color: var(--text-secondary);
}
.lb-sort-arrow {
  display: inline-block;
  width: 0.6em;
  font-size: 0.7em;
  opacity: 0.35;
}
.lb-table th[data-sort]:hover .lb-sort-arrow {
  opacity: 0.6;
}
.lb-sort--active .lb-sort-arrow {
  opacity: 1;
  color: var(--accent);
}
.lb-sort--desc .lb-sort-arrow::after { content: ' ↓'; }
.lb-sort--asc  .lb-sort-arrow::after { content: ' ↑'; }

.lb-rank {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  display: block;
}
.lb-rank--medal { font-size: 1.1rem; line-height: 1; }
.lb-rank--num   { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
/* On mobile lb-rank--medal/.lb-rank--num are restyled via .lb-mc-emoji-col \u2014 see global .lb-mc-wrap block */

.lb-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lb-player-clickable {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  padding: 2px 4px;
  margin: -2px -4px;
}
.lb-player-clickable:hover {
  background: var(--accent-bg);
}
.lb-player-clickable:hover .lb-player-name {
  color: var(--accent);
}
/* Whole-row hover on desktop (lb-row--clickable set by JS) */
.lb-table tbody tr.lb-row--clickable { cursor: pointer; }
.lb-table tbody tr.lb-row--clickable:hover .lb-player-name { color: var(--accent); }
.lb-player-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.lb-avatar {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-size: cover;
  background-position: center top;
  background-color: var(--bg-dark);
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.1);
}
.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: var(--accent); }

.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 rgba(255,255,255,0.08);
  padding: 0.6rem 1.25rem;
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.lb-note {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.lb-note--experimental {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
}
.lb-note--experimental .material-symbols-rounded {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ── Lobby Gate ──────────────────────────────────────────────── */
#lobby-gate {
  margin: 1.1rem 0 0.5rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lobby-gate-beta-ribbon {
  position: absolute;
  top: 11px;
  right: -22px;
  width: 90px;
  background: var(--accent);
  color: #0d1117;
  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;
  display: flex;
  justify-content: center;
  color: var(--text-muted);
}
.lobby-gate-lock .material-symbols-rounded { font-size: 1.6rem; top: 0; }
.lobby-gate-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}
.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.72rem 0.95rem;
  background: var(--bg-input);
  border: 1px solid rgba(26,127,232,0.30);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-mono);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  text-align: center;
  letter-spacing: 0.05em;
}
.lobby-gate-input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(101,130,162,0.1);
}
#lobby-gate-btn {
  width: 300px;
  max-width: 100%;
  padding: 0.72rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 800;
}

.lobby-gate-error {
  min-height: 1.2em;
  font-size: 0.78rem;
  color: var(--red);
  margin-top: 0.5rem;
  margin-bottom: 6px;
}

.lobby-gate-rules-link {
  margin-top: 0.6rem;
}
.lobby-gate-rules-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--font);
  opacity: 0.85;
  transition: opacity 0.15s;
}
.lobby-gate-rules-btn:hover { opacity: 1; }

/* ── Codebomber easter egg ───────────────────────────────────── */
/* Phase 1: fall in and thud to a stop */
@keyframes gate-bomb-fall {
  0%   { transform: translateY(-80px) rotate(0deg) scale(0.7); opacity: 0; }
  8%   { opacity: 1; }
  80%  { transform: translateY(var(--bomb-land-y)) rotate(var(--bomb-spin)) scale(1); animation-timing-function: cubic-bezier(0.22,1,0.36,1); }
  88%  { transform: translateY(calc(var(--bomb-land-y) + 6px)) scale(1.08) rotate(var(--bomb-spin)); }
  100% { transform: translateY(var(--bomb-land-y)) scale(1) rotate(var(--bomb-spin)); opacity: 1; }
}
/* Phase 2 exit variants */
@keyframes gate-bomb-exit-tumble {
  0%   { opacity: 1; transform: translateY(var(--bomb-land-y)) scale(1) rotate(var(--bomb-spin)); }
  100% { opacity: 0; transform: translateY(calc(var(--bomb-land-y) + 140px)) scale(0.6) rotate(calc(var(--bomb-spin) + 540deg)); }
}
@keyframes gate-bomb-exit-rise {
  0%   { opacity: 1; transform: translateY(var(--bomb-land-y)) scale(1); }
  40%  { opacity: 1; transform: translateY(calc(var(--bomb-land-y) - 120px)) scale(1.1); }
  100% { opacity: 0; transform: translateY(-120px) scale(0.4); }
}
@keyframes gate-bomb-exit-fade {
  0%   { opacity: 1; transform: translateY(var(--bomb-land-y)) scale(1) rotate(var(--bomb-spin)); }
  60%  { opacity: 0.6; transform: translateY(var(--bomb-land-y)) scale(1.25) rotate(var(--bomb-spin)); }
  100% { opacity: 0; transform: translateY(var(--bomb-land-y)) scale(0.1) rotate(var(--bomb-spin)); }
}
/* bloat: decelerates to near-stop, swells massively, then fades */
@keyframes gate-bomb-exit-bloat {
  0%   { opacity: 1;   transform: translateY(var(--bomb-land-y)) scale(1) rotate(var(--bomb-spin)); }
  25%  { opacity: 1;   transform: translateY(calc(var(--bomb-land-y) + 8px))  scale(1.15) rotate(var(--bomb-spin)); animation-timing-function: cubic-bezier(0.05,0.7,0.1,1); }
  65%  { opacity: 0.9; transform: translateY(calc(var(--bomb-land-y) - 10px)) scale(var(--bomb-bloat)) rotate(calc(var(--bomb-spin) + 8deg)); animation-timing-function: ease-out; }
  85%  { opacity: 0.4; transform: translateY(calc(var(--bomb-land-y) - 14px)) scale(calc(var(--bomb-bloat) * 1.08)) rotate(calc(var(--bomb-spin) + 10deg)); }
  100% { opacity: 0;   transform: translateY(calc(var(--bomb-land-y) - 18px)) scale(calc(var(--bomb-bloat) * 1.12)) rotate(calc(var(--bomb-spin) + 12deg)); }
}
.gate-bomb {
  position: fixed;
  top: 0;
  pointer-events: none;
  z-index: 99999;
  user-select: none;
  line-height: 1;
}
.gate-bomb.phase-fall {
  animation: gate-bomb-fall cubic-bezier(0.4,0,0.8,0.6) forwards;
}
.gate-bomb.phase-exit-tumble { animation: gate-bomb-exit-tumble 0.55s ease-in     forwards; }
.gate-bomb.phase-exit-rise   { animation: gate-bomb-exit-rise   0.65s ease-in-out  forwards; }
.gate-bomb.phase-exit-fade   { animation: gate-bomb-exit-fade   0.5s  ease-out     forwards; }
.gate-bomb.phase-exit-bloat  { animation: gate-bomb-exit-bloat  1.4s  ease-in      forwards; }
@keyframes gate-bomb-btn-pulse {
  0%   { transform: scale(1);    background: var(--accent); }
  30%  { transform: scale(1.18); background: #f97316; box-shadow: 0 0 24px #f9731680; }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1);    background: #f97316; box-shadow: 0 0 12px #f9731660; }
}
.gate-bomb-btn-pulse {
  animation: gate-bomb-btn-pulse 0.7s ease forwards;
  color: #fff !important;
}

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

.lobby-gate-contact a {
  color: var(--accent);
  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; }

/* Table corner buttons — Exit + Sit Out, always visible bottom-right */
.table-corner-btns {
  position: absolute;
  bottom: 7px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 20;
}
.btn-corner-action {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-exit:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: var(--text-primary);
}
.btn-sit-out:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: var(--text-primary);
}
.btn-sit-out--active {
  color: var(--accent);
  border-color: var(--accent-border);
}
.btn-sit-out--active:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Sitting-out player dim overlay */
.player-sitting-out {
  opacity: 0.42;
  transition: opacity 0.35s ease;
}

/* Sitting-out notice — shown below the bottom player's card row */
.sit-out-notice {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fbbf24;
  padding: 3px 0 1px;
  pointer-events: none;
}

/* Hide action row buttons while sitting out */
.sit-out-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Acid quit-session button — lives inside .table-corner-btns, hidden until acid mode active */
.btn-acid-quit:hover {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

/* 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); }
}

/* ── Game Over Modal ─────────────────────────────────────────── */
.game-over-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 7, 14, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gomFadeIn 0.4s ease;
}
.game-over-modal.hidden { display: none; }
@keyframes gomFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Card ── */
.gom-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: linear-gradient(175deg, #1e2128 0%, #141720 55%, #0e1018 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 0 0 1.75rem;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 32px 80px rgba(0,0,0,0.85),
    0 8px 24px rgba(0,0,0,0.5);
  min-width: 300px;
  max-width: 360px;
  width: 90vw;
  overflow: hidden;
  animation: gomCardPop 0.45s cubic-bezier(0.34,1.4,0.64,1) both;
}
@keyframes gomCardPop {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Win state — golden border glow */
.gom-card.gom-win {
  border-color: rgba(200,148,74,0.45);
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.12) inset,
    0 0 60px rgba(200,148,74,0.12),
    0 32px 80px rgba(0,0,0,0.85);
}
/* Lose state */
.gom-card.gom-lose-state {
  border-color: rgba(100,120,140,0.25);
}
/* Tie state */
.gom-card.gom-tie {
  border-color: rgba(100,180,150,0.3);
}

/* ── Trophy section ── */
.gom-trophy-wrap {
  position: relative;
  width: 100%;
  padding: 2rem 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
}
.gom-trophy-spotlight {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(200,148,74,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.gom-trophy-win .gom-trophy-spotlight {
  background: radial-gradient(ellipse at center, rgba(200,148,74,0.45) 0%, transparent 70%);
}
.gom-trophy-lose .gom-trophy-spotlight {
  background: radial-gradient(ellipse at center, rgba(80,100,120,0.3) 0%, transparent 70%);
}
.gom-trophy-tie .gom-trophy-spotlight {
  background: radial-gradient(ellipse at center, rgba(80,180,140,0.3) 0%, transparent 70%);
}
.gom-trophy-emoji {
  font-size: 5.5rem;
  line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
  position: relative;
  z-index: 1;
}
.gom-trophy-win .gom-trophy-emoji {
  animation: gomTrophyFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 20px rgba(200,148,74,0.5)) drop-shadow(0 12px 32px rgba(0,0,0,0.6));
}
@keyframes gomTrophyFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Title ── */
.gom-outcome {
  padding: 0.85rem 2rem 0;
  width: 100%;
}
.gom-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gom-title.gom-lose {
  font-size: 1.4rem;
  color: #7a8898;
  text-transform: none;
  font-weight: 700;
}

/* ── Player name row ── */
.gom-player-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 1.5rem 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
}
.gom-player-row.hidden { display: none; }
.gom-diamond {
  color: var(--text-muted);
  font-size: 0.65rem;
  opacity: 0.8;
}
.gom-player-name {
  color: #c8d8e8;
  letter-spacing: 0.05em;
}

/* ── Prize banner ── */
.gom-prize-banner {
  margin: 1rem 1.5rem 0;
  width: calc(100% - 3rem);
  background: linear-gradient(135deg, rgba(14,10,4,0.9) 0%, rgba(22,16,6,0.9) 100%);
  border: 1px solid rgba(200,148,74,0.55);
  border-radius: 12px;
  padding: 0.9rem 1.25rem 0.75rem;
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.08) inset,
    0 4px 16px rgba(0,0,0,0.4);
}
.gom-prize-banner.hidden { display: none; }
.gom-prize-label-top {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.45rem;
}
.gom-prize-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--gold-light);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.gom-prize-diamond {
  font-size: 0.85rem;
  color: var(--gold);
  opacity: 0.7;
}
.gom-prize-label-bottom {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200,148,74,0.55);
}

/* ── Subtitle (hand name) ── */
.gom-subtitle {
  font-size: 0.82rem;
  color: #6a7888;
  min-height: 0;
  line-height: 1.5;
  padding: 0.6rem 2rem 0;
}
.gom-subtitle:empty { display: none; }
.gom-subtitle strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Actions ── */
.gom-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: calc(100% - 3rem);
  margin: 1.25rem 1.5rem 0;
}
.gom-btn {
  width: 100%;
  font-size: 0.88rem;
  padding: 0.65rem 1.25rem;
}
.gom-actions-row {
  display: flex;
  flex-direction: row;
  gap: 0.55rem;
  width: 100%;
}
.gom-actions-row .gom-btn {
  flex: 1;
}
.gom-history-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.76rem;
  cursor: pointer;
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  transition: color 0.15s;
}
.gom-history-link .material-symbols-rounded { font-size: 0.95rem; }
.gom-history-link:hover { color: var(--text-secondary); }

/* Game-over footer links row */
.gom-footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  width: calc(100% - 3rem);
  margin: 0.2rem 1.5rem 0;
}
.gom-text-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.76rem;
  cursor: pointer;
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.15s;
}
.gom-text-link .material-symbols-rounded { font-size: 0.95rem; }
.gom-text-link:hover { color: var(--text-secondary); }

/* New badge unlock strip inside game-over modal */
.gom-new-badges {
  width: calc(100% - 3rem);
  margin: 0.9rem 1.5rem 0;
  padding: 0.75rem 1rem;
  background: rgba(224, 192, 96, 0.07);
  border: 1px solid rgba(224, 192, 96, 0.22);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  animation: gom-badge-pop 0.4s ease;
}
.gom-new-badges.hidden { display: none; }
.gom-new-badges-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.2px;
}
.gom-new-badge-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  justify-content: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.gom-badge-img  { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.gom-badge-name { font-weight: 600; color: var(--text-primary); }

@keyframes gom-badge-pop {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════ PROFILE MODAL ═══════════════════════════════ */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-modal.hidden { display: none; }

.profile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}

.profile-dialog {
  position: relative;
  z-index: 1;
  width: min(480px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(26,127,232,0.25);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(26,127,232,0.07) inset,
    0 24px 64px rgba(0,0,0,0.75);
  display: flex;
  flex-direction: column;
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.profile-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.profile-title .material-symbols-rounded { font-size: 1.1rem; }

.profile-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.profile-close:hover { color: var(--text-primary); }

.profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: #2a50a8 transparent;
}
.profile-body::-webkit-scrollbar { width: 5px; }
.profile-body::-webkit-scrollbar-thumb { background: #2a50a8; border-radius: 3px; }

.profile-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

/* Hero row: avatar + name */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: var(--bg-dark);
  flex-shrink: 0;
  border: 2px solid rgba(24,114,212,0.45);
}
.profile-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.profile-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}
.profile-last-played {
  font-size: 0.75rem;
  color: var(--text-muted);
}
/* Team allegiance badge in profile */
.profile-team-allegiance {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  border: 1px solid transparent;
  width: fit-content;
}
.profile-team-allegiance.hidden { display: none; }
.profile-team-logo {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.profile-team--hero {
  background: rgba(200,148,74,0.14);
  border-color: rgba(200,148,74,0.5);
  color: var(--gold-light);
}
.profile-team--misfit {
  background: rgba(220,38,38,0.12);
  border-color: rgba(220,38,38,0.45);
  color: #fca5a5;
}
.profile-edit-btn {
  margin-top: 0.15rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
  text-align: left;
}
.profile-edit-btn:hover { color: var(--text-primary); }

/* Stats grid */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.profile-stat-block {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.6rem 0.4rem;
  text-align: center;
}
.profile-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.profile-stat-lbl {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* vs Bot / vs Friend mode sections */
.profile-mode-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.profile-mode-section-hdr {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.profile-mode-section-hdr .material-symbols-rounded {
  font-size: 0.9rem;
}
.profile-stats--sm .profile-stat-val {
  font-size: 1.0rem;
}

/* vs Bot / vs Friend mode row (kept for compat) */
.profile-mode-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.profile-mode-block {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
}
.profile-mode-block .material-symbols-rounded {
  font-size: 1.2rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.profile-mode-nums {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.profile-mode-nums span:first-child {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}
.profile-mode-lbl {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.profile-mode-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.07);
}

/* Achievements section */
.profile-badges-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.profile-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.profile-badge-tier {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.profile-badge-tier-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.profile-badge-tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  min-width: 0;
}
.profile-badges-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
/* Profile dialog: 3-column badge grid on desktop, 1-column on mobile (overridden in max-width:768 block above) */
@media (min-width: 769px) {
  .profile-badges-grid .ach-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.profile-badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.5rem 0.2rem 0.45rem;
  background: rgba(224, 192, 96, 0.07);
  border: 1px solid rgba(224, 192, 96, 0.22);
  border-radius: 9px;
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s;
  min-width: 0;
  overflow: hidden;
}
.profile-badge-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(224, 192, 96, 0.18);
}
.profile-badge-tile--locked {
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.06);
  opacity: 0.45;
}
.profile-badge-tile--locked:hover { transform: none; box-shadow: none; }
/* SVG badge image in profile */
.profile-badge-img {
  width: min(44px, 70%);
  height: auto;
  aspect-ratio: 1;
  display: block;
  transition: filter 0.15s, transform 0.15s;
}
.profile-badge-tile--locked .profile-badge-img {
  filter: grayscale(1) brightness(0.45);
}
.profile-badge-tile:not(.profile-badge-tile--locked):hover .profile-badge-img {
  filter: drop-shadow(0 0 5px rgba(101,130,162,0.45));
  transform: scale(1.08);
}
.profile-badge-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}
.profile-badge-tile--locked .profile-badge-label {
  color: var(--text-muted);
}
.profile-badges-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 1rem 0;
}

.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;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.3);
  color: rgba(167,139,250,0.85);
  vertical-align: middle;
}
/* Full Tilt badge: matches quiet style with red tint */
.acid-mode-badge--fulltilt {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.3) !important;
  animation: none !important;
  color: rgba(252,165,165,0.85) !important;
}

/* Hold'em-only badge: calm blue, quiet */
.acid-mode-badge--holdem {
  background: rgba(96,165,250,0.1) !important;
  border-color: rgba(96,165,250,0.3) !important;
  color: rgba(96,165,250,0.85) !important;
}
.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;
}

/* ══════════════════════════════════════════════════════════════════
   BOT WARS CONFIG MODAL
   ══════════════════════════════════════════════════════════════════ */
.bvb-cfg-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bvb-cfg-modal.hidden { display: none; }

.bvb-cfg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
}

.bvb-cfg-dialog {
  position: relative;
  z-index: 1;
  background: #0b1220;
  border: 1px solid rgba(200,148,74,0.30);
  border-radius: 14px;
  width: min(480px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.08) inset,
    0 0 40px rgba(200,148,74,0.08),
    0 24px 64px rgba(0,0,0,0.80);
}

.bvb-cfg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid rgba(200,148,74,0.18);
  background: rgba(0,0,0,0.30);
  flex-shrink: 0;
}
.bvb-cfg-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold-light, #e8c87a);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.bvb-cfg-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}
.bvb-cfg-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.1rem;
  flex-shrink: 0;
  transition: color 0.15s;
}
.bvb-cfg-close:hover { color: #fff; }

.bvb-cfg-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 1.1rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,148,74,0.35) transparent;
}

.bvb-cfg-section-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200,148,74,0.70);
  margin: 0.8rem 0 0.5rem;
}
.bvb-cfg-section-label:first-child { margin-top: 0; }

/* ── Season 1 standings block ───────────────────────────────────────────────── */
.bvb-season-section {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.bvb-season-eyebrow {
  font-size: 0.68rem;
  color: var(--text-muted);
  opacity: 0.75;
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
.bvb-season-board {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bvb-season-loading {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.6;
  text-align: center;
  padding: 0.5rem 0;
}
/* Character card overrides (built on .ach-card base) */
.bvb-char-card { cursor: default; }
.bvb-char-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.bvb-char-wins {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(245,200,66,0.95);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 2rem;
  text-align: right;
}
.bvb-char-wins-lbl {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
  vertical-align: middle;
}

/* Segmented pill rows */
.bvb-cfg-seg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.bvb-cfg-seg-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bvb-cfg-seg-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bvb-cfg-seg {
  display: flex;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  overflow: hidden;
}
.bvb-cfg-seg-btn {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.bvb-cfg-seg-btn:last-child { border-right: none; }
.bvb-cfg-seg-btn:hover:not(.active) { background: rgba(255,255,255,0.05); color: var(--text-secondary); }
.bvb-cfg-seg-btn.active {
  background: rgba(200,148,74,0.20);
  color: var(--gold-light, #e8c87a);
}

/* Toggle rows */
.bvb-cfg-toggles {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.25rem;
}
.bvb-cfg-toggles--horiz {
  display: flex;
  flex-direction: column;
}
.bvb-cfg-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.48rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  user-select: none;
}
.bvb-cfg-toggle-row:last-child { border-bottom: none; }
.bvb-cfg-toggle-row:hover { background: rgba(255,255,255,0.02); border-radius: 6px; }
.bvb-cfg-toggle-meta {
  flex: 1;
  min-width: 0;
}
.bvb-cfg-toggle-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.bvb-cfg-toggle-desc {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  line-height: 1.3;
}
/* Hide the actual checkbox, use toggle-track visual */
.bvb-cfg-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
/* Reuse existing toggle-track / toggle-thumb but scope to bvb config */
.bvb-cfg-toggle-row .bvb-toggle-track {
  flex-shrink: 0;
  cursor: pointer;
}
/* Checked state driven by sibling input — use JS to add .is-on class */
.bvb-cfg-toggle-row.is-on .bvb-toggle-track { background: rgba(200,148,74,0.70); }
.bvb-cfg-toggle-row.is-on .toggle-thumb { transform: translateX(18px); }

.bvb-cfg-footer {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid rgba(200,148,74,0.18);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.bvb-cfg-launch-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(200,148,74,0.25) 0%, rgba(200,148,74,0.12) 100%);
  border: 1px solid rgba(200,148,74,0.55);
  border-radius: 10px;
  color: var(--gold-light, #e8c87a);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bvb-cfg-launch-btn:hover {
  background: linear-gradient(135deg, rgba(200,148,74,0.38) 0%, rgba(200,148,74,0.20) 100%);
  border-color: rgba(200,148,74,0.80);
  box-shadow: 0 0 18px rgba(200,148,74,0.18);
}
.bvb-cfg-launch-btn:active {
  transform: scale(0.98);
}

/* ── BvB join mode: two-step back button ────────────────────── */
.bvb-join-back-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  margin-right: 0.6rem;
  letter-spacing: 0.04em;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.bvb-join-back-btn:hover {
  color: rgba(255,255,255,0.80);
  border-color: rgba(255,255,255,0.35);
}
/* When back button is visible, launch btn should fill the remaining space */
.bvb-cfg-footer:has(.bvb-join-back-btn:not(.hidden)) {
  display: flex;
  align-items: center;
}
.bvb-cfg-footer:has(.bvb-join-back-btn:not(.hidden)) .bvb-cfg-launch-btn {
  flex: 1;
  width: auto;
}

/* ── Free-battles-remaining hints ───────────────────────────── */
/* Lobby mini-card hint (inside the card, second row) */
.bvb-launch-hint {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(200,148,74,0.80);
  line-height: 1.3;
}
.bvb-launch-hint:empty { display: none; }
.bvb-launch-hint--depleted { color: rgba(255,255,255,0.38); }

/* Config modal footer hint (above the launch button) */
.bvb-free-remaining-hint {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(200,148,74,0.85);
  margin-bottom: 0.45rem;
  line-height: 1.3;
  min-height: 0.9em;
}
.bvb-free-remaining-hint:empty { display: none; }
.bvb-free-remaining-hint--depleted { color: rgba(255,255,255,0.38); }

/* ── BvB config: bot name input ─────────────────────────────── */
.bvb-cfg-bot-row {
  margin-bottom: 0.85rem;
}
.bvb-cfg-bot-name-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  color: #e0c87a;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.5rem 0.75rem;
  outline: none;
  letter-spacing: 0.03em;
}
.bvb-cfg-bot-name-input::placeholder { color: rgba(255,255,255,0.22); font-weight: 400; }
.bvb-cfg-bot-name-input:focus {
  border-color: rgba(200,148,74,0.5);
  background: rgba(200,148,74,0.06);
}
.bvb-cfg-bot-name-display {
  font-size: 0.9rem;
  font-weight: 700;
  color: #e0c87a;
  letter-spacing: 0.03em;
  padding: 0.5rem 0.75rem;
}

/* ── Profile: bot pet card ──────────────────────────────────── */
.profile-bot-pet {
  margin: 0 0 0.65rem;
}
.bot-pet-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  background: rgba(200,148,74,0.07);
  border: 1px solid rgba(200,148,74,0.22);
  border-radius: 10px;
}
.bot-pet-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(200,148,74,0.35);
  flex-shrink: 0;
}
.bot-pet-body {
  flex: 1;
  min-width: 0;
}
.bot-pet-name {
  font-size: 1rem;
  font-weight: 800;
  color: #c8944a;
  letter-spacing: 0.03em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-pet-sub {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 2px;
}
.bot-pet-stats {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(200,148,74,0.75);
  margin-top: 3px;
}
.bot-pet-stat-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 5px;
}
.bot-pet-stat {
  flex: 1;
  text-align: center;
}
.bot-pet-stat-val {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.bot-pet-stat-val--won  { color: #7ee8a2; }
.bot-pet-stat-val--high { color: #7ee8a2; }
.bot-pet-stat-val--mid  { color: var(--accent); }
.bot-pet-stat-lbl {
  font-size: 0.52rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.bot-pet-stat-sep {
  width: 1px;
  height: 1.8rem;
  background: rgba(255,255,255,0.1);
  flex: none;
}

/* Free-battles-remaining line in profile bot-pet card */
.bot-pet-free-wars {
  font-size: 0.64rem;
  font-weight: 700;
  text-align: center;
  color: rgba(200,148,74,0.80);
  letter-spacing: 0.04em;
  margin-top: 7px;
  line-height: 1.3;
}
.bot-pet-free-wars--depleted { color: rgba(255,255,255,0.35); }

/* ── Create-Your-Bot UI (profile modal) ───────────────────────────────────── */
.profile-create-bot {
  margin: 0 0 0.75rem;
  padding: 0.9rem;
  background: rgba(56,189,248,0.05);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 12px;
}
.pcb-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #38bdf8;
  margin-bottom: 0.3rem;
}

/* Mystery blind-box UI */
.pcb-box-phase {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}
.pcb-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pcb-box-sub {
  flex: 1;
  min-width: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: flex;
  align-items: center;
}
.pcb-mystery-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.55rem 1rem;
  flex-shrink: 0;
  width: 110px;
  align-self: stretch;
  background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(139,92,246,0.08));
  border: 2px dashed rgba(255,255,255,0.22);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.pcb-mystery-box:hover {
  border-color: rgba(56,189,248,0.55);
  background: linear-gradient(135deg, rgba(56,189,248,0.14), rgba(139,92,246,0.14));
  transform: translateY(-2px);
}
.pcb-mystery-mark {
  font-size: 1.6rem;
  font-weight: 900;
  color: #38bdf8;
  text-shadow: 0 0 14px rgba(56,189,248,0.45);
  line-height: 1;
}
.pcb-mystery-label {
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 540px) {
  .pcb-box-phase { flex-direction: column; align-items: stretch; }
  .pcb-mystery-box { width: 100%; }
}
@keyframes pcb-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-7px) rotate(-2deg); }
  40% { transform: translateX(7px) rotate(2deg); }
  60% { transform: translateX(-4px) rotate(-1deg); }
  80% { transform: translateX(4px) rotate(1deg); }
}
.pcb-mystery-shaking { animation: pcb-shake 0.45s ease-in-out; }
@keyframes pcb-reveal {
  0%   { opacity: 0; transform: scale(0.88) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.pcb-reveal-anim { animation: pcb-reveal 0.35s ease-out forwards; }
.pcb-revealed-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--char-color, #38bdf8) 12%, rgba(0,0,0,0.25));
  border: 2px solid var(--char-color, #38bdf8);
  border-radius: 10px;
  margin-bottom: 0.6rem;
}
.pcb-revealed-av {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--char-color, #38bdf8);
  flex-shrink: 0;
}
.pcb-revealed-info { flex: 1; min-width: 0; }
.pcb-revealed-charname {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.pcb-revealed-alias { font-size: 0.66rem; color: var(--text-muted); }
.pcb-name-prompt { margin-top: 0 !important; margin-bottom: 0.55rem !important; }

.pcb-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.pcb-chars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.pcb-char-btn {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  padding: 0.4rem 0.25rem 0.35rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.pcb-char-btn:hover {
  border-color: var(--char-color, #38bdf8);
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}
.pcb-char-btn.active {
  border-color: var(--char-color, #38bdf8);
  background: color-mix(in srgb, var(--char-color, #38bdf8) 15%, transparent);
  box-shadow: 0 0 0 1px var(--char-color, #38bdf8);
}
.pcb-char-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.12);
}
.pcb-char-btn.active .pcb-char-av {
  border-color: var(--char-color, #38bdf8);
}
.pcb-char-name {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.pcb-char-alias {
  font-size: 0.52rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.pcb-name-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.pcb-name-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 0.8rem;
  padding: 0.42rem 0.65rem;
  outline: none;
  transition: border-color 0.15s;
}
.pcb-name-input:focus {
  border-color: #38bdf8;
}
.pcb-create-btn {
  padding: 0.42rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: #38bdf8;
  color: #000;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.pcb-create-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pcb-error {
  font-size: 0.65rem;
  color: #f87171;
  margin-top: 0.4rem;
}
@media (max-width: 360px) {
  .pcb-chars { grid-template-columns: repeat(2, 1fr); }
  .pcb-char-alias { display: none; }
}

/* ── Settings Bot Wars section ────────────────────────────────────────────── */
.settings-bvb-section {
  padding: 0;
}
.settings-bvb-born {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem;
  background: linear-gradient(135deg, rgba(56,189,248,0.1) 0%, rgba(200,148,74,0.08) 100%);
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: 11px;
  box-shadow: 0 0 16px rgba(56,189,248,0.08);
}
.settings-bvb-born-av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #38bdf8;
  flex-shrink: 0;
}
.settings-bvb-born-text {
  flex: 1;
  min-width: 0;
}
.settings-bvb-born-headline {
  font-size: 0.9rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 0.25rem;
}
.settings-bvb-born-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.settings-bvb-notice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.8rem;
  background: rgba(200,148,74,0.07);
  border: 1px solid rgba(200,148,74,0.2);
  border-radius: 10px;
}
.settings-bvb-notice-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(200,148,74,0.35);
  flex-shrink: 0;
}
.settings-bvb-notice-text {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.settings-bvb-notice-cta {
  color: #c8944a;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   COMMUNITY FORUM MODAL  (.fm-*)
   ══════════════════════════════════════════════════════════════ */

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

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

.fm-dialog {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border: 1px solid rgba(26,127,232,0.25);
  border-radius: var(--radius);
  width: min(680px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(26,127,232,0.07) inset,
    0 24px 64px rgba(0,0,0,0.78);
}

.fm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.fm-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fm-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;
}
.fm-close:hover { color: #fff; }

/* Body — scrollable */
.fm-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: #2a50a8 transparent;
  display: flex;
  flex-direction: column;
}
.fm-body::-webkit-scrollbar { width: 5px; }
.fm-body::-webkit-scrollbar-thumb { background: #2a50a8; border-radius: 3px; }

/* ── Section tabs ──────────────────────────── */
.fm-tabs {
  display: flex;
  border-bottom: 1px solid rgba(26,127,232,0.22);
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.fm-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.04em;
  padding: 0.65rem 0.5rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
}
.fm-tab:hover { color: var(--text-secondary); }
.fm-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Toolbar (new thread btn) ──────────────── */
.fm-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0.65rem 1rem 0.5rem;
  flex-shrink: 0;
}
.fm-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, transform 0.1s;
}
.fm-new-btn:hover { background: #1a6fd4; }
.fm-new-btn:active { transform: scale(0.97); }
.fm-new-btn .material-symbols-rounded { font-size: 1rem; }

/* ── Thread list ───────────────────────────── */
.fm-thread-list {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem 0.75rem;
  flex: 1;
}
.fm-thread-item {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fm-thread-item:hover {
  background: rgba(26,127,232,0.09);
  border-color: rgba(26,127,232,0.3);
}
.fm-thread-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.fm-thread-meta {
  display: flex;
  gap: 0.8rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.fm-thread-author { color: var(--accent); font-weight: 600; }
.fm-thread-replies {}
.fm-thread-age   {}

/* ── Empty / loading / messages ────────────── */
.fm-empty, .fm-loading {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  flex: 1;
}
.fm-msg {
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  font-size: 0.82rem;
  margin: 0.5rem 1rem;
}
.fm-msg--error {
  background: rgba(220,53,69,0.15);
  color: #ff8a99;
  border: 1px solid rgba(220,53,69,0.3);
}
.fm-msg.hidden { display: none; }

/* ── Pagination ────────────────────────────── */
.fm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.fm-pg-btn {
  background: transparent;
  border: 1px solid rgba(26,127,232,0.35);
  color: var(--accent);
  border-radius: 5px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.fm-pg-btn:hover { background: rgba(26,127,232,0.12); }
.fm-pg-info { font-size: 0.8rem; color: var(--text-muted); }

/* ── Thread detail ─────────────────────────── */
.fm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.75rem 1rem 0.35rem;
  transition: color 0.15s;
}
.fm-back-btn:hover { color: #fff; }
.fm-back-btn .material-symbols-rounded { font-size: 1rem; }

.fm-thread-view-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 1rem 0.75rem;
  line-height: 1.35;
}
.fm-form-heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 1rem 0.9rem;
}

/* ── Posts list ────────────────────────────── */
.fm-posts {
  padding: 0 0.75rem;
  flex: 1;
}
.fm-post {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  background: rgba(0,0,0,0.15);
}
.fm-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}
.fm-post-author {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
}
.fm-post-ts {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.fm-post-body {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;      /* preserve intentional line-breaks */
  word-break: break-word;
}

/* ── Auth notice ───────────────────────────── */
.fm-auth-notice {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 1.5rem 1rem;
  font-style: italic;
}

/* ── Reply wrap ────────────────────────────── */
.fm-reply-wrap {
  padding: 0.85rem 0.75rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: auto;
  flex-shrink: 0;
}
.fm-reply-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  padding: 0 0.2rem;
}

/* ── Form elements ─────────────────────────── */
.fm-field-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0.75rem 0.85rem;
}
.fm-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.fm-text-input {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(26,127,232,0.3);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.fm-text-input:focus { border-color: var(--accent); }

.fm-textarea {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(26,127,232,0.3);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  padding: 0.55rem 0.75rem;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.55;
}
.fm-textarea:focus { border-color: var(--accent); }

.fm-chars {
  font-size: 0.73rem;
  color: var(--text-muted);
  text-align: right;
  display: block;
}

.fm-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.fm-submit-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.fm-submit-btn:hover:not(:disabled) { background: #1a6fd4; }
.fm-submit-btn:active:not(:disabled) { transform: scale(0.97); }
.fm-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fm-submit-full {
  margin: 0 0.75rem;
  display: block;
  width: calc(100% - 1.5rem);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}

/* ── Section pills (new thread form) ──────── */
.fm-section-pills {
  display: flex;
  gap: 0.5rem;
}
.fm-pill {
  background: transparent;
  border: 1px solid rgba(26,127,232,0.35);
  color: var(--text-muted);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.fm-pill--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fm-pill:hover:not(.fm-pill--active) { border-color: var(--accent); color: var(--accent); }

/* ── Thread meta icons ─────────────────────── */
.fm-thread-replies .material-symbols-rounded,
.fm-thread-likes   .material-symbols-rounded {
  font-size: 0.85rem;
  vertical-align: middle;
  margin-right: 0.15rem;
  font-variation-settings: 'FILL' 0, 'wght' 400;
}
.fm-thread-likes .material-symbols-rounded { color: #e0637a; }
.fm-thread-replies, .fm-thread-likes { display: inline-flex; align-items: center; }

/* ── Post footer + like button ─────────────── */
.fm-post-footer {
  display: flex;
  align-items: center;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.fm-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fm-like-btn .material-symbols-rounded {
  font-size: 0.95rem;
  font-variation-settings: 'FILL' 0, 'wght' 400;
  transition: font-variation-settings 0.15s, color 0.15s;
}
.fm-like-btn:hover:not(:disabled) {
  color: #e0637a;
  border-color: rgba(224,99,122,0.4);
  background: rgba(224,99,122,0.08);
}
.fm-like-btn--liked {
  color: #e0637a;
  border-color: rgba(224,99,122,0.4);
  background: rgba(224,99,122,0.08);
}
.fm-like-btn--liked .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400;
}
.fm-like-btn:disabled { opacity: 0.45; cursor: default; }
.fm-like-count { font-variant-numeric: tabular-nums; }

/* ── Post avatar + meta ── */
.fm-post-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.fm-post-av {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: rgba(255,255,255,0.08);
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.12);
}

/* ── Dislike button — mirrors like button ── */
.fm-dislike-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  margin-left: 0.35rem;
}
.fm-dislike-btn .material-symbols-rounded {
  font-size: 0.95rem;
  font-variation-settings: 'FILL' 0, 'wght' 400;
  transition: font-variation-settings 0.15s, color 0.15s;
}
.fm-dislike-btn:hover:not(:disabled) {
  color: #7b9cff;
  border-color: rgba(123,156,255,0.4);
  background: rgba(123,156,255,0.08);
}
.fm-dislike-btn--disliked {
  color: #7b9cff;
  border-color: rgba(123,156,255,0.4);
  background: rgba(123,156,255,0.08);
}
.fm-dislike-btn--disliked .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400;
}
.fm-dislike-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Share button ── */
.fm-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fm-share-btn .material-symbols-rounded { font-size: 0.9rem; }
.fm-share-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
}
.fm-share-btn--copied {
  color: #5cb85c;
  border-color: rgba(92,184,92,0.4);
  background: rgba(92,184,92,0.08);
}

/* ── Embedded post GIF ── */
.fm-post-gif {
  display: block;
  max-width: 320px;
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: 8px;
  margin: 0.55rem 0 0.1rem;
  object-fit: contain;
}

/* ── GIF picker (Giphy) ── */
.fm-gif-wrap {
  margin: 0.4rem 0 0.25rem;
}
.fm-gif-btn-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fm-gif-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.fm-gif-trigger .material-symbols-rounded { font-size: 1.1rem; }
.fm-gif-trigger:hover { color: var(--text); border-color: rgba(255,255,255,0.35); }
.fm-gif-trigger--active { color: var(--gold, #c8944a); border-color: var(--gold, #c8944a); }

.fm-gif-selected {
  position: relative;
  display: inline-block;
  margin-top: 0.45rem;
}
.fm-gif-selected img {
  display: block;
  max-width: 220px;
  max-height: 160px;
  border-radius: 8px;
  object-fit: contain;
}
.fm-gif-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border: none;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fm-gif-panel {
  background: var(--surface-2, rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  margin-top: 0.5rem;
  overflow: hidden;
}
.fm-gif-search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.fm-gif-search {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.84rem;
  padding: 0.35rem 0.6rem;
  outline: none;
}
.fm-gif-search:focus { border-color: rgba(255,255,255,0.3); }
.fm-gif-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.15rem;
}
.fm-gif-close:hover { color: var(--text); }

.fm-gif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
  padding: 0.45rem;
  max-height: 260px;
  overflow-y: auto;
}
.fm-gif-thumb {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.12s, transform 0.1s;
}
.fm-gif-thumb:hover { opacity: 0.85; transform: scale(1.03); }

.fm-gif-hint {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 1rem 0;
}
.fm-gif-hint--err { color: var(--danger, #e05555); }

/* Powered-by attribution (required by Giphy ToS) */
.fm-gif-panel::after {
  content: 'Powered by GIPHY';
  display: block;
  text-align: right;
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 0.2rem 0.5rem 0.3rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  opacity: 0.55;
}

/* === BOT AVATAR PICKER (BvB config modal) === */

.bvb-cfg-bot-avatar-row { padding: 0 0 0.85rem; }
.bvb-cfg-bat-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.45rem; padding: 0 0.5rem; }
.bvb-cfg-bot-avatars { display: flex; gap: 0.65rem; padding: 0 0.5rem; }
.bvb-ba-btn { background: transparent; border: 2px solid rgba(255,255,255,0.15); border-radius: 50%; padding: 0; width: 58px; height: 58px; cursor: pointer; transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s; overflow: hidden; flex-shrink: 0; }
.bvb-ba-btn img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.bvb-ba-btn:hover { border-color: rgba(200,148,74,0.6); transform: scale(1.07); }
.bvb-ba-btn--active { border-color: var(--gold, #c8944a); box-shadow: 0 0 0 3px rgba(200,148,74,0.35); }
.bvb-ba--locked .bvb-ba-btn { cursor: default; }
.bvb-ba--locked .bvb-ba-btn:not(.bvb-ba-btn--active) { opacity: 0.35; transform: none; }
.bvb-ba--locked .bvb-ba-btn:not(.bvb-ba-btn--active):hover { border-color: rgba(255,255,255,0.15); transform: none; }
.bvb-ba-lock-note {
  font-size: 0.68rem;
  color: rgba(200,148,74,0.85);
  padding: 0.4rem 0.5rem 0;
  line-height: 1.4;
}

/* === BOT WARS LEADERBOARD (#lb-bvb-body) === */

.lb-bvb-body { padding: 0.25rem 0.5rem 0.75rem; overflow-y: auto; }
.lb-bvb-body.hidden { display: none; }
.lb-bvb-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.lb-bvb-table thead th { text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.35rem 0.5rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lb-bvb-table thead th.lb-stat { text-align: right; }
.lb-bvb-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.1s; }
.lb-bvb-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.lb-bvb-table td { padding: 0.45rem 0.5rem; vertical-align: middle; }
.lb-bvb-table .lb-rank { color: var(--text-muted); font-size: 0.75rem; width: 1.5rem; text-align: center; }
.lb-bvb-table .lb-stat { text-align: right; font-variant-numeric: tabular-nums; }
.lb-bvb-table .lb-stat-muted { color: var(--text-muted); font-size: 0.78rem; }
.lb-bot-name { font-weight: 600; display: block; }
.lb-owner-name { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
.lb-owner-av { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-size: cover; background-position: center top; flex-shrink: 0; }
.lb-no-results { color: var(--text-muted); font-size: 0.84rem; text-align: center; padding: 1.5rem 0.5rem; margin: 0; }

/* ── BvB Player Cards (built on .ach-card base) ──────────────── */
.bvb-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bvb-player-card { cursor: default; }
.bvb-player-card.lb-ghost { opacity: 0.4; }
.bvb-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  border: 2px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.bvb-card-owner {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.bvb-card-owner-av {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
}
.bvb-card-stats {
  display: flex;
  gap: 0.65rem;
  flex-shrink: 0;
  margin-left: auto;
  align-items: center;
}
.bvb-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06rem;
  min-width: 2rem;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bvb-card-stat-won { color: rgba(245,200,66,0.9); }
.bvb-wr--high { color: #4ade80; }
.bvb-wr--mid  { color: #fbbf24; }
.bvb-card-stat-lbl {
  font-size: 0.56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ── Bot Wars Standings Modal (bvb-stm-*) ──────────────────────── */
.bvb-stm-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 0.75rem;
}
.bvb-stm-modal.hidden { display: none; }

.bvb-stm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
}

.bvb-stm-dialog {
  position: relative;
  z-index: 1;
  background: #0b1220;
  border: 1px solid rgba(200,148,74,0.30);
  border-radius: 14px;
  width: min(560px, 96vw);
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(200,148,74,0.08) inset,
    0 0 40px rgba(200,148,74,0.08),
    0 24px 64px rgba(0,0,0,0.80);
}

.bvb-stm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid rgba(200,148,74,0.18);
  background: rgba(0,0,0,0.30);
  flex-shrink: 0;
}
.bvb-stm-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold-light, #e8c87a);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bvb-stm-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.bvb-stm-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }

.bvb-stm-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
}
.bvb-stm-eyebrow {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.bvb-stm-unlock-btn {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.bvb-stm-unlock-btn:hover { opacity: 0.85; }
.bvb-stm-loading {
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.6;
  text-align: center;
  padding: 2rem 0;
}
.bvb-stm-section-label {
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
}

/* ── Character grid: 2-col desktop, 1-col mobile ────────────── */
.bvb-char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
@media (max-width: 380px) {
  .bvb-char-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Large character card variant (inside the standings modal) */
.bvb-char-card--lg {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.65rem 0.4rem 0.55rem;
  gap: 0.2rem;
}
.bvb-char-card--lg .bvb-char-img {
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 0.1rem;
}
.bvb-char-card--lg .ach-card-plaque {
  width: 100%;
  align-items: center;
}
.bvb-char-card--lg .ach-card-label {
  font-size: 0.82rem;
  font-weight: 800;
}
.bvb-char-card--lg .bvb-char-wins {
  font-size: 1.3rem;
  margin-left: 0;
  text-align: center;
  margin-top: 0.1rem;
  min-width: unset;
}

/* Progress bar inside the card plaque */
.bvb-char-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.bvb-char-bar {
  height: 100%;
  border-radius: 2px;
  min-width: 4px;
  opacity: 0.80;
  transition: width 0.5s ease;
}

/* =============================================================
   COMMUNITY PAGE  (.cp-*)
   ============================================================= */

/* ── Reset / base ──────────────────────────────────────────── */
.cp-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-main, #0d1117);
}



/* ── Header ─────────────────────────────────────────────────── */
.cp-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  height: 56px;
  background: rgba(13,17,23,0.95);
  border-bottom: 1px solid rgba(26,127,232,0.2);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.cp-logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-primary, #f0f6fc);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.cp-logo .material-symbols-rounded { font-size: 1.25rem; color: var(--accent, #1a7fe8); }
.cp-logo-text { display: none; }
@media (min-width: 520px) { .cp-logo-text { display: inline; } }

.cp-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}
.cp-page-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary, #b0bcc9);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cp-page-title .material-symbols-rounded { font-size: 1.1rem; color: var(--accent, #1a7fe8); }

.cp-header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.cp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--text-muted, #6e7f91);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.cp-back-link .material-symbols-rounded { font-size: 1rem; }
.cp-back-link:hover { color: var(--text-primary, #f0f6fc); }

/* ── Profile widget ─────────────────────────────────────────── */
.cp-profile-widget {
  position: relative;
}
.cp-profile-widget--loading { opacity: 0.4; pointer-events: none; }

.cp-profile-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 0.25rem 0.6rem 0.25rem 0.3rem;
  cursor: pointer;
  color: var(--text-primary, #f0f6fc);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.cp-profile-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(26,127,232,0.4); }

.cp-profile-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1) center/cover no-repeat;
  flex-shrink: 0;
  display: block;
}

.cp-profile-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .cp-profile-name { display: none; } }

.cp-profile-caret { font-size: 0.95rem; color: var(--text-muted, #6e7f91); }

/* ── Profile dropdown ───────────────────────────────────────── */
.cp-profile-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-card, #161b22);
  border: 1px solid rgba(26,127,232,0.25);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.65);
  z-index: 300;
  overflow: hidden;
}
.cp-profile-drop.hidden { display: none; }

.cp-drop-av-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
}

.cp-drop-av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08) center/cover no-repeat;
  flex-shrink: 0;
  border: 2px solid rgba(26,127,232,0.3);
}

.cp-drop-info { overflow: hidden; }
.cp-drop-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary, #f0f6fc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-drop-fact {
  font-size: 0.76rem;
  color: var(--text-muted, #6e7f91);
  margin-top: 0.2rem;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-drop-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 0;
}

.cp-drop-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary, #b0bcc9);
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  text-align: left;
}
.cp-drop-item:hover { background: rgba(26,127,232,0.1); color: var(--text-primary, #f0f6fc); }
.cp-drop-item .material-symbols-rounded { font-size: 1rem; color: var(--text-muted, #6e7f91); }
.cp-drop-item:last-child { border-radius: 0 0 10px 10px; }

/* ── Profile edit drawer ────────────────────────────────────── */
.cp-edit-panel {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  justify-content: flex-end;
}
.cp-edit-panel.hidden { display: none; }

.cp-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

.cp-edit-drawer {
  position: relative;
  z-index: 1;
  width: min(420px, 96vw);
  height: 100%;
  background: var(--bg-card, #161b22);
  border-left: 1px solid rgba(26,127,232,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -12px 0 40px rgba(0,0,0,0.5);
}

.cp-edit-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.cp-edit-title { font-size: 1rem; font-weight: 800; color: var(--text-primary, #f0f6fc); margin: 0; }
.cp-edit-close {
  background: transparent;
  border: none;
  color: var(--text-muted, #6e7f91);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.15rem;
  transition: color 0.15s;
}
.cp-edit-close:hover { color: #fff; }

.cp-edit-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: #2a50a8 transparent;
}

.cp-edit-section { margin-bottom: 1.4rem; }
.cp-edit-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6e7f91);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

/* Avatar grid */
.cp-edit-av-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 0.45rem;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: #2a50a8 transparent;
}
.cp-av-loading { color: var(--text-muted, #6e7f91); font-size: 0.82rem; padding: 0.5rem; }

.cp-av-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06) center/cover no-repeat;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  flex-shrink: 0;
}
.cp-av-btn:hover { border-color: rgba(26,127,232,0.5); transform: scale(1.08); }
.cp-av-btn--active {
  border-color: var(--accent, #1a7fe8);
  box-shadow: 0 0 0 3px rgba(26,127,232,0.3);
}

/* Form fields */
.cp-edit-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(26,127,232,0.3);
  border-radius: 7px;
  color: var(--text-primary, #f0f6fc);
  font-size: 0.9rem;
  font-family: inherit;
  padding: 0.55rem 0.75rem;
  outline: none;
  transition: border-color 0.15s;
}
.cp-edit-input:focus { border-color: var(--accent, #1a7fe8); }

.cp-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(26,127,232,0.3);
  border-radius: 7px;
  color: var(--text-primary, #f0f6fc);
  font-size: 0.88rem;
  font-family: inherit;
  line-height: 1.55;
  padding: 0.55rem 0.75rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.cp-edit-textarea:focus { border-color: var(--accent, #1a7fe8); }

.cp-edit-chars {
  display: block;
  text-align: right;
  font-size: 0.73rem;
  color: var(--text-muted, #6e7f91);
  margin-top: 0.25rem;
}

/* Messages */
.cp-edit-msg {
  border-radius: 6px;
  font-size: 0.82rem;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.85rem;
}
.cp-edit-msg.hidden { display: none; }
.cp-edit-msg--error   { background: rgba(220,53,69,0.15);  color: #ff8a99; border: 1px solid rgba(220,53,69,0.3); }
.cp-edit-msg--success { background: rgba(40,167,69,0.15);  color: #7ddb8f; border: 1px solid rgba(40,167,69,0.3); }

/* Save button */
.cp-edit-save {
  width: 100%;
  background: var(--accent, #1a7fe8);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.cp-edit-save:hover:not(:disabled) { background: #1269c5; }
.cp-edit-save:active:not(:disabled) { transform: scale(0.98); }
.cp-edit-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Main content area ──────────────────────────────────────── */
.cp-main {
  flex: 1;
  padding: 0;
}

.cp-forum-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
}

/* Make the forum body fill naturally (not flex:1 from modal context) */
.cp-page .fm-body {
  flex: none;
  overflow-y: visible;
  min-height: 300px;
}

/* On the community page the reply box doesn't need to stick to bottom */
.cp-page .fm-reply-wrap { margin-top: 1rem; }

/* Hide download/report row when history is opened from a hand review card */
.history-modal--from-profile #hh-report-row { display: none; }

/* ── Coach "Review Hand" CTA button ───────────────────────────── */
.coach-review-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.45rem 1rem;
  background: linear-gradient(135deg, rgba(24,114,212,0.22), rgba(24,114,212,0.12));
  border: 1px solid rgba(24,114,212,0.45);
  border-radius: 7px;
  color: #7bbfff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.coach-review-cta .material-symbols-rounded {
  font-size: 1rem;
  line-height: 1;
}
.coach-review-cta:hover {
  background: linear-gradient(135deg, rgba(24,114,212,0.38), rgba(24,114,212,0.22));
  border-color: rgba(24,114,212,0.7);
  color: #aad4ff;
}

/* ── History modal "Back to profile" button ───────────────────── */
.history-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: var(--text-muted, #8899aa);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
}
.history-back-btn .material-symbols-rounded {
  font-size: 1rem;
  line-height: 1;
}
.history-back-btn:hover {
  color: var(--text, #e6edf3);
  background: rgba(255,255,255,0.07);
}
.history-back-btn.hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   PLAY YOUR BOT — lobby section + BvB friend flow
   ═══════════════════════════════════════════════════════════════ */

/* ── "Play Your Bot" mini-card ── */
.bvb-play-section {
  position: relative;
  margin-top: -8px;
  margin-left: auto;
  width: calc(100% - 52px);
  display: block;
}
.bvb-play-section::before {
  content: '';
  position: absolute;
  left: -27px;
  top: -4px;
  width: 23px;
  height: 27px;
  border-left: 2px solid rgba(255,255,255,0.10);
  border-bottom: 2px solid rgba(255,255,255,0.10);
  border-bottom-left-radius: 6px;
  pointer-events: none;
}

.bvb-mini-eyebrow {
  display: block;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 1px;
}

.bvb-mini-card {
  padding: 0.42rem 0.7rem;
  margin-bottom: 0;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.07);
  border-top-left-radius: 4px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  flex-wrap: wrap;
  row-gap: 0;
  align-items: center;
}
.bvb-mini-card .bvb-launch-hint {
  width: 100%;
  text-align: left;
  padding: 0.25rem 0 0.15rem calc(34px + 0.85rem);
  margin: 0;
  min-height: 0;
}
.bvb-mini-card .join-returning-img {
  width: 34px;
  height: 34px;
  border-radius: 5px;
}
.bvb-mini-card .join-returning-name {
  font-size: 0.88rem;
}

/* ── BvB play section: inline friend-result area ────────────── */
#bvb-friend-result {
  margin-top: 0.75rem;
}
.bvb-fr-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-light, #e8c87a);
  margin-bottom: 6px;
}
.bvb-fr-link-row {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}
.bvb-fr-link-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: rgba(255,255,255,0.65);
  font-size: 0.7rem;
  padding: 0.45rem 0.65rem;
  outline: none;
}
.bvb-fr-copy-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  background: rgba(200,148,74,0.14);
  border: 1px solid rgba(200,148,74,0.35);
  border-radius: 7px;
  color: var(--gold-light, #e8c87a);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.bvb-fr-copy-btn:hover { background: rgba(200,148,74,0.25); }
.bvb-fr-open-btn {
  width: 100%;
  background: rgba(200,148,74,0.10);
  border: 1px solid rgba(200,148,74,0.28);
  border-radius: 8px;
  color: var(--gold-light, #e8c87a);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem;
  cursor: pointer;
  transition: background 0.15s;
}
.bvb-fr-open-btn:hover { background: rgba(200,148,74,0.22); }

/* ── BvB join mode: hide game config section in the modal ────── */
#bvb-config-modal[data-bvb-mode="join"] #bvb-cfg-game-section { display: none; }

/* ── Friend-waiting screen inside BvB config modal ──────────── */
#bvb-cfg-friend-waiting {
  padding: 20px 18px 18px;
  text-align: center;
}
.bvb-cfg-fw-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary, #e6edf3);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.bvb-cfg-fw-sub {
  font-size: 0.78rem;
  color: var(--text-muted, #8b949e);
  margin-bottom: 14px;
  line-height: 1.4;
}
.bvb-cfg-fw-link-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.bvb-cfg-fw-link-input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text-secondary, #8b949e);
  font-size: 0.73rem;
  padding: 6px 8px;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bvb-cfg-fw-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.bvb-cfg-fw-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
.bvb-cfg-fw-btn:hover { opacity: 0.85; }
.bvb-cfg-fw-btn--primary {
  background: linear-gradient(135deg, rgba(200,148,74,0.8) 0%, rgba(200,148,74,0.5) 100%);
  border: 1px solid rgba(200,148,74,0.7);
  color: #fff;
}
.bvb-cfg-fw-btn--secondary {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-primary, #e6edf3);
}

/* ── BvB friend-waiting overlay (host spectator window) ──────── */
#bvb-waiting-friend-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,10,16,0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  gap: 10px;
  pointer-events: none;
}
#bvb-waiting-friend-overlay.hidden { display: none; }
.bvb-wf-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary, #e6edf3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bvb-wf-sub {
  font-size: 0.82rem;
  color: var(--text-muted, #8b949e);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}


/* ── Player Registry (sparkmastertapethegod easter egg) ───────── */
.player-registry-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.pr-loading {
  font-size: 0.8rem;
  color: var(--text-muted, #8b949e);
  padding: 6px 0;
}
.pr-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  font-size: 0.77rem;
}
.pr-row:nth-child(even) { background: rgba(255,255,255,0.055); }
.pr-rank {
  width: 18px;
  text-align: right;
  color: rgba(255,255,255,0.25);
  font-size: 0.68rem;
  flex-shrink: 0;
}
.pr-avatar {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.pr-name {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-stat {
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.pr-won { color: rgba(100,220,140,0.7); }
.pr-pct {
  color: rgba(200,148,74,0.75);
  min-width: 34px;
  text-align: right;
}
.pr-date {
  color: rgba(255,255,255,0.22);
  font-size: 0.67rem;
  flex-shrink: 0;
}

/* ── Zero-chips modal ─────────────────────────────────────────────────────── */
.zc-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.zc-modal.hidden { display: none; }
.zc-card {
  background: #17181f;
  border: 1px solid rgba(200,160,60,0.3);
  border-radius: 18px;
  padding: 2rem 1.75rem 1.75rem;
  max-width: 360px;
  width: calc(100% - 2.5rem);
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  overflow: hidden;
  position: relative;
  transition: background-image 0.3s ease;
}
.zc-card--gif {
  background-color: #000;
}
.zc-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
  display: none;
}
.zc-card--gif .zc-bg-img {
  display: block;
  position: absolute;
  z-index: 0;
}
.zc-card--gif::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.zc-card--gif > * {
  position: relative;
  z-index: 2;
}
.zc-card--gif .zc-icon {
  display: none;
}
.zc-icon {
  font-size: 2.6rem;
  margin-bottom: 0.6rem;
}
.zc-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}
.zc-body {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
  line-height: 1.45;
}
.zc-hint {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  margin-top: 0.85rem;
  margin-bottom: 0;
}
.zc-hint a {
  color: #f0c040;
  text-decoration: none;
}
.zc-hint a:hover {
  text-decoration: underline;
}
.zc-input-row {
  margin-bottom: 0.5rem;
}
.zc-code-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
  outline: none;
  min-width: 0;
}
.zc-code-input:focus {
  border-color: rgba(200,160,60,0.5);
  background: rgba(255,255,255,0.1);
}
.zc-redeem-btn {
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
  flex: 1;
}
.zc-btn-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
.zc-result {
  font-size: 0.82rem;
  min-height: 1.1em;
  margin-bottom: 0.5rem;
}
.zc-result--ok  { color: #4ade80; }
.zc-result--err { color: #f87171; }
.zc-close-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.55);
  border-radius: 8px;
  font-size: 0.83rem;
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex: 1;
}
.zc-close-btn:hover {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
}

/* ── Mobile account dropdown: full-width sheet ───────────────── */
@keyframes lmh-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (pointer: coarse), (max-width: 768px) {
  .lobby-av-menu--open {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: auto;
    min-width: auto;
    border-radius: 0 0 16px 16px;
    border-top: none;
    border-left: 1px solid rgba(200,148,74,0.22);
    border-right: 1px solid rgba(200,148,74,0.22);
    border-bottom: 1px solid rgba(200,148,74,0.22);
    background: #0a1535;
    box-shadow: 0 16px 48px rgba(0,0,0,0.75);
    padding: 0.25rem 1rem 1.25rem;
    animation: lmh-drop 0.18s ease;
  }
  .lobby-av-menu-hdr {
    padding: 0.9rem 0.25rem 0.65rem;
  }
  .lobby-av-menu-hdr-av {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border-color: rgba(200,148,74,0.3);
  }
  .lobby-av-menu-hdr-name {
    font-size: 1.05rem;
    font-weight: 800;
    max-width: none;
    flex: 1;
  }
  .lobby-av-menu-divider {
    margin: 0.35rem 0;
    background: rgba(200,148,74,0.15);
  }
  .lobby-av-menu-item {
    padding: 0.9rem 0.75rem;
    font-size: 0.98rem;
    border-radius: 10px;
    gap: 0.8rem;
  }
  .lobby-av-menu-item .material-symbols-rounded {
    font-size: 1.35rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MULTI-PLAYER SEAT SLOTS (seats 2–5) — 4-player and 6-player layouts
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden by default (2-player games) */
.seat-slot {
  display: none;
  position: absolute;
  z-index: 2;
  width: 180px;
}

/* ── 4-player layout ──────────────────────────────────────────────────────── */
/* seat 1: middle-left (CW: bottom→left→top→right) */
.poker-table[data-count="4"] .seat-slot[data-seat="1"] {
  display: block;
  left: -107px;
  top: 50%;
  transform: translateY(-50%);
}
/* seat 3: middle-right */
.poker-table[data-count="4"] .seat-slot[data-seat="3"] {
  display: block;
  right: -106px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── 3-player layout (after first elimination) ───────────────────────────── */
/* seat 1: left rail (Teddy survives) */
.poker-table[data-count="3"] .seat-slot[data-seat="1"] {
  display: block;
  left: -90px;
  top: 50%;
  transform: translateY(-50%);
}
/* seat 2: right rail (Freddy survives after reindex) */
.poker-table[data-count="3"] .seat-slot[data-seat="2"] {
  display: block;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── 6-player layout: 2 on top, 2 on bottom, 1 each side ────────────────── */
/* seat 2: top-left area (second top seat alongside opp at top-center) */
.poker-table[data-count="6"] .seat-slot[data-seat="2"] {
  display: block;
  top: 5%;
  left: 15%;
}
/* seat 3: left rail */
.poker-table[data-count="6"] .seat-slot[data-seat="3"] {
  display: block;
  left: -90px;
  top: 50%;
  transform: translateY(-50%);
}
/* seat 4: bottom-right area (second bottom seat alongside hero at bottom-center) */
.poker-table[data-count="6"] .seat-slot[data-seat="4"] {
  display: block;
  bottom: 5%;
  right: 15%;
}
/* seat 5: right rail */
.poker-table[data-count="6"] .seat-slot[data-seat="5"] {
  display: block;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
}

/* Bet stacks for extra seats */
.seat-slot .bet-stack {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
/* Seat on left rail: stack to right of plaque, top-aligned, grows rightward */
.poker-table[data-count="3"] .seat-slot[data-seat="1"] .bet-stack,
.poker-table[data-count="4"] .seat-slot[data-seat="1"] .bet-stack,
.poker-table[data-count="6"] .seat-slot[data-seat="3"] .bet-stack {
  left: calc(100% + 17px);
  bottom: auto;
  top: 0;
  transform: none;
  align-items: center;
  width: auto;
}
/* Seat on right rail: stack to left of plaque, top-aligned, grows leftward */
.poker-table[data-count="3"] .seat-slot[data-seat="2"] .bet-stack,
.poker-table[data-count="4"] .seat-slot[data-seat="3"] .bet-stack,
.poker-table[data-count="6"] .seat-slot[data-seat="5"] .bet-stack {
  left: auto;
  right: calc(100% + 17px);
  bottom: auto;
  top: 0;
  transform: none;
  align-items: center;
  width: auto;
}
/* Right-rail chip columns expand leftward */
.poker-table[data-count="3"] .seat-slot[data-seat="2"] .chip-tower,
.poker-table[data-count="4"] .seat-slot[data-seat="3"] .chip-tower,
.poker-table[data-count="6"] .seat-slot[data-seat="5"] .chip-tower {
  flex-direction: row-reverse;
}

/* Side-seat cards: peek above the plaque the same amount as top/bottom players.
   Card-row stays out of flow (absolute) so seat-slot height = plaque only,
   preserving vertical centering on the table edge. The 30px overlap matches
   .player-area.opponent .plaque-row { margin-top: -30px }. */
.seat-slot .card-row {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 36px);
  transform: translateX(-50%);
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
/* Plaque renders in front of the overlapping card bottoms */
.seat-slot .plaque-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

/* Side-seat bet stacks: pop-in animation must end at transform:none so the
   fill-mode doesn't clobber the per-seat transform:none positioning rule.
   (The base stackPopIn ends at translateX(-50%) which overrides transform:none
   after the animation, causing the stack to jump on re-render.) */
@keyframes seatStackPopIn {
  0%   { opacity: 0; scale: 0.65; }
  65%  { scale: 1.07; }
  100% { opacity: 1; scale: 1; }
}
.seat-slot .bet-stack:not(.hidden):not(.no-pop) {
  animation: seatStackPopIn 0.22s ease-out both;
}

/* Active-turn highlight for extra seats (no timer bar — use border glow instead) */
@keyframes seatActivePulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--table-rim2), 0 0 10px 2px rgba(212,175,55,0.30); }
  50%       { box-shadow: 0 0 0 2px var(--table-rim2), 0 0 18px 5px rgba(212,175,55,0.55); }
}
.seat-slot .player-info-box.active-turn {
  animation: seatActivePulse 1.4s ease-in-out infinite;
}
.seat-slot.active-turn .player-info-box {
  border-color: var(--table-rim2);
}

/* Folded seat — no dimming; cards already animate away */
.seat-slot.is-folded {
  /* intentionally no dimming — plaque stays fully visible */
}

/* Eliminated seat — greyed-out for busted players */
.seat-slot.is-eliminated {
  opacity: 0.35;
  filter: saturate(0) brightness(0.7);
  pointer-events: none;
}

/* ── Dealer button positions for extra seats ───────────────────────────────
   Default .dealer-btn-corner sits at top:-41px (above plaque).
   Side seats: below the plaque, on the table-center side (right for left rail,
   left for right rail) so it's visible on the felt. */
/* Left rail seats — button to right of plaque */
.poker-table[data-count="3"] .seat-slot[data-seat="1"] .dealer-btn-corner,
.poker-table[data-count="4"] .seat-slot[data-seat="1"] .dealer-btn-corner,
.poker-table[data-count="6"] .seat-slot[data-seat="3"] .dealer-btn-corner {
  top: auto;
  bottom: -30px;
  left: auto;
  right: -8px;
}
/* Right rail seats — button to left of plaque */
.poker-table[data-count="3"] .seat-slot[data-seat="2"] .dealer-btn-corner,
.poker-table[data-count="4"] .seat-slot[data-seat="3"] .dealer-btn-corner,
.poker-table[data-count="6"] .seat-slot[data-seat="5"] .dealer-btn-corner {
  top: auto;
  bottom: -30px;
  right: auto;
  left: -8px;
}


/* ═══════════════════════════════════════════════════════════════
   UI Skins — html[data-skin] overrides
   
   Modelled after standard iOS / app light and dark modes.
   
   Scope: lobby + modals ONLY — game table (#table-screen) is
   intentionally NOT affected by skins.
   
   "default" = the existing blue-navy Costanza brand look.
   "dark"    = true iOS-style dark mode (charcoal surfaces, no blue/gold tint)
   "light"   = true iOS-style light mode (white surfaces, dark text, system gray)
   "auto"    = follows device prefers-color-scheme
   ═══════════════════════════════════════════════════════════════ */

/* ── Lobby skin / theme picker widget ────────────────────────── */
.lobby-skin-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem 1rem 0;
  margin-top: 0.25rem;
}
.lobby-skin-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lobby-skin-picker { display: flex; gap: 5px; }
#lobby-skin-picker .lobby-skin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px 4px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}
#lobby-skin-picker .lobby-skin-btn:hover {
  border-color: var(--accent-border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transform: translateY(-1px);
}
#lobby-skin-picker .lobby-skin-btn.selected {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.lobby-skin-swatch {
  width: 38px; height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.10);
}
.lss-default { background: linear-gradient(135deg, #1e3a82 0%, #0a1535 100%); }
.lss-dark    { background: linear-gradient(135deg, #1c1c1e 0%, #000000 100%); }
.lss-light   { background: linear-gradient(135deg, #f2f2f7 0%, #ffffff 100%); border-color: rgba(0,0,0,0.12); }
.lss-auto    { background: linear-gradient(135deg, #1c1c1e 0%, #1c1c1e 50%, #f2f2f7 50%, #ffffff 100%); }


/* ═══════════════════════════════════════════════════════════════
   SKIN: DARK — iOS-style dark mode
   Charcoal surfaces (#1C1C1E), no blue or gold tint.
   System gray separators, blue accent (#0A84FF).
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="dark"] {
  background: #000000 !important;
}
html[data-skin="dark"] body {
  --bg-dark:        #000000;
  --bg-card:        #1c1c1e;
  --bg-card2:       #2c2c2e;
  --bg-surface:     #2c2c2e;
  --bg-surface2:    #3a3a3c;
  --bg-input:       #1c1c1e;
  --text-primary:   #ffffff;
  --text-secondary: #ebebf5;
  --text-muted:     #8e8e93;
  --border:         rgba(84,84,88,0.65);
  --border-strong:  rgba(84,84,88,0.85);
  --accent:         #0a84ff;
  --accent-bg:      rgba(10,132,255,0.15);
  --accent-border:  rgba(10,132,255,0.40);
  --gold:           #8e8e93;
  --gold-light:     #aeaeb2;
  --gold-dim:       #636366;
  --shadow:         none;
  --shadow-lg:      none;
  --shadow-card:    none;
  background:       #000000 !important;
  color:            #ffffff !important;
}

/* ── Dark: layout ─────────────── */
html[data-skin="dark"] #lobby {
  background: #000000 !important;
}
html[data-skin="dark"] .lobby-card {
  background: #1c1c1e !important;
  border-color: rgba(84,84,88,0.65) !important;
  box-shadow: none !important;
}
html[data-skin="dark"] .lobby-logo {
  border-bottom-color: rgba(84,84,88,0.45) !important;
}
html[data-skin="dark"] .lobby-logo h1,
html[data-skin="dark"] .logo-word-costanza { color: #ffffff !important; }
html[data-skin="dark"] .logo-word-poker   { color: #aeaeb2 !important; }
html[data-skin="dark"] .lobby-logo p      { color: #8e8e93 !important; }
html[data-skin="dark"] .lobby-logo-suits  { color: rgba(142,142,147,0.15) !important; }

/* ── Dark: mobile header ───────── */
html[data-skin="dark"] .lobby-mobile-header {
  background: rgba(28,28,30,0.94) !important;
  border-bottom-color: rgba(84,84,88,0.65) !important;
}
html[data-skin="dark"] .lmh-logo .logo-word-costanza { color: #ffffff !important; }
html[data-skin="dark"] .lmh-logo .logo-word-poker    { color: #8e8e93 !important; }

/* ── Dark: hero section ────────── */
html[data-skin="dark"] .ls-hero-eyebrow   { color: #8e8e93 !important; }
html[data-skin="dark"] .ls-hero-headline   { color: #ffffff !important; }
html[data-skin="dark"] .ls-hero-headline em { color: #0a84ff !important; }
html[data-skin="dark"] .ls-hero-sub        { color: #8e8e93 !important; }

/* ── Dark: account/chip pill ───── */
html[data-skin="dark"] .lobby-av-btn {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,0.65) !important;
  color: #ffffff !important;
}
html[data-skin="dark"] .lobby-av-sep    { background: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .lobby-av-cog    { color: #8e8e93 !important; }
html[data-skin="dark"] .lobby-av-name   { color: #ffffff !important; }
html[data-skin="dark"] .lobby-av-chips  { color: #ebebf5 !important; }
html[data-skin="dark"] .lobby-av-menu {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,0.65) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.50) !important;
}
html[data-skin="dark"] .lobby-av-menu-item       { color: #ffffff !important; }
html[data-skin="dark"] .lobby-av-menu-item:hover { background: rgba(84,84,88,0.35) !important; }

/* ── Dark: section labels + timeline ── */
html[data-skin="dark"] .ls-label   { color: #8e8e93 !important; }
html[data-skin="dark"] .ls-rail    { border-left-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .ls-num {
  background: #0a84ff !important;
  border-color: rgba(10,132,255,0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.15) !important;
}

/* ── Dark: buttons (mode tabs, speed, table size, Get Link) ── */
html[data-skin="dark"] .mode-tab,
html[data-skin="dark"] .game-mode-btn,
html[data-skin="dark"] .lv2-speed-btn {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,0.65) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] .game-mode-btn .gmb-desc,
html[data-skin="dark"] .lv2-speed-btn .lv2-speed-sub { color: #8e8e93 !important; }
@media (hover: hover) {
  html[data-skin="dark"] .mode-tab:hover,
  html[data-skin="dark"] .game-mode-btn:hover,
  html[data-skin="dark"] .lv2-speed-btn:hover {
    background: #3a3a3c !important;
    border-color: rgba(10,132,255,0.40) !important;
    color: #ffffff !important;
  }
  html[data-skin="dark"] .lv2-speed-btn:disabled:hover {
    background: #2c2c2e !important;
    border-color: rgba(84,84,88,0.65) !important;
    color: #636366 !important;
    opacity: 0.45;
  }
}
html[data-skin="dark"] .mode-tab.active,
html[data-skin="dark"] .game-mode-btn.active,
html[data-skin="dark"] .lv2-speed-btn.active {
  background: #0a84ff !important;
  border-color: #0a84ff !important;
  color: #ffffff !important;
}
html[data-skin="dark"] .mode-tab.active .mt-name,
html[data-skin="dark"] .game-mode-btn.active .gmb-desc,
html[data-skin="dark"] .lv2-speed-btn.active .lv2-speed-sub { color: rgba(255,255,255,0.70) !important; }
html[data-skin="dark"] .lv2-players-label { color: #8e8e93 !important; }

/* Get Link / primary button */
html[data-skin="dark"] .btn-primary {
  background: #0a84ff !important;
  border-color: #0a84ff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  html[data-skin="dark"] .btn-primary:hover {
    background: #409cff !important;
    border-color: #409cff !important;
  }
}

/* ── Dark: name input ──────────── */
html[data-skin="dark"] .lv2-name-input {
  background: #1c1c1e !important;
  border-color: rgba(84,84,88,0.65) !important;
  color: #ffffff !important;
}
html[data-skin="dark"] .lv2-name-input::placeholder { color: #636366 !important; }
html[data-skin="dark"] .lv2-name-input:focus {
  border-color: #0a84ff !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.15) !important;
}

/* ── Dark: utility bar ─────────── */
html[data-skin="dark"] .lv2-util-bar { border-top-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .lv2-util-btn {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,0.65) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] .lv2-util-btn .material-symbols-rounded { color: #0a84ff !important; }
@media (hover: hover) {
  html[data-skin="dark"] .lv2-util-btn:hover {
    background: #3a3a3c !important;
    border-color: rgba(10,132,255,0.40) !important;
  }
}

/* ── Dark: sidebar ─────────────── */
html[data-skin="dark"] #s2-sidebar {
  background: #1c1c1e !important;
  border-color: rgba(84,84,88,0.65) !important;
}
html[data-skin="dark"] #s2-sidebar::before { background: linear-gradient(90deg, transparent, rgba(84,84,88,0.45), transparent) !important; }
html[data-skin="dark"] .s2-profile-hero { border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .s2-profile-hero .s2-name { color: #ffffff !important; }
html[data-skin="dark"] .s2-profile-hero .s2-chips { color: #ebebf5 !important; }
html[data-skin="dark"] #s2-sidebar .lobby-tab-btn {
  background: transparent !important;
  border-bottom-color: rgba(84,84,88,0.25) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] #s2-sidebar .lobby-tab-btn .lobby-tab-text strong { color: #ebebf5 !important; }
html[data-skin="dark"] #s2-sidebar .lobby-tab-btn .lobby-tab-text span  { color: #8e8e93 !important; }
html[data-skin="dark"] #s2-sidebar .lobby-tab-btn .material-symbols-rounded { color: #0a84ff !important; }
html[data-skin="dark"] #s2-sidebar .lobby-tab-btn.s2-active {
  background: rgba(10,132,255,0.12) !important;
  border-color: rgba(10,132,255,0.40) !important;
}
html[data-skin="dark"] #s2-sidebar .lobby-tab-btn.s2-active::after { background: #0a84ff !important; }
html[data-skin="dark"] #s2-sidebar .lobby-tab-btn .lobby-tab-q {
  border-color: rgba(84,84,88,0.65) !important;
  color: #8e8e93 !important;
}
html[data-skin="dark"] #s2-sidebar .lv2-util-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(84,84,88,0.25) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] #s2-sidebar .lv2-util-btn .material-symbols-rounded { color: #0a84ff !important; }
html[data-skin="dark"] .s2-bwars-banner {
  background: rgba(10,132,255,0.05) !important;
  border-top-color: rgba(84,84,88,0.45) !important;
}
html[data-skin="dark"] .s2-bwars-banner::before { background: linear-gradient(90deg, transparent, rgba(10,132,255,0.25), transparent) !important; }

/* ── Dark: bottom tabs (mobile) ── */
html[data-skin="dark"] .lobby-tabs-wrap {
  background: #1c1c1e !important;
  border-color: rgba(84,84,88,0.65) !important;
  box-shadow: none !important;
}
html[data-skin="dark"] .lobby-tab-btn {
  background: transparent !important;
  border-right-color: rgba(84,84,88,0.35) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] .lobby-tab-btn.active {
  background: rgba(10,132,255,0.10) !important;
  border-bottom-color: #0a84ff !important;
}
html[data-skin="dark"] .lobby-tab-text strong { color: #ebebf5 !important; }
html[data-skin="dark"] .lobby-tab-text span   { color: #8e8e93 !important; }
html[data-skin="dark"] .lobby-tab-q {
  border-color: rgba(84,84,88,0.65) !important;
  color: #8e8e93 !important;
}

/* ── Dark: avatar picks ────────── */
html[data-skin="dark"] .avatar-pick      { border-color: rgba(84,84,88,0.65) !important; background: #2c2c2e !important; }
html[data-skin="dark"] .avatar-pick.selected { border-color: #0a84ff !important; background: rgba(10,132,255,0.12) !important; }
html[data-skin="dark"] .avatar-pick-more { border-color: rgba(84,84,88,0.65) !important; background: #2c2c2e !important; color: #8e8e93 !important; }

/* ── Dark: skin picker ─────────── */
html[data-skin="dark"] #lobby-skin-picker .lobby-skin-btn {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,0.65) !important;
  color: #8e8e93 !important;
}
html[data-skin="dark"] #lobby-skin-picker .lobby-skin-btn:hover    { background: #3a3a3c !important; border-color: rgba(10,132,255,0.40) !important; color: #ebebf5 !important; }
html[data-skin="dark"] #lobby-skin-picker .lobby-skin-btn.selected { border-color: #0a84ff !important; background: rgba(10,132,255,0.15) !important; color: #0a84ff !important; }

/* ── Dark: footer & rules ──────── */
html[data-skin="dark"] .lobby-rules-blurb { color: #636366 !important; }
html[data-skin="dark"] .lobby-footer,
html[data-skin="dark"] .lobby-footer a    { color: #636366 !important; }

/* ── Dark: modals ──────────────── */
html[data-skin="dark"] .modal-overlay  { background: rgba(0,0,0,0.70) !important; }
html[data-skin="dark"] .modal-dialog   { background: #1c1c1e !important; border-color: rgba(84,84,88,0.65) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.50) !important; }
html[data-skin="dark"] .modal-header   { background: rgba(44,44,46,0.6) !important; border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .modal-title    { color: #ffffff !important; }
html[data-skin="dark"] .modal-close    { color: #8e8e93 !important; }
html[data-skin="dark"] .modal-close:hover { color: #ffffff !important; }
html[data-skin="dark"] .modal-body     { color: #ebebf5 !important; }
html[data-skin="dark"] .settings-group-title { color: #8e8e93 !important; }
html[data-skin="dark"] .settings-label { color: #ebebf5 !important; }
html[data-skin="dark"] .settings-row   { border-bottom-color: rgba(84,84,88,0.25) !important; }
html[data-skin="dark"] .settings-row label { color: #ebebf5 !important; }
html[data-skin="dark"] .seg-ctrl       { background: #2c2c2e !important; border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .seg-btn        { color: #ebebf5 !important; }
html[data-skin="dark"] .seg-btn.selected { background: #3a3a3c !important; color: #ffffff !important; }
html[data-skin="dark"] .chip-seg-btn   { background: #2c2c2e !important; border-color: rgba(84,84,88,0.65) !important; color: #ebebf5 !important; }
html[data-skin="dark"] .chip-seg-btn.selected { background: #0a84ff !important; border-color: #0a84ff !important; color: #ffffff !important; }
html[data-skin="dark"] .deck-btn       { border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .deck-btn.selected { border-color: #0a84ff !important; }
html[data-skin="dark"] .table-color-btn { border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .table-color-btn.selected { border-color: #0a84ff !important; }
html[data-skin="dark"] .htp-section-title { color: #ffffff !important; }
html[data-skin="dark"] .htp-subsec-title  { color: #ebebf5 !important; }
html[data-skin="dark"] .htp-body          { color: #ebebf5 !important; }


/* ═══════════════════════════════════════════════════════════════
   SKIN: LIGHT — iOS-style light mode
   White surfaces (#FFFFFF), system gray separators, dark text.
   System blue accent (#007AFF).
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="light"] {
  background: #f2f2f7 !important;
}
html[data-skin="light"] body {
  --bg-dark:        #f2f2f7;
  --bg-card:        #ffffff;
  --bg-card2:       #f2f2f7;
  --bg-surface:     #e5e5ea;
  --bg-surface2:    #d1d1d6;
  --bg-input:       #ffffff;
  --text-primary:   #000000;
  --text-secondary: #3c3c43;
  --text-muted:     #8e8e93;
  --border:         rgba(60,60,67,0.12);
  --border-strong:  rgba(60,60,67,0.29);
  --accent:         #007aff;
  --accent-bg:      rgba(0,122,255,0.10);
  --accent-border:  rgba(0,122,255,0.35);
  --gold:           #8e8e93;
  --gold-light:     #636366;
  --gold-dim:       #aeaeb2;
  --shadow:         0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg:      0 4px 12px rgba(0,0,0,0.10);
  --shadow-card:    0 1px 4px rgba(0,0,0,0.06);
  background:       #f2f2f7 !important;
  color:            #000000 !important;
}

/* ── Light: layout ─────────────── */
html[data-skin="light"] #lobby {
  background: #f2f2f7 !important;
}
html[data-skin="light"] .lobby-card {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
html[data-skin="light"] .lobby-logo {
  border-bottom-color: rgba(60,60,67,0.12) !important;
}
html[data-skin="light"] .lobby-logo h1,
html[data-skin="light"] .logo-word-costanza { color: #000000 !important; }
html[data-skin="light"] .logo-word-poker   { color: #8e8e93 !important; }
html[data-skin="light"] .lobby-logo p      { color: #8e8e93 !important; }
html[data-skin="light"] .lobby-logo-suits  { color: rgba(60,60,67,0.06) !important; }

/* ── Light: mobile header ──────── */
html[data-skin="light"] .lobby-mobile-header {
  background: rgba(242,242,247,0.94) !important;
  border-bottom: 1px solid rgba(60,60,67,0.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-skin="light"] .lmh-logo .logo-word-costanza { color: #000000 !important; }
html[data-skin="light"] .lmh-logo .logo-word-poker    { color: #8e8e93 !important; }

/* ── Light: hero section ───────── */
html[data-skin="light"] .ls-hero-eyebrow   { color: #8e8e93 !important; }
html[data-skin="light"] .ls-hero-headline   { color: #000000 !important; }
html[data-skin="light"] .ls-hero-headline em { color: #007aff !important; }
html[data-skin="light"] .ls-hero-sub        { color: #8e8e93 !important; }

/* ── Light: account/chip pill ────── */
html[data-skin="light"] .lobby-av-btn {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  color: #000000 !important;
}
html[data-skin="light"] .lobby-av-sep    { background: rgba(60,60,67,0.15) !important; }
html[data-skin="light"] .lobby-av-cog    { color: #8e8e93 !important; }
html[data-skin="light"] .lobby-av-name   { color: #000000 !important; }
html[data-skin="light"] .lobby-av-chips  { color: #3c3c43 !important; }
html[data-skin="light"] .lobby-av-menu {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}
html[data-skin="light"] .lobby-av-menu-item       { color: #000000 !important; }
html[data-skin="light"] .lobby-av-menu-item:hover { background: #f2f2f7 !important; }

/* ── Light: section labels + timeline ── */
html[data-skin="light"] .ls-label   { color: #8e8e93 !important; }
html[data-skin="light"] .ls-rail    { border-left-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .ls-num {
  background: #007aff !important;
  border-color: rgba(0,122,255,0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12) !important;
}

/* ── Light: buttons (mode tabs, speed, table size) ── */
html[data-skin="light"] .mode-tab,
html[data-skin="light"] .game-mode-btn,
html[data-skin="light"] .lv2-speed-btn {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  color: #3c3c43 !important;
}
html[data-skin="light"] .game-mode-btn .gmb-desc,
html[data-skin="light"] .game-mode-btn .gmb-name,
html[data-skin="light"] .lv2-speed-btn .lv2-speed-sub { color: #8e8e93 !important; }
@media (hover: hover) {
  html[data-skin="light"] .mode-tab:hover,
  html[data-skin="light"] .game-mode-btn:hover,
  html[data-skin="light"] .lv2-speed-btn:hover {
    background: #e5e5ea !important;
    border-color: rgba(0,122,255,0.35) !important;
    color: #000000 !important;
  }
  html[data-skin="light"] .lv2-speed-btn:disabled:hover {
    background: #ffffff !important;
    border-color: rgba(60,60,67,0.12) !important;
    color: #aeaeb2 !important;
  }
}
html[data-skin="light"] .mode-tab.active,
html[data-skin="light"] .game-mode-btn.active,
html[data-skin="light"] .lv2-speed-btn.active {
  background: #007aff !important;
  border-color: #007aff !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.25) !important;
}
html[data-skin="light"] .mode-tab.active .mt-name,
html[data-skin="light"] .game-mode-btn.active .gmb-desc,
html[data-skin="light"] .game-mode-btn.active .gmb-name,
html[data-skin="light"] .lv2-speed-btn.active .lv2-speed-sub { color: rgba(255,255,255,0.75) !important; }
html[data-skin="light"] .lv2-players-label { color: #8e8e93 !important; }

/* Get Link / primary button */
html[data-skin="light"] .btn-primary {
  background: #007aff !important;
  border-color: #007aff !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.25) !important;
}
@media (hover: hover) {
  html[data-skin="light"] .btn-primary:hover {
    background: #0071e3 !important;
    border-color: #0071e3 !important;
    box-shadow: 0 4px 12px rgba(0,122,255,0.35) !important;
  }
}

/* ── Light: name input ─────────── */
html[data-skin="light"] .lv2-name-input {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.18) !important;
  color: #000000 !important;
}
html[data-skin="light"] .lv2-name-input::placeholder { color: #aeaeb2 !important; }
html[data-skin="light"] .lv2-name-input:focus {
  border-color: #007aff !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12) !important;
  background: #ffffff !important;
}

/* ── Light: utility bar ────────── */
html[data-skin="light"] .lv2-util-bar { border-top-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .lv2-util-btn {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  color: #3c3c43 !important;
}
html[data-skin="light"] .lv2-util-btn .material-symbols-rounded { color: #007aff !important; }
@media (hover: hover) {
  html[data-skin="light"] .lv2-util-btn:hover {
    background: #e5e5ea !important;
    border-color: rgba(0,122,255,0.35) !important;
    color: #007aff !important;
  }
}

/* ── Light: sidebar ────────────── */
html[data-skin="light"] #s2-sidebar {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
}
html[data-skin="light"] #s2-sidebar::before { background: linear-gradient(90deg, transparent, rgba(60,60,67,0.10), transparent) !important; }
html[data-skin="light"] .s2-profile-hero { border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .s2-profile-hero .s2-name { color: #000000 !important; }
html[data-skin="light"] .s2-profile-hero .s2-chips { color: #3c3c43 !important; }
html[data-skin="light"] .s2-profile-hero .s2-edit-btn { color: #8e8e93 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] #s2-sidebar .lobby-tab-btn {
  background: transparent !important;
  border-bottom-color: rgba(60,60,67,0.08) !important;
  color: #3c3c43 !important;
}
html[data-skin="light"] #s2-sidebar .lobby-tab-btn .lobby-tab-text strong { color: #000000 !important; }
html[data-skin="light"] #s2-sidebar .lobby-tab-btn .lobby-tab-text span  { color: #8e8e93 !important; }
html[data-skin="light"] #s2-sidebar .lobby-tab-btn .material-symbols-rounded { color: #007aff !important; }
html[data-skin="light"] #s2-sidebar .lobby-tab-btn.s2-active {
  background: rgba(0,122,255,0.08) !important;
  border-color: rgba(0,122,255,0.25) !important;
}
html[data-skin="light"] #s2-sidebar .lobby-tab-btn.s2-active::after { background: #007aff !important; }
html[data-skin="light"] #s2-sidebar .lobby-tab-btn .lobby-tab-q {
  border-color: rgba(60,60,67,0.15) !important;
  color: #8e8e93 !important;
}
html[data-skin="light"] #s2-sidebar .lv2-util-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(60,60,67,0.08) !important;
  color: #3c3c43 !important;
}
html[data-skin="light"] #s2-sidebar .lv2-util-btn .material-symbols-rounded { color: #007aff !important; }
@media (hover: hover) {
  html[data-skin="light"] #s2-sidebar .lobby-tab-btn:hover,
  html[data-skin="light"] #s2-sidebar .lv2-util-btn:hover {
    background: #f2f2f7 !important;
  }
}
html[data-skin="light"] .s2-bwars-banner {
  background: rgba(0,122,255,0.04) !important;
  border-top-color: rgba(60,60,67,0.12) !important;
}
html[data-skin="light"] .s2-bwars-banner::before { background: linear-gradient(90deg, transparent, rgba(0,122,255,0.15), transparent) !important; }

/* ── Light: bottom tabs (mobile) ── */
html[data-skin="light"] .lobby-tabs-wrap {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.05) !important;
}
html[data-skin="light"] .lobby-tab-btn {
  background: transparent !important;
  border-right-color: rgba(60,60,67,0.10) !important;
  border-bottom-color: transparent !important;
  color: #3c3c43 !important;
}
@media (hover: hover) {
  html[data-skin="light"] .lobby-tab-btn:hover {
    background: #f2f2f7 !important;
  }
}
html[data-skin="light"] .lobby-tab-btn.active {
  background: rgba(0,122,255,0.06) !important;
  border-bottom-color: #007aff !important;
}
html[data-skin="light"] .lobby-tab-text strong { color: #000000 !important; }
html[data-skin="light"] .lobby-tab-text span   { color: #8e8e93 !important; }
html[data-skin="light"] .lobby-tab-q {
  border-color: rgba(60,60,67,0.15) !important;
  color: #8e8e93 !important;
}

/* ── Light: avatar picks ──────── */
html[data-skin="light"] .avatar-pick      { border-color: rgba(60,60,67,0.12) !important; background: #f2f2f7 !important; }
html[data-skin="light"] .avatar-pick.selected { border-color: #007aff !important; background: rgba(0,122,255,0.08) !important; }
html[data-skin="light"] .avatar-pick-more { border-color: rgba(60,60,67,0.12) !important; background: #f2f2f7 !important; color: #8e8e93 !important; }

/* ── Light: skin picker ────────── */
html[data-skin="light"] #lobby-skin-picker .lobby-skin-btn {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  color: #8e8e93 !important;
}
html[data-skin="light"] #lobby-skin-picker .lobby-skin-btn:hover    { background: #e5e5ea !important; border-color: rgba(0,122,255,0.35) !important; color: #3c3c43 !important; }
html[data-skin="light"] #lobby-skin-picker .lobby-skin-btn.selected { border-color: #007aff !important; background: rgba(0,122,255,0.10) !important; color: #007aff !important; }
html[data-skin="light"] .lobby-skin-swatch { border-color: rgba(60,60,67,0.12) !important; }

/* ── Light: footer & rules ─────── */
html[data-skin="light"] .lobby-rules-blurb { color: #8e8e93 !important; background: #f2f2f7 !important; }
html[data-skin="light"] .lobby-footer,
html[data-skin="light"] .lobby-footer a    { color: #aeaeb2 !important; }

/* ── Light: modals ─────────────── */
html[data-skin="light"] .modal-overlay  { background: rgba(0,0,0,0.30) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
html[data-skin="light"] .modal-dialog   { background: #ffffff !important; border-color: rgba(60,60,67,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
html[data-skin="light"] .modal-header   { background: #f2f2f7 !important; border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .modal-title    { color: #000000 !important; }
html[data-skin="light"] .modal-close    { color: #8e8e93 !important; }
html[data-skin="light"] .modal-close:hover { color: #000000 !important; }
html[data-skin="light"] .modal-body     { color: #3c3c43 !important; }
html[data-skin="light"] .settings-group-title { color: #8e8e93 !important; }
html[data-skin="light"] .settings-label { color: #3c3c43 !important; }
html[data-skin="light"] .settings-row   { border-bottom-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] .settings-row label { color: #3c3c43 !important; }
html[data-skin="light"] .seg-ctrl       { background: #e5e5ea !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .seg-btn        { color: #3c3c43 !important; }
html[data-skin="light"] .seg-btn.selected { background: #ffffff !important; color: #007aff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; }
html[data-skin="light"] .chip-seg-btn   { background: #ffffff !important; border-color: rgba(60,60,67,0.12) !important; color: #3c3c43 !important; }
html[data-skin="light"] .chip-seg-btn.selected { background: #007aff !important; border-color: #007aff !important; color: #ffffff !important; }
html[data-skin="light"] .deck-btn       { border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .deck-btn.selected { border-color: #007aff !important; }
html[data-skin="light"] .table-color-btn { border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .table-color-btn.selected { border-color: #007aff !important; box-shadow: 0 0 0 2px rgba(0,122,255,0.20) !important; }

/* ── Light: How to Play ────────── */
html[data-skin="light"] .htp-section-title { color: #000000 !important; }
html[data-skin="light"] .htp-subsec-title  { color: #3c3c43 !important; }
html[data-skin="light"] .htp-body          { color: #3c3c43 !important; }
html[data-skin="light"] .htp-tabs          { border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .htp-tab           { color: #8e8e93 !important; }
html[data-skin="light"] .htp-tab.active    { color: #007aff !important; border-bottom-color: #007aff !important; }
html[data-skin="light"] .htp-tagline       { color: #3c3c43 !important; }
html[data-skin="light"] .htp-rank-name     { color: #3c3c43 !important; }
html[data-skin="light"] .htp-rank-note     { color: #8e8e93 !important; }
html[data-skin="light"] .htp-list li       { color: #3c3c43 !important; }
html[data-skin="light"] .htp-blind-table th { background: #f2f2f7 !important; color: #8e8e93 !important; border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .htp-blind-table td { color: #3c3c43 !important; border-bottom-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] .htp-blind-table tr:hover td { background: rgba(0,0,0,0.02) !important; }
html[data-skin="light"] .htp-speed-name    { color: #000000 !important; }
html[data-skin="light"] .htp-speed-desc    { color: #8e8e93 !important; }
html[data-skin="light"] .htp-struct-note   { color: #8e8e93 !important; }

/* ═══════════════════════════════════════════════════════════════
   SKINS: CONTENT PANELS
   ─ S2 panel (sidebar content), leaderboard, profile,
     achievements, free upgrades, coach, settings, add chips ─
   ═══════════════════════════════════════════════════════════════ */

/* ── DARK: s2-panel (right-side content panels) ──────── */
html[data-skin="dark"] .s2-panel-header {
  background: rgba(28,28,30,0.85) !important;
  border-bottom-color: rgba(84,84,88,0.45) !important;
}
html[data-skin="dark"] .s2-panel-back {
  background: rgba(84,84,88,0.15) !important;
  border-color: rgba(84,84,88,0.45) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] .s2-panel-back:hover {
  background: rgba(84,84,88,0.30) !important;
  color: #ffffff !important;
}
html[data-skin="dark"] .s2-panel-title { color: #ffffff !important; }
html[data-skin="dark"] .s2-panel-body { color: #ebebf5 !important; }
html[data-skin="dark"] #s2-panel { background: #1c1c1e !important; border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] #s2-panel::before { background: linear-gradient(90deg, transparent, rgba(84,84,88,0.45), transparent) !important; }

/* ── DARK: Leaderboard ───────────────────────────── */
html[data-skin="dark"] .lb-dialog { background: #1c1c1e !important; border-color: rgba(84,84,88,0.65) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.50) !important; }
html[data-skin="dark"] .lb-header { background: rgba(44,44,46,0.6) !important; border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .lb-title  { color: #ffffff !important; }
html[data-skin="dark"] .lb-close  { color: #8e8e93 !important; }
html[data-skin="dark"] .lb-close:hover { color: #ffffff !important; }
html[data-skin="dark"] .lb-tabs   { background: rgba(44,44,46,0.4) !important; border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .lb-tab    { color: #8e8e93 !important; }
html[data-skin="dark"] .lb-tab:hover { color: #ebebf5 !important; }
html[data-skin="dark"] .lb-tab.active { color: #0a84ff !important; border-bottom-color: #0a84ff !important; }
html[data-skin="dark"] .lb-body   { color: #ebebf5 !important; scrollbar-color: #3a3a3c transparent !important; }
html[data-skin="dark"] .lb-body::-webkit-scrollbar-thumb { background: #3a3a3c !important; }
html[data-skin="dark"] .lb-loading { color: #8e8e93 !important; }
html[data-skin="dark"] .lb-table thead tr { border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .lb-table th { color: #8e8e93 !important; }
html[data-skin="dark"] .lb-table td { color: #ebebf5 !important; border-bottom-color: rgba(84,84,88,0.20) !important; }
html[data-skin="dark"] .lb-table tbody tr:hover td { background: rgba(255,255,255,0.04) !important; }
html[data-skin="dark"] .lb-table tbody tr.lb-row--me td { background: rgba(10,132,255,0.12) !important; }
html[data-skin="dark"] .lb-table tbody tr.lb-row--me .lb-player-name { color: #0a84ff !important; }
html[data-skin="dark"] .lb-player-name { color: #ffffff !important; }
html[data-skin="dark"] .lb-footer { border-top-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .lb-note   { color: #636366 !important; }
html[data-skin="dark"] #lb-empty  { color: #8e8e93 !important; }
/* Leaderboard mobile card */
html[data-skin="dark"] .lb-mc-pfp { border-right-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .lb-mc-info .lb-player-name { color: #ffffff !important; }
html[data-skin="dark"] .lb-mc-corner--num { color: rgba(255,255,255,0.35) !important; }
html[data-skin="dark"] .lb-mc-stat-val { color: #ebebf5 !important; }
html[data-skin="dark"] .lb-mc-stat-lbl { color: #8e8e93 !important; }

/* ── DARK: Profile ───────────────────────────────── */
html[data-skin="dark"] .profile-dialog { background: #1c1c1e !important; border-color: rgba(84,84,88,0.65) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.50) !important; }
html[data-skin="dark"] .profile-header { background: rgba(44,44,46,0.6) !important; border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .profile-title { color: #ffffff !important; }
html[data-skin="dark"] .profile-close { color: #8e8e93 !important; }
html[data-skin="dark"] .profile-close:hover { color: #ffffff !important; }
html[data-skin="dark"] .profile-body { color: #ebebf5 !important; scrollbar-color: #3a3a3c transparent !important; }
html[data-skin="dark"] .profile-body::-webkit-scrollbar-thumb { background: #3a3a3c !important; }
html[data-skin="dark"] .profile-name { color: #ffffff !important; }
html[data-skin="dark"] .profile-last-played { color: #8e8e93 !important; }
html[data-skin="dark"] .profile-edit-btn { color: #8e8e93 !important; }
html[data-skin="dark"] .profile-edit-btn:hover { color: #ffffff !important; }
html[data-skin="dark"] .profile-avatar { border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .profile-stat-block { background: rgba(44,44,46,0.6) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .profile-stat-val { color: #ffffff !important; }
html[data-skin="dark"] .profile-stat-lbl { color: #8e8e93 !important; }
html[data-skin="dark"] .profile-mode-section-hdr { color: #8e8e93 !important; }
html[data-skin="dark"] .profile-mode-row { background: rgba(44,44,46,0.6) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .profile-mode-sep { background: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .profile-mode-nums span:first-child { color: #ffffff !important; }
html[data-skin="dark"] .profile-mode-lbl { color: #8e8e93 !important; }
html[data-skin="dark"] .profile-section-label { color: #8e8e93 !important; }
html[data-skin="dark"] .profile-badge-tier-label { color: #8e8e93 !important; border-bottom-color: rgba(84,84,88,0.25) !important; }
html[data-skin="dark"] .profile-badge-tile { background: rgba(44,44,46,0.5) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .profile-badge-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }
html[data-skin="dark"] .profile-badge-tile--locked { background: rgba(44,44,46,0.3) !important; border-color: rgba(84,84,88,0.25) !important; }
html[data-skin="dark"] .profile-badge-label { color: #ebebf5 !important; }
html[data-skin="dark"] .profile-badges-empty { color: #636366 !important; }
html[data-skin="dark"] .profile-team-allegiance { color: #ebebf5 !important; }

/* ── DARK: Achievements ──────────────────────────── */
html[data-skin="dark"] .ach-progress-label { color: #ebebf5 !important; }
html[data-skin="dark"] .ach-progress-label strong { color: #ebebf5 !important; }
html[data-skin="dark"] .ach-progress-pct { color: #0a84ff !important; }
html[data-skin="dark"] .ach-progress-bar-track { background: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .ach-progress-bar-fill { background: linear-gradient(90deg, #0a84ff 0%, #409cff 100%) !important; }
html[data-skin="dark"] .ach-tier-heading { color: #8e8e93 !important; border-bottom-color: rgba(84,84,88,0.25) !important; }
html[data-skin="dark"] .ach-card--earned { background: rgba(44,44,46,0.5) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .ach-card--earned:hover { background: rgba(58,58,60,0.6) !important; border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .ach-card--locked { background: rgba(44,44,46,0.25) !important; border-color: rgba(84,84,88,0.20) !important; }
html[data-skin="dark"] .ach-card-label { color: #ebebf5 !important; }
html[data-skin="dark"] .ach-card-desc  { color: #8e8e93 !important; }

/* ── DARK: Free Upgrades (egg-info) ──────────────── */
html[data-skin="dark"] .egg-info-panel { background: rgba(44,44,46,0.4) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .egg-info-intro { color: #8e8e93 !important; }
html[data-skin="dark"] .egg-info-group-title { color: #636366 !important; }
html[data-skin="dark"] .egg-info-name { color: #ebebf5 !important; }
html[data-skin="dark"] .egg-info-hint { color: #8e8e93 !important; }
html[data-skin="dark"] .egg-info-status { color: rgba(255,255,255,0.20) !important; }
html[data-skin="dark"] .egg-info-item.egg-unlocked .egg-info-status { color: #0a84ff !important; }
html[data-skin="dark"] .egg-info-item.egg-unlocked .egg-info-name { color: #0a84ff !important; }
html[data-skin="dark"] .egg-info-item--toggle:hover { background: rgba(84,84,88,0.25) !important; }
html[data-skin="dark"] .egg-info-toggle-pill { background: rgba(84,84,88,0.45) !important; border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .egg-info-item--toggle.egg-active .egg-info-toggle-pill { background: #0a84ff !important; border-color: #409cff !important; }
html[data-skin="dark"] .egg-info-item--toggle.egg-active .egg-info-name { color: #0a84ff !important; }
html[data-skin="dark"] .premium-code-input { background: #2c2c2e !important; border-color: rgba(84,84,88,0.65) !important; color: #ffffff !important; }
html[data-skin="dark"] .premium-code-input:focus { border-color: #0a84ff !important; }
html[data-skin="dark"] .premium-code-hint { color: #8e8e93 !important; }

/* ── DARK: Coach ─────────────────────────────────── */
html[data-skin="dark"] .profile-coach { background: rgba(44,44,46,0.4) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .coach-header { border-bottom-color: rgba(84,84,88,0.30) !important; }
html[data-skin="dark"] .coach-name { color: #ebebf5 !important; }
html[data-skin="dark"] .coach-title { color: #8e8e93 !important; }
html[data-skin="dark"] .coach-avatar { border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .coach-collapse-icon { color: #636366 !important; }
html[data-skin="dark"] .coach-header:hover .coach-collapse-icon { color: #8e8e93 !important; }
html[data-skin="dark"] .coach-tab { background: rgba(84,84,88,0.20) !important; border-color: rgba(84,84,88,0.45) !important; color: #8e8e93 !important; }
html[data-skin="dark"] .coach-tab:hover { background: rgba(84,84,88,0.35) !important; color: #ebebf5 !important; border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .coach-tab.is-active { background: rgba(10,132,255,0.15) !important; color: #0a84ff !important; border-color: rgba(10,132,255,0.40) !important; }
html[data-skin="dark"] .coach-body { color: #ebebf5 !important; }
html[data-skin="dark"] .coach-teaser-overlay { background: rgba(0,0,0,0.65) !important; }
html[data-skin="dark"] .coach-teaser-title { color: #ebebf5 !important; }

/* ── DARK: Settings content ──────────────────────── */
html[data-skin="dark"] .settings-hero { background: rgba(44,44,46,0.5) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .settings-hero-name { color: #ffffff !important; }
html[data-skin="dark"] .settings-hero-avatar { border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .settings-hero-profile-btn,
html[data-skin="dark"] .settings-hero-edit-btn { color: #636366 !important; }
html[data-skin="dark"] .settings-hero-profile-btn:hover,
html[data-skin="dark"] .settings-hero-edit-btn:hover { color: #ebebf5 !important; }
html[data-skin="dark"] .settings-hero-links-sep { color: #636366 !important; }
html[data-skin="dark"] .settings-section-name .settings-label { color: #8e8e93 !important; }
html[data-skin="dark"] .settings-input { background: #2c2c2e !important; border-color: rgba(84,84,88,0.65) !important; color: #ffffff !important; }
html[data-skin="dark"] .settings-input:focus { border-color: #0a84ff !important; }
html[data-skin="dark"] .settings-input--locked { border-color: rgba(84,84,88,0.30) !important; }
html[data-skin="dark"] .settings-name-lock-note { color: #636366 !important; }
html[data-skin="dark"] .settings-toggle-row { background: rgba(44,44,46,0.4) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .settings-toggle-text { color: #ebebf5 !important; }
html[data-skin="dark"] .settings-toggle-desc { color: #8e8e93 !important; }
html[data-skin="dark"] .team-btn { background: rgba(44,44,46,0.4) !important; border-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .team-btn:hover { border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] .team-btn-name { color: #ebebf5 !important; }
html[data-skin="dark"] .team-btn-desc { color: #8e8e93 !important; }
html[data-skin="dark"] .settings-account-tiles { color: #ebebf5 !important; }

/* ── DARK: Add Chips (zc) ────────────────────────── */
html[data-skin="dark"] .zc-card { background: #1c1c1e !important; border-color: rgba(84,84,88,0.65) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important; }
html[data-skin="dark"] .zc-title { color: #ffffff !important; }
html[data-skin="dark"] .zc-body  { color: #ebebf5 !important; }
html[data-skin="dark"] .zc-hint  { color: #636366 !important; }
html[data-skin="dark"] .zc-hint a { color: #0a84ff !important; }
html[data-skin="dark"] .zc-code-input { background: #2c2c2e !important; border-color: rgba(84,84,88,0.65) !important; color: #ffffff !important; }
html[data-skin="dark"] .zc-code-input:focus { border-color: #0a84ff !important; background: #3a3a3c !important; }
html[data-skin="dark"] .zc-close-btn { border-color: rgba(84,84,88,0.65) !important; color: #8e8e93 !important; }
html[data-skin="dark"] .zc-close-btn:hover { border-color: rgba(84,84,88,0.85) !important; color: #ebebf5 !important; }

/* ── DARK: HTP tabs + blind table ────────────────── */
html[data-skin="dark"] .htp-tabs   { border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .htp-tab    { color: #8e8e93 !important; }
html[data-skin="dark"] .htp-tab.active { color: #0a84ff !important; border-bottom-color: #0a84ff !important; }
html[data-skin="dark"] .htp-tagline { color: #ebebf5 !important; }
html[data-skin="dark"] .htp-rank-name { color: #ebebf5 !important; }
html[data-skin="dark"] .htp-rank-note { color: #8e8e93 !important; }
html[data-skin="dark"] .htp-list li { color: #ebebf5 !important; }
html[data-skin="dark"] .htp-blind-table th { background: rgba(44,44,46,0.6) !important; color: #8e8e93 !important; border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] .htp-blind-table td { color: #ebebf5 !important; border-bottom-color: rgba(84,84,88,0.20) !important; }
html[data-skin="dark"] .htp-blind-table tr:hover td { background: rgba(255,255,255,0.03) !important; }
html[data-skin="dark"] .htp-speed-name { color: #ffffff !important; }
html[data-skin="dark"] .htp-speed-desc { color: #8e8e93 !important; }
html[data-skin="dark"] .htp-struct-note { color: #8e8e93 !important; }


/* ═══════════════════════════════════════════════════════════════
   LIGHT: CONTENT PANELS
   ═══════════════════════════════════════════════════════════════ */

/* ── LIGHT: s2-panel ─────────────────────────────── */
html[data-skin="light"] .s2-panel-header {
  background: #f2f2f7 !important;
  border-bottom-color: rgba(60,60,67,0.12) !important;
}
html[data-skin="light"] .s2-panel-back {
  background: rgba(60,60,67,0.06) !important;
  border-color: rgba(60,60,67,0.15) !important;
  color: #3c3c43 !important;
}
html[data-skin="light"] .s2-panel-back:hover {
  background: rgba(60,60,67,0.12) !important;
  color: #000000 !important;
}
html[data-skin="light"] .s2-panel-title { color: #000000 !important; }
html[data-skin="light"] .s2-panel-body { color: #3c3c43 !important; }
html[data-skin="light"] #s2-panel { background: #ffffff !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] #s2-panel::before { background: linear-gradient(90deg, transparent, rgba(60,60,67,0.10), transparent) !important; }

/* ── LIGHT: Leaderboard ──────────────────────────── */
html[data-skin="light"] .lb-dialog { background: #ffffff !important; border-color: rgba(60,60,67,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
html[data-skin="light"] .lb-header { background: #f2f2f7 !important; border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .lb-title  { color: #000000 !important; }
html[data-skin="light"] .lb-close  { color: #8e8e93 !important; }
html[data-skin="light"] .lb-close:hover { color: #000000 !important; }
html[data-skin="light"] .lb-tabs   { background: #f2f2f7 !important; border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .lb-tab    { color: #8e8e93 !important; }
html[data-skin="light"] .lb-tab:hover { color: #3c3c43 !important; }
html[data-skin="light"] .lb-tab.active { color: #007aff !important; border-bottom-color: #007aff !important; }
html[data-skin="light"] .lb-body   { color: #3c3c43 !important; scrollbar-color: #d1d1d6 transparent !important; }
html[data-skin="light"] .lb-body::-webkit-scrollbar-thumb { background: #d1d1d6 !important; }
html[data-skin="light"] .lb-loading { color: #8e8e93 !important; }
html[data-skin="light"] .lb-table thead tr { border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .lb-table th { color: #8e8e93 !important; }
html[data-skin="light"] .lb-table td { color: #3c3c43 !important; border-bottom-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] .lb-table tbody tr:hover td { background: rgba(0,0,0,0.02) !important; }
html[data-skin="light"] .lb-table tbody tr.lb-row--me td { background: rgba(0,122,255,0.08) !important; }
html[data-skin="light"] .lb-table tbody tr.lb-row--me .lb-player-name { color: #007aff !important; }
html[data-skin="light"] .lb-player-name { color: #000000 !important; }
html[data-skin="light"] .lb-footer { border-top-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .lb-note   { color: #aeaeb2 !important; }
html[data-skin="light"] #lb-empty  { color: #8e8e93 !important; }
/* Leaderboard mobile card */
html[data-skin="light"] .lb-mc-pfp { border-right-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .lb-mc-info .lb-player-name { color: #000000 !important; }
html[data-skin="light"] .lb-mc-corner--num { color: rgba(0,0,0,0.30) !important; }
html[data-skin="light"] .lb-mc-stat-val { color: #3c3c43 !important; }
html[data-skin="light"] .lb-mc-stat-lbl { color: #8e8e93 !important; }

/* ── LIGHT: Profile ──────────────────────────────── */
html[data-skin="light"] .profile-dialog { background: #ffffff !important; border-color: rgba(60,60,67,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
html[data-skin="light"] .profile-header { background: #f2f2f7 !important; border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .profile-title { color: #000000 !important; }
html[data-skin="light"] .profile-close { color: #8e8e93 !important; }
html[data-skin="light"] .profile-close:hover { color: #000000 !important; }
html[data-skin="light"] .profile-body { color: #3c3c43 !important; scrollbar-color: #d1d1d6 transparent !important; }
html[data-skin="light"] .profile-body::-webkit-scrollbar-thumb { background: #d1d1d6 !important; }
html[data-skin="light"] .profile-name { color: #000000 !important; }
html[data-skin="light"] .profile-last-played { color: #8e8e93 !important; }
html[data-skin="light"] .profile-edit-btn { color: #8e8e93 !important; }
html[data-skin="light"] .profile-edit-btn:hover { color: #000000 !important; }
html[data-skin="light"] .profile-avatar { border-color: rgba(60,60,67,0.15) !important; }
html[data-skin="light"] .profile-stat-block { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .profile-stat-val { color: #000000 !important; }
html[data-skin="light"] .profile-stat-lbl { color: #8e8e93 !important; }
html[data-skin="light"] .profile-mode-section-hdr { color: #8e8e93 !important; }
html[data-skin="light"] .profile-mode-row { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .profile-mode-sep { background: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .profile-mode-nums span:first-child { color: #000000 !important; }
html[data-skin="light"] .profile-mode-lbl { color: #8e8e93 !important; }
html[data-skin="light"] .profile-section-label { color: #8e8e93 !important; }
html[data-skin="light"] .profile-badge-tier-label { color: #8e8e93 !important; border-bottom-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] .profile-badge-tile { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .profile-badge-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
html[data-skin="light"] .profile-badge-tile--locked { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] .profile-badge-label { color: #3c3c43 !important; }
html[data-skin="light"] .profile-badges-empty { color: #aeaeb2 !important; }
html[data-skin="light"] .profile-team-allegiance { color: #3c3c43 !important; }

/* ── LIGHT: Achievements ─────────────────────────── */
html[data-skin="light"] .ach-progress-label { color: #3c3c43 !important; }
html[data-skin="light"] .ach-progress-label strong { color: #000000 !important; }
html[data-skin="light"] .ach-progress-pct { color: #007aff !important; }
html[data-skin="light"] .ach-progress-bar-track { background: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] .ach-progress-bar-fill { background: linear-gradient(90deg, #007aff 0%, #409cff 100%) !important; }
html[data-skin="light"] .ach-tier-heading { color: #8e8e93 !important; border-bottom-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] .ach-card--earned { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .ach-card--earned:hover { background: #e5e5ea !important; border-color: rgba(60,60,67,0.20) !important; }
html[data-skin="light"] .ach-card--locked { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.06) !important; }
html[data-skin="light"] .ach-card-label { color: #000000 !important; }
html[data-skin="light"] .ach-card-desc  { color: #8e8e93 !important; }

/* ── LIGHT: Free Upgrades (egg-info) ─────────────── */
html[data-skin="light"] .egg-info-panel { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .egg-info-intro { color: #8e8e93 !important; }
html[data-skin="light"] .egg-info-group-title { color: #aeaeb2 !important; }
html[data-skin="light"] .egg-info-name { color: #3c3c43 !important; }
html[data-skin="light"] .egg-info-hint { color: #8e8e93 !important; }
html[data-skin="light"] .egg-info-status { color: rgba(0,0,0,0.15) !important; }
html[data-skin="light"] .egg-info-item.egg-unlocked .egg-info-status { color: #007aff !important; }
html[data-skin="light"] .egg-info-item.egg-unlocked .egg-info-name { color: #007aff !important; }
html[data-skin="light"] .egg-info-item--toggle:hover { background: rgba(0,0,0,0.03) !important; }
html[data-skin="light"] .egg-info-toggle-pill { background: rgba(60,60,67,0.12) !important; border-color: rgba(60,60,67,0.18) !important; }
html[data-skin="light"] .egg-info-toggle-pill::after { background: #ffffff !important; }
html[data-skin="light"] .egg-info-item--toggle.egg-active .egg-info-toggle-pill { background: #007aff !important; border-color: #0071e3 !important; }
html[data-skin="light"] .egg-info-item--toggle.egg-active .egg-info-name { color: #007aff !important; }
html[data-skin="light"] .premium-code-input { background: #ffffff !important; border-color: rgba(60,60,67,0.18) !important; color: #000000 !important; }
html[data-skin="light"] .premium-code-input:focus { border-color: #007aff !important; }
html[data-skin="light"] .premium-code-hint { color: #8e8e93 !important; }

/* ── LIGHT: Coach ────────────────────────────────── */
html[data-skin="light"] .profile-coach { background: rgba(0,122,255,0.04) !important; border-color: rgba(0,122,255,0.12) !important; }
html[data-skin="light"] .coach-header { border-bottom-color: rgba(60,60,67,0.10) !important; }
html[data-skin="light"] .coach-name { color: #000000 !important; }
html[data-skin="light"] .coach-title { color: #8e8e93 !important; }
html[data-skin="light"] .coach-avatar { border-color: rgba(60,60,67,0.15) !important; }
html[data-skin="light"] .coach-collapse-icon { color: #aeaeb2 !important; }
html[data-skin="light"] .coach-header:hover .coach-collapse-icon { color: #8e8e93 !important; }
html[data-skin="light"] .coach-tab { background: rgba(0,0,0,0.03) !important; border-color: rgba(60,60,67,0.12) !important; color: #8e8e93 !important; }
html[data-skin="light"] .coach-tab:hover { background: rgba(0,122,255,0.06) !important; color: #007aff !important; border-color: rgba(0,122,255,0.20) !important; }
html[data-skin="light"] .coach-tab.is-active { background: rgba(0,122,255,0.10) !important; color: #007aff !important; border-color: rgba(0,122,255,0.30) !important; }
html[data-skin="light"] .coach-body { color: #3c3c43 !important; }
html[data-skin="light"] .coach-teaser-overlay { background: rgba(255,255,255,0.70) !important; }
html[data-skin="light"] .coach-teaser-title { color: #3c3c43 !important; }

/* ── LIGHT: Settings content ─────────────────────── */
html[data-skin="light"] .settings-hero { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .settings-hero-name { color: #000000 !important; }
html[data-skin="light"] .settings-hero-avatar { border-color: rgba(60,60,67,0.15) !important; }
html[data-skin="light"] .settings-hero-profile-btn,
html[data-skin="light"] .settings-hero-edit-btn { color: #aeaeb2 !important; }
html[data-skin="light"] .settings-hero-profile-btn:hover,
html[data-skin="light"] .settings-hero-edit-btn:hover { color: #3c3c43 !important; }
html[data-skin="light"] .settings-hero-links-sep { color: #d1d1d6 !important; }
html[data-skin="light"] .settings-section-name .settings-label { color: #8e8e93 !important; }
html[data-skin="light"] .settings-input { background: #ffffff !important; border-color: rgba(60,60,67,0.18) !important; color: #000000 !important; }
html[data-skin="light"] .settings-input:focus { border-color: #007aff !important; }
html[data-skin="light"] .settings-input--locked { border-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] .settings-name-lock-note { color: #aeaeb2 !important; }
html[data-skin="light"] .settings-toggle-row { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .settings-toggle-text { color: #3c3c43 !important; }
html[data-skin="light"] .settings-toggle-desc { color: #8e8e93 !important; }
html[data-skin="light"] .team-btn { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] .team-btn:hover { border-color: rgba(60,60,67,0.25) !important; }
html[data-skin="light"] .team-btn-name { color: #000000 !important; }
html[data-skin="light"] .team-btn-desc { color: #8e8e93 !important; }
html[data-skin="light"] .settings-account-tiles { color: #3c3c43 !important; }

/* ── LIGHT: Add Chips (zc) ───────────────────────── */
html[data-skin="light"] .zc-card { background: #ffffff !important; border-color: rgba(60,60,67,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important; }
html[data-skin="light"] .zc-title { color: #000000 !important; }
html[data-skin="light"] .zc-body  { color: #3c3c43 !important; }
html[data-skin="light"] .zc-hint  { color: #aeaeb2 !important; }
html[data-skin="light"] .zc-hint a { color: #007aff !important; }
html[data-skin="light"] .zc-code-input { background: #f2f2f7 !important; border-color: rgba(60,60,67,0.18) !important; color: #000000 !important; }
html[data-skin="light"] .zc-code-input:focus { border-color: #007aff !important; background: #ffffff !important; }
html[data-skin="light"] .zc-close-btn { border-color: rgba(60,60,67,0.15) !important; color: #8e8e93 !important; }
html[data-skin="light"] .zc-close-btn:hover { border-color: rgba(60,60,67,0.30) !important; color: #3c3c43 !important; }


/* ═══════════════════════════════════════════════════════════════
   SKINS: LOBBY-SKIN-2 OVERRIDES
   ─ body.lobby-skin-2 uses !important on hard-coded dark navy
     colours. html[data-skin] body.lobby-skin-2 beats them by
     higher specificity + later source order.
   ═══════════════════════════════════════════════════════════════ */

/* ── DARK — lobby-skin-2 ─────────────────────────── */
html[data-skin="dark"] body.lobby-skin-2 #lobby { background: #000000 !important; }
html[data-skin="dark"] body.lobby-skin-2 .lobby-mobile-header {
  background: #1c1c1e !important;
  border-bottom-color: rgba(84,84,88,0.65) !important;
}
html[data-skin="dark"] body.lobby-skin-2 .lobby-scroll-body::-webkit-scrollbar-thumb { background: #3a3a3c !important; }

/* Hero */
html[data-skin="dark"] body.lobby-skin-2 .ls-hero { border-bottom-color: rgba(84,84,88,0.30) !important; }
html[data-skin="dark"] body.lobby-skin-2 .ls-hero-eyebrow { color: #8e8e93 !important; }
html[data-skin="dark"] body.lobby-skin-2 .ls-hero-headline { color: #ffffff !important; }
html[data-skin="dark"] body.lobby-skin-2 .ls-hero-headline em { color: #0a84ff !important; }
html[data-skin="dark"] body.lobby-skin-2 .ls-hero-sub { color: #8e8e93 !important; }
html[data-skin="dark"] body.lobby-skin-2 .ls-hero-play-btn {
  background: #0a84ff !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(10,132,255,0.3) !important;
}

/* Step sections */
html[data-skin="dark"] body.lobby-skin-2 .ls { border-bottom-color: rgba(84,84,88,0.20) !important; }
html[data-skin="dark"] body.lobby-skin-2 .ls--step3 { border-top-color: rgba(84,84,88,0.30) !important; }
html[data-skin="dark"] body.lobby-skin-2 .ls-label { color: #8e8e93 !important; }

/* Mode tabs (vs Bot / vs Friend) */
html[data-skin="dark"] body.lobby-skin-2 .lv2-mode-tab {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,0.65) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] body.lobby-skin-2 .lv2-mode-tab::before { background: none !important; }
@media (hover: hover) {
  html[data-skin="dark"] body.lobby-skin-2 .lv2-mode-tab:hover:not(.active) {
    background: #3a3a3c !important;
    border-color: rgba(10,132,255,0.40) !important;
    color: #ffffff !important;
  }
}
html[data-skin="dark"] body.lobby-skin-2 .lv2-mode-tab[data-mode="computer"].active,
html[data-skin="dark"] body.lobby-skin-2 .lv2-mode-tab[data-mode="friend"].active {
  background: transparent !important;
  border-color: #0a84ff !important;
  color: #0a84ff !important;
  box-shadow: none !important;
}
html[data-skin="dark"] body.lobby-skin-2 .lv2-mode-tab.active .material-symbols-rounded { color: #0a84ff !important; opacity: 1 !important; }

/* Speed buttons */
html[data-skin="dark"] body.lobby-skin-2 .lv2-speed-btn {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,0.65) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] body.lobby-skin-2 .lv2-speed-btn .lv2-speed-sub { color: #8e8e93 !important; }
@media (hover: hover) {
  html[data-skin="dark"] body.lobby-skin-2 .lv2-speed-btn:hover:not(.active) {
    background: #3a3a3c !important;
    border-color: rgba(10,132,255,0.40) !important;
    color: #ffffff !important;
  }
}
html[data-skin="dark"] body.lobby-skin-2 .lv2-speed-btn.active {
  background: transparent !important;
  border-color: #0a84ff !important;
  color: #0a84ff !important;
  box-shadow: none !important;
}
html[data-skin="dark"] body.lobby-skin-2 .lv2-speed-btn.active .lv2-speed-sub { color: rgba(10,132,255,0.75) !important; }

/* Table size buttons */
html[data-skin="dark"] body.lobby-skin-2 .lv2-players-label { color: #8e8e93 !important; }

/* Util bar */
html[data-skin="dark"] body.lobby-skin-2 .lv2-util-bar { border-top-color: rgba(84,84,88,0.30) !important; }
html[data-skin="dark"] body.lobby-skin-2 .lv2-util-btn {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,0.65) !important;
  color: #ebebf5 !important;
}
html[data-skin="dark"] body.lobby-skin-2 .lv2-util-btn .material-symbols-rounded { color: #0a84ff !important; }
@media (hover: hover) {
  html[data-skin="dark"] body.lobby-skin-2 .lv2-util-btn:hover {
    background: #3a3a3c !important;
    border-color: rgba(10,132,255,0.40) !important;
  }
  html[data-skin="dark"] body.lobby-skin-2 .lv2-util-btn:hover .material-symbols-rounded { color: #0a84ff !important; }
}

/* Sidebar */
html[data-skin="dark"] body.lobby-skin-2 #s2-sidebar {
  background: #1c1c1e !important;
  border-color: rgba(84,84,88,0.65) !important;
}
html[data-skin="dark"] body.lobby-skin-2 #s2-sidebar::before { background: linear-gradient(90deg, transparent, rgba(84,84,88,0.45), transparent) !important; }
html[data-skin="dark"] body.lobby-skin-2 .s2-profile-hero { background: transparent !important; border-bottom-color: rgba(84,84,88,0.30) !important; }
html[data-skin="dark"] body.lobby-skin-2 .lobby-tab-btn.s2-active { background: rgba(10,132,255,0.12) !important; }
html[data-skin="dark"] body.lobby-skin-2 .lobby-tab-btn.s2-active::after { background: #0a84ff !important; }

/* S2 panel body */
html[data-skin="dark"] body.lobby-skin-2 #s2-panel { background: #1c1c1e !important; border-color: rgba(84,84,88,0.65) !important; }
html[data-skin="dark"] body.lobby-skin-2 .s2-panel-header { background: rgba(28,28,30,0.85) !important; border-bottom-color: rgba(84,84,88,0.45) !important; }
html[data-skin="dark"] body.lobby-skin-2 .s2-panel-back { background: rgba(84,84,88,0.15) !important; border-color: rgba(84,84,88,0.45) !important; color: #ebebf5 !important; }
html[data-skin="dark"] body.lobby-skin-2 .s2-panel-title { color: #ffffff !important; }

/* Rules blurb + footer */
html[data-skin="dark"] body.lobby-skin-2 .lobby-rules-blurb { color: #636366 !important; }
html[data-skin="dark"] body.lobby-skin-2 .lobby-footer,
html[data-skin="dark"] body.lobby-skin-2 .lobby-footer a { color: #636366 !important; }

/* Bot wars banner */
html[data-skin="dark"] body.lobby-skin-2 #s2-sidebar .s2-bwars-banner {
  background: rgba(10,132,255,0.05) !important;
  border-top-color: rgba(84,84,88,0.30) !important;
}
html[data-skin="dark"] body.lobby-skin-2 #s2-sidebar .s2-bwars-banner::before { background: linear-gradient(90deg, transparent, rgba(10,132,255,0.25), transparent) !important; }


/* ── LIGHT — lobby-skin-2 ────────────────────────── */
html[data-skin="light"] body.lobby-skin-2 #lobby { background: #f2f2f7 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-mobile-header {
  background: rgba(255,255,255,0.94) !important;
  border-bottom-color: rgba(60,60,67,0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
html[data-skin="light"] body.lobby-skin-2 .lmh-logo .logo-word-costanza { color: #000000 !important; }
html[data-skin="light"] body.lobby-skin-2 .lmh-logo .logo-word-poker { color: #8e8e93 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-scroll-body::-webkit-scrollbar-thumb { background: #d1d1d6 !important; }

/* Hero */
html[data-skin="light"] body.lobby-skin-2 .ls-hero { border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] body.lobby-skin-2 .ls-hero-eyebrow { color: #8e8e93 !important; }
html[data-skin="light"] body.lobby-skin-2 .ls-hero-headline { color: #000000 !important; }
html[data-skin="light"] body.lobby-skin-2 .ls-hero-headline em { color: #007aff !important; }
html[data-skin="light"] body.lobby-skin-2 .ls-hero-sub { color: #8e8e93 !important; }
html[data-skin="light"] body.lobby-skin-2 .ls-hero-play-btn {
  background: #007aff !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.25) !important;
}
@media (hover: hover) {
  html[data-skin="light"] body.lobby-skin-2 .ls-hero-play-btn:hover {
    background: #0071e3 !important;
    box-shadow: 0 4px 12px rgba(0,122,255,0.35) !important;
  }
}

/* Step sections */
html[data-skin="light"] body.lobby-skin-2 .ls { border-bottom-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] body.lobby-skin-2 .ls--step3 { border-top-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] body.lobby-skin-2 .ls-label { color: #8e8e93 !important; }
html[data-skin="light"] body.lobby-skin-2 .ls-label-icon { color: #8e8e93 !important; }

/* Mode tabs (vs Bot / vs Friend) */
html[data-skin="light"] body.lobby-skin-2 .lv2-mode-tab {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  color: #3c3c43 !important;
}
html[data-skin="light"] body.lobby-skin-2 .lv2-mode-tab .material-symbols-rounded { color: #8e8e93 !important; }
html[data-skin="light"] body.lobby-skin-2 .lv2-mode-tab::before { background: none !important; }
@media (hover: hover) {
  html[data-skin="light"] body.lobby-skin-2 .lv2-mode-tab:hover:not(.active) {
    background: #e5e5ea !important;
    border-color: rgba(0,122,255,0.35) !important;
    color: #000000 !important;
  }
}
html[data-skin="light"] body.lobby-skin-2 .lv2-mode-tab[data-mode="computer"].active,
html[data-skin="light"] body.lobby-skin-2 .lv2-mode-tab[data-mode="friend"].active {
  background: transparent !important;
  border-color: #007aff !important;
  color: #007aff !important;
  box-shadow: none !important;
}
html[data-skin="light"] body.lobby-skin-2 .lv2-mode-tab.active .material-symbols-rounded { color: #007aff !important; opacity: 1 !important; }

/* Speed buttons */
html[data-skin="light"] body.lobby-skin-2 .lv2-speed-btn {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  color: #3c3c43 !important;
}
html[data-skin="light"] body.lobby-skin-2 .lv2-speed-btn .lv2-speed-sub { color: #8e8e93 !important; }
@media (hover: hover) {
  html[data-skin="light"] body.lobby-skin-2 .lv2-speed-btn:hover:not(.active) {
    background: #e5e5ea !important;
    border-color: rgba(0,122,255,0.35) !important;
    color: #000000 !important;
  }
}
html[data-skin="light"] body.lobby-skin-2 .lv2-speed-btn.active {
  background: transparent !important;
  border-color: #007aff !important;
  color: #007aff !important;
  box-shadow: none !important;
}
html[data-skin="light"] body.lobby-skin-2 .lv2-speed-btn.active .lv2-speed-sub { color: rgba(0,122,255,0.75) !important; }

/* Table size buttons */
html[data-skin="light"] body.lobby-skin-2 .lv2-players-label { color: #8e8e93 !important; }

/* Util bar */
html[data-skin="light"] body.lobby-skin-2 .lv2-util-bar { border-top-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] body.lobby-skin-2 .lv2-util-btn {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  color: #3c3c43 !important;
}
html[data-skin="light"] body.lobby-skin-2 .lv2-util-btn .material-symbols-rounded { color: #007aff !important; }
@media (hover: hover) {
  html[data-skin="light"] body.lobby-skin-2 .lv2-util-btn:hover {
    background: #e5e5ea !important;
    border-color: rgba(0,122,255,0.35) !important;
    color: #007aff !important;
  }
  html[data-skin="light"] body.lobby-skin-2 .lv2-util-btn:hover .material-symbols-rounded { color: #007aff !important; }
}

/* Sidebar */
html[data-skin="light"] body.lobby-skin-2 #s2-sidebar {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
}
html[data-skin="light"] body.lobby-skin-2 #s2-sidebar::before { background: linear-gradient(90deg, transparent, rgba(60,60,67,0.10), transparent) !important; }
html[data-skin="light"] body.lobby-skin-2 .s2-profile-hero { background: transparent !important; border-bottom-color: rgba(60,60,67,0.08) !important; }
html[data-skin="light"] body.lobby-skin-2 .s2-profile-hero .s2-name { color: #000000 !important; }
html[data-skin="light"] body.lobby-skin-2 .s2-profile-hero .s2-chips { color: #3c3c43 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-tab-btn { color: #3c3c43 !important; border-bottom-color: rgba(60,60,67,0.05) !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-tab-btn .lobby-tab-text strong { color: #000000 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-tab-btn .lobby-tab-text span { color: #8e8e93 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-tab-btn .material-symbols-rounded { color: #007aff !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-tab-btn.s2-active { background: rgba(0,122,255,0.08) !important; border-color: rgba(0,122,255,0.20) !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-tab-btn.s2-active::after { background: #007aff !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-tab-btn .lobby-tab-q { border-color: rgba(60,60,67,0.12) !important; color: #8e8e93 !important; }
html[data-skin="light"] body.lobby-skin-2 .lv2-util-btn { border-bottom-color: rgba(60,60,67,0.05) !important; }

/* S2 panel body */
html[data-skin="light"] body.lobby-skin-2 #s2-panel { background: #ffffff !important; border-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] body.lobby-skin-2 .s2-panel-header { background: #f2f2f7 !important; border-bottom-color: rgba(60,60,67,0.12) !important; }
html[data-skin="light"] body.lobby-skin-2 .s2-panel-back { background: rgba(60,60,67,0.06) !important; border-color: rgba(60,60,67,0.15) !important; color: #3c3c43 !important; }
html[data-skin="light"] body.lobby-skin-2 .s2-panel-title { color: #000000 !important; }

/* Account pill (top-right header) */
html[data-skin="light"] body.lobby-skin-2 .lobby-av-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(60,60,67,0.12) !important;
  color: #000000 !important;
}
html[data-skin="light"] body.lobby-skin-2 .lobby-av-sep { background: rgba(60,60,67,0.15) !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-av-name { color: #000000 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-av-chips { color: #3c3c43 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-av-cog { color: #8e8e93 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-av-menu {
  background: #ffffff !important;
  border-color: rgba(60,60,67,0.12) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}
html[data-skin="light"] body.lobby-skin-2 .lobby-av-menu-item { color: #000000 !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-av-menu-item:hover { background: #f2f2f7 !important; }

/* Rules blurb + footer */
html[data-skin="light"] body.lobby-skin-2 .lobby-rules-blurb { color: #8e8e93 !important; background: transparent !important; }
html[data-skin="light"] body.lobby-skin-2 .lobby-footer,
html[data-skin="light"] body.lobby-skin-2 .lobby-footer a { color: #aeaeb2 !important; }

/* Bot wars banner */
html[data-skin="light"] body.lobby-skin-2 #s2-sidebar .s2-bwars-banner {
  background: rgba(0,122,255,0.04) !important;
  border-top-color: rgba(60,60,67,0.08) !important;
}
html[data-skin="light"] body.lobby-skin-2 #s2-sidebar .s2-bwars-banner::before { background: linear-gradient(90deg, transparent, rgba(0,122,255,0.15), transparent) !important; }

/* ── Main content rail — card treatment to match #s2-panel ───── */
html[data-skin="dark"] body.lobby-skin-2 .ls-rail {
  background: #1c1c1e !important;
  border: 1px solid rgba(84,84,88,0.65) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
html[data-skin="dark"] body.lobby-skin-2 .ls-rail::after { display: none !important; }
html[data-skin="dark"] body.lobby-skin-2 .ls-rail::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(84,84,88,0.45), transparent);
  pointer-events: none;
  z-index: 1;
}

html[data-skin="light"] body.lobby-skin-2 .ls-rail {
  background: #ffffff !important;
  border: 1px solid rgba(60,60,67,0.12) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
html[data-skin="light"] body.lobby-skin-2 .ls-rail::after { display: none !important; }
html[data-skin="light"] body.lobby-skin-2 .ls-rail::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   FEATURE MATCHES PANEL
   ═══════════════════════════════════════════════════════════════════ */

.fm-panel { padding: 0.5rem 0; }

.fm-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0 0.75rem;
}

.fm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.fm-btn:hover { opacity: 0.85; }

.fm-btn--schedule {
  background: rgba(26,127,232,0.15);
  color: #5ac8fa;
}
.fm-btn--schedule .material-symbols-rounded { font-size: 1.1rem; }

.fm-btn--accept {
  background: #30d158;
  color: #fff;
}

.fm-btn--watch {
  background: rgba(255,214,10,0.15);
  color: #ffd60a;
}

.fm-btn--play {
  background: #5ac8fa;
  color: #0a1535;
}

.fm-btn--cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
}

/* ── Create form ─────────────────────────────────────────────── */

.fm-create-form {
  background: rgba(13,31,82,0.5);
  border: 1px solid rgba(26,127,232,0.18);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.fm-form-row {
  margin-bottom: 0.6rem;
}

.fm-form-row label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.2rem;
}

.fm-form-row--duo {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}
.fm-form-row--duo > div { flex: 1; }

.fm-form-vs {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  padding-bottom: 0.55rem;
}

.fm-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(26,127,232,0.2);
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.fm-input:focus { border-color: rgba(26,127,232,0.5); }
.fm-input option { background: #0a1535; color: #fff; }

.fm-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.fm-error {
  color: #ff453a;
  font-size: 0.78rem;
  margin-top: 0.4rem;
  min-height: 1rem;
}

/* ── Match list & cards ──────────────────────────────────────── */

.fm-list-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fm-empty {
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
  padding: 2rem 0;
}

.fm-card {
  background: rgba(13,31,82,0.45);
  border: 1px solid rgba(26,127,232,0.12);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s;
}
.fm-card:hover { border-color: rgba(26,127,232,0.3); }

.fm-card--live {
  border-color: rgba(255,214,10,0.35);
  background: rgba(13,31,82,0.6);
}

.fm-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.fm-status {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  line-height: 1;
}

.fm-status--scheduled { background: rgba(90,200,250,0.15); color: #5ac8fa; }
.fm-status--accepted  { background: rgba(48,209,88,0.15);  color: #30d158; }
.fm-status--live      { background: rgba(255,214,10,0.2);  color: #ffd60a; }
.fm-status--completed { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }
.fm-status--cancelled { background: rgba(255,69,58,0.12);  color: #ff453a; }

.fm-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-spectators {
  font-size: 0.7rem;
  color: rgba(255,214,10,0.7);
}

.fm-card-players {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.fm-player {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.fm-player--me {
  color: #5ac8fa;
  font-weight: 700;
}

.fm-vs {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  font-weight: 700;
  text-transform: uppercase;
}

.fm-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fm-variant {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fm-time {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

.fm-checked-in {
  font-size: 0.78rem;
  color: #30d158;
  font-weight: 600;
}

.fm-winner {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  font-style: italic;
}