/* ─── Pocket Poker — Premium Styles ─────────────────────────────── */

/* ─── Variables ───────────────────────────────────────────────── */
:root {
  --bg-dark: #0a0f0a;
  --bg-surface: #111a11;
  --bg-elevated: #162016;
  --felt-green: #1a6b2a;
  --felt-dark: #0f3e18;
  --felt-light: #22843a;
  --felt-highlight: #2a9e48;
  --rail-color: #3d2b1f;
  --rail-inner: #2e1f15;
  --rail-highlight: #6b4a35;
  --rail-shine: #7d5c45;
  --card-white: #f8f8f4;
  --card-shadow: rgba(0,0,0,0.35);
  --card-back: #8b1a1a;
  --card-back-light: #a52a2a;
  --red-suit: #c62828;
  --black-suit: #1a1a1a;
  --gold: #d4a843;
  --gold-light: #e8c96a;
  --gold-dark: #b8923a;
  --win-green: #43a047;
  --win-green-light: #66bb6a;
  --tie-yellow: #ffca28;
  --tie-yellow-dark: #f9a825;
  --lose-red: #e53935;
  --lose-red-light: #ef5350;
  --text-primary: #e8e8e8;
  --text-secondary: #c0c8c0;
  --text-muted: #6e826e;
  --border-subtle: rgba(255,255,255,0.06);
  --border-medium: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bg-hover: rgba(255,255,255,0.08);
  --seat-empty: rgba(255,255,255,0.05);
  --seat-active: rgba(255,255,255,0.12);
  --seat-hero: rgba(212,168,67,0.18);
  --seat-folded: rgba(255,255,255,0.03);
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;
  --transition-slow: 0.4s ease;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-glow-gold: 0 0 12px rgba(212,168,67,0.25);
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ─── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg-dark);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(20,40,20,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(15,30,15,0.3) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#app > #header {
  flex-shrink: 0;
}

/* Main scrollable area (table + results) — fills between header and ad */
.app-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ─── Header ──────────────────────────────────────────────────── */
/* ─── Header ──────────────────────────────────────────────────── */
#header {
  background: linear-gradient(180deg, rgba(12,20,12,0.95) 0%, rgba(8,14,8,0.9) 100%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
  position: relative;
  z-index: 10;
  /* env(safe-area-inset-top) works on iOS but returns 0 on Android WebView.
     Use a CSS var set by JS for precise Android insets, with a sensible fallback. */
  padding-top: var(--safe-area-top, env(safe-area-inset-top, 36px));
}

#header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.2), transparent);
}

/* Top row: brand left, controls right — wraps on narrow screens */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.header-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

#header h1 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}

.header-greeting {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right-side controls: players, reset, signout, bug */
.header-game-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Icon buttons: reset, signout, bug — minimum 44x44 for reliable touch */
.reset-btn {
  min-height: 44px;
  min-width: 56px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}
.reset-btn:hover { background: rgba(255,255,255,0.14); border-color: var(--border-strong); }
.reset-btn:active { transform: scale(0.96); }

.signout-btn {
  min-height: 44px;
  min-width: 56px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}
.signout-btn:hover { background: rgba(229,57,53,0.15); color: var(--lose-red); border-color: var(--lose-red); }
.signout-btn:active { transform: scale(0.96); }

.report-bug-inline {
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
}
.report-bug-inline:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.report-bug-inline:active { transform: scale(0.96); }

.modal-header-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.signout-btn.hidden { display: none; }

/* Nav bar: scrollable row of comfortable pill buttons */
.header-nav {
  display: flex;
  gap: 6px;
  padding: 4px 10px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}

.header-nav::-webkit-scrollbar { display: none; }

/* Pin the settings gear to the right edge so it's always reachable,
   even when other nav tabs overflow and scroll horizontally. */
.nav-btn-settings {
  position: sticky;
  right: 4px;
  margin-left: auto;
  background: linear-gradient(180deg, rgba(20,30,20,0.96) 0%, rgba(14,22,14,0.96) 100%) !important;
  box-shadow: -10px 0 14px rgba(14,22,14,0.9);
  z-index: 3;
}

.nav-btn {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 56px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  padding: 0 14px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.nav-btn:active { transform: scale(0.95); }

.nav-accent {
  background: linear-gradient(135deg, var(--gold) 0%, #b8922e 100%);
  color: #000;
  border-color: var(--gold);
  font-weight: 700;
}

.nav-accent:hover {
  background: linear-gradient(135deg, #e8c44a 0%, var(--gold) 100%);
  color: #000;
}

/* Player count control */
.player-count {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.2);
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.player-count-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 2px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Players inline: - count + in a large comfortable capsule */
.players-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-medium);
  border-radius: 28px;
  padding: 3px 6px;
  min-height: 48px;
}

#players-count {
  min-width: 24px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 0 4px;
  line-height: 1;
}

.player-count-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(212,168,67,0.3) 0%, rgba(212,168,67,0.15) 100%);
  color: var(--gold-light);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  padding: 0;
  line-height: 1;
}

.player-count-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.1) 100%);
  border-color: var(--border-strong);
  box-shadow: 0 0 8px rgba(255,255,255,0.05);
}

.player-count-btn:active {
  transform: scale(0.9);
}

#players-count {
  font-size: 14px;
  font-weight: 800;
  min-width: 16px;
  text-align: center;
  color: var(--gold);
  line-height: 1;
}

/* ─── Table Wrapper ───────────────────────────────────────────── */
#table-wrapper {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 10px auto;
  padding: 0 10px;
}

/* ─── Poker Table ─────────────────────────────────────────────── */
#poker-table {
  position: relative;
  width: 100%;
  padding-bottom: 65%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 40%, var(--felt-highlight) 0%, var(--felt-light) 15%, var(--felt-green) 45%, var(--felt-dark) 100%);
  border: 14px solid var(--rail-color);
  box-shadow:
    inset 0 0 50px rgba(0,0,0,0.4),
    inset 0 0 15px rgba(0,0,0,0.2),
    inset 0 -4px 12px rgba(0,0,0,0.15),
    0 0 0 2px var(--rail-inner),
    0 0 0 5px var(--rail-highlight),
    0 0 0 7px var(--rail-shine),
    0 0 0 8px rgba(0,0,0,0.4),
    0 8px 40px rgba(0,0,0,0.6),
    0 2px 8px rgba(0,0,0,0.4);
}

#poker-table::before {
  content: '';
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.04);
  pointer-events: none;
}

/* ─── Seats ───────────────────────────────────────────────────── */
.seat {
  position: absolute;
  width: 90px;
  text-align: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-med);
  z-index: 2;
}

.seat:active {
  transform: translate(-50%, -50%) scale(0.95);
}

/* Seat positions */
.seat-1 { left: 50%;  top: 92%; }
.seat-2 { left: 18%;  top: 84%; }
.seat-3 { left: 1%;   top: 59%; }
.seat-4 { left: 7%;   top: 25%; }
.seat-5 { left: 33%;  top: 6%; }
.seat-6 { left: 67%;  top: 6%; }
.seat-7 { left: 93%;  top: 25%; }
.seat-8 { left: 99%;  top: 59%; }
.seat-9 { left: 82%;  top: 84%; }

.seat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  transition: color var(--transition-fast);
}

/* Seat badge (+ to add player) */
.seat-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--seat-empty);
  border: 1.5px dashed rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
  font-size: 18px;
  color: rgba(255,255,255,0.2);
  transition: all var(--transition-med);
}

.seat:hover .seat-badge {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.4);
  box-shadow: 0 0 12px rgba(255,255,255,0.05);
}

/* Seat cards container */
.seat-cards {
  display: none;
  gap: 3px;
  justify-content: center;
  margin-top: 2px;
}

/* States */
.seat.occupied .seat-badge { display: none; }
.seat.occupied .seat-cards { display: flex; }

.seat.occupied .seat-label {
  color: var(--text-secondary);
}

.seat.hero .seat-label {
  color: var(--gold);
  font-weight: 700;
}

/* Hero dealer button — pinned to the left of the hand for easy access */
.seat.hero .seat-status {
  position: absolute;
  left: -34px;
  top: 20%;
  margin-top: 0;
}

.seat.folded {
  opacity: 0.3;
}

.seat.folded .seat-label::after {
  content: ' (Folded)';
  font-weight: 400;
  font-size: 9px;
  color: var(--lose-red);
}

/* Seat status (fold/active toggle + stack tag) */
.seat-status-btn {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 600;
}

.seat-status-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

/* Dealer button */
.dealer-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.04) 100%);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dealer-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%);
  border-color: var(--border-strong);
}

.dealer-btn.dealer-active {
  background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
  color: #111;
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.35), 0 2px 4px rgba(0,0,0,0.3);
}

/* Prompt state — every visible dealer button pulses gold when no dealer is set */
.dealer-btn.needs-dealer {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #0a0f0a;
  border-color: var(--gold);
  animation: dealerPulse 1.3s ease-in-out infinite;
  position: relative;
  z-index: 3;
}

@keyframes dealerPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(212, 168, 67, 0.75),
      0 0 14px rgba(212, 168, 67, 0.7),
      0 2px 5px rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(212, 168, 67, 0),
      0 0 22px rgba(212, 168, 67, 0.95),
      0 2px 5px rgba(0, 0, 0, 0.3);
    transform: scale(1.08);
  }
}

/* Message shown in place of the hand name when a dealer must be chosen */
.dealer-needed-msg {
  display: inline-block;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.45;
  padding: 4px 2px;
}
.dealer-needed-msg strong {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #0a0f0a;
  font-weight: 800;
  text-align: center;
  line-height: 18px;
  vertical-align: middle;
}

/* Dim the equity bars while the user still needs to pick a dealer */
.results-section.dealer-required .equity-bars,
.results-section.dealer-required .equity-bar-track {
  opacity: 0.35;
  filter: grayscale(0.6);
  pointer-events: none;
  transition: opacity 0.2s, filter 0.2s;
}

/* Position tag on seat labels */
.pos-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(212,168,67,0.2) 0%, rgba(212,168,67,0.1) 100%);
  color: var(--gold);
  vertical-align: middle;
  margin-left: 3px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid rgba(212,168,67,0.15);
}

/* Dealer chip on seat label */
.dealer-chip {
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
  color: #111;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  line-height: 17px;
  vertical-align: middle;
  margin-left: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Stack tag buttons */
.stack-tag-btn {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.stack-tag-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
}

.stack-tag-btn:active {
  transform: scale(0.93);
}

.stack-short {
  background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
  color: #fff;
}

.stack-med {
  background: linear-gradient(135deg, #ffca28 0%, #f9a825 100%);
  color: #1a1a1a;
}

.stack-big {
  background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
  color: #fff;
}

.stack-covers {
  background: linear-gradient(135deg, #8e24aa 0%, #6a1b9a 100%);
  color: #fff;
}

.seat-status {
  display: none;
  margin-top: 4px;
  display: none;
  gap: 3px;
  justify-content: center;
  flex-wrap: wrap;
}

.seat.occupied .seat-status {
  display: flex;
}

/* ─── Card Slots ──────────────────────────────────────────────── */
/* ─── Card Design ─────────────────────────────────────────────── */

/* Face-down card (default state) */
.card-slot {
  width: 32px;
  height: 44px;
  border-radius: 4px;
  border: 1.5px solid rgba(212,168,67,0.35);
  background: linear-gradient(160deg, #1e3068 0%, #142450 40%, #0d1a3a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: all var(--transition-med);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Inner diamond pattern on face-down cards */
.card-slot::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(212,168,67,0.2);
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(212,168,67,0.06) 3px,
      rgba(212,168,67,0.06) 4px
    );
  pointer-events: none;
}

/* Center spade icon on face-down */
.card-slot::after {
  content: '\2660';
  position: absolute;
  font-size: 14px;
  color: rgba(212,168,67,0.2);
  pointer-events: none;
}

.card-slot:hover {
  border-color: rgba(212,168,67,0.5);
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
  transform: translateY(-1px);
}

/* Face-up card (selected/known card) */
.card-slot.has-card {
  border: 2px solid rgba(200,200,190,0.6);
  background: linear-gradient(180deg, #ffffff 0%, #f0f0e8 40%, #e8e8e0 100%);
  color: var(--black-suit);
  font-weight: 800;
  font-size: 11px;
  flex-direction: column;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.3);
}

.card-slot.has-card::before,
.card-slot.has-card::after {
  display: none;
}

.card-slot.has-card.red {
  color: #c62828;
}

.card-slot.has-card:hover {
  box-shadow: 0 4px 14px rgba(212,168,67,0.2), 0 4px 12px rgba(0,0,0,0.4);
  border-color: rgba(212,168,67,0.5);
  transform: translateY(-2px);
}

/* Opponent face-down cards */
.card-slot.card-back {
  border-color: rgba(212,168,67,0.35);
}

/* Hero cards bigger + empty look when no card selected */
.seat-1 .card-slot {
  width: 42px;
  height: 58px;
  background: rgba(0,0,0,0.2);
  border: 2px dashed rgba(212,168,67,0.3);
  box-shadow: none;
}
.seat-1 .card-slot::before { display: none; }
.seat-1 .card-slot::after { content: '+'; font-size: 20px; color: rgba(212,168,67,0.3); }
/* Once a card is selected, show normal face-up style */
.seat-1 .card-slot.has-card {
  border: 2px solid rgba(200,200,190,0.6);
  background: linear-gradient(180deg, #ffffff 0%, #f0f0e8 40%, #e8e8e0 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.seat-1 .card-slot.has-card::after { display: none; }
.seat-1 .card-slot .card-rank { font-size: 18px; }
.seat-1 .card-slot .card-suit { font-size: 14px; }
.seat-1 .seat-cards { gap: 4px; }

.card-rank {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.card-suit {
  font-size: 10px;
  line-height: 1;
}

/* Board card slots */
.board-slot {
  width: 40px;
  height: 56px;
  border-radius: 6px;
  font-size: 11px;
}

.board-slot .card-rank {
  font-size: 14px;
}

.board-slot .card-suit {
  font-size: 13px;
}

/* ─── Community Cards ─────────────────────────────────────────── */
#community {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 1;
}

.street-group {
  text-align: center;
}

.street-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 5px;
  font-weight: 600;
}

.board-cards {
  display: flex;
  gap: 4px;
}

/* ─── Results Panel ───────────────────────────────────────────── */
#results-panel {
  max-width: 700px;
  margin: 24px auto 0;
  padding: 0 16px 16px;
}

.results-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color var(--transition-med);
}

.results-section:hover {
  border-color: var(--border-medium);
}

.results-section h2 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.results-section.hidden {
  display: none;
}

/* Equity bars */
.equity-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.equity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.equity-row:last-child {
  margin-bottom: 0;
}

.equity-label {
  width: 36px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.equity-bar-track {
  flex: 1;
  height: 24px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}

.equity-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width var(--transition-slow);
  width: 0%;
  position: relative;
}

.win-bar {
  background: linear-gradient(90deg, var(--win-green) 0%, var(--win-green-light) 100%);
  box-shadow: 0 0 10px rgba(67,160,71,0.25);
}

.tie-bar {
  background: linear-gradient(90deg, var(--tie-yellow-dark) 0%, var(--tie-yellow) 100%);
  box-shadow: 0 0 10px rgba(255,202,40,0.2);
}

.lose-bar {
  background: linear-gradient(90deg, var(--lose-red) 0%, var(--lose-red-light) 100%);
  box-shadow: 0 0 10px rgba(229,57,53,0.2);
}

.equity-value {
  width: 50px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

/* Hand name / "Select your cards" prompt */
.hand-name-display {
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(212,168,67,0.12);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.3px;
  line-height: 1.4;
}

/* Outs */
.outs-count {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.outs-count span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.outs-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.out-card {
  width: 30px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--card-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--black-suit);
  line-height: 1.1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform var(--transition-fast);
}

.out-card:hover {
  transform: translateY(-1px);
}

.out-card.red {
  color: var(--red-suit);
}

/* What Beats Me */
.beats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.beats-group {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--transition-fast);
}

.beats-group:hover {
  border-color: var(--border-medium);
}

.beats-hand-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.beats-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
}

.beats-examples {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.beats-example {
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.3);
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.03);
}

/* Collapsed top-2 summary */
.beats-summary {
  cursor: pointer;
}

.beats-top-item {
  font-size: 13px;
  padding: 4px 0;
  color: var(--text-primary);
}

.beats-expand-btn {
  margin-top: 6px;
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
}

/* Expanded full list */
.beats-full {
  cursor: pointer;
}

.beats-full.hidden,
.beats-summary.hidden {
  display: none;
}

/* ─── Strategy Banner ─────────────────────────────────────────── */
.strategy-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  margin: 0 auto 12px;
  position: relative;
  overflow: hidden;
  gap: 4px;
}

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

.strategy-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255,255,255,0.03) 10px,
      rgba(255,255,255,0.03) 20px
    );
  pointer-events: none;
}

.strategy-action {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 6px;
  text-transform: uppercase;
  position: relative;
}

.strategy-banner.action-green {
  background: linear-gradient(135deg, rgba(67,160,71,0.2) 0%, rgba(67,160,71,0.1) 100%);
  border: 2px solid rgba(67,160,71,0.35);
  box-shadow: inset 0 0 20px rgba(67,160,71,0.08), 0 0 20px rgba(67,160,71,0.1);
}

.strategy-banner.action-green .strategy-action {
  color: var(--win-green-light);
  text-shadow: 0 0 20px rgba(67,160,71,0.4);
}

.strategy-banner.action-yellow {
  background: linear-gradient(135deg, rgba(255,202,40,0.15) 0%, rgba(255,202,40,0.07) 100%);
  border: 2px solid rgba(255,202,40,0.3);
  box-shadow: inset 0 0 20px rgba(255,202,40,0.06), 0 0 20px rgba(255,202,40,0.08);
}

.strategy-banner.action-yellow .strategy-action {
  color: var(--tie-yellow);
  text-shadow: 0 0 20px rgba(255,202,40,0.35);
}

.strategy-banner.action-red {
  background: linear-gradient(135deg, rgba(229,57,53,0.18) 0%, rgba(229,57,53,0.08) 100%);
  border: 2px solid rgba(229,57,53,0.35);
  box-shadow: inset 0 0 20px rgba(229,57,53,0.08), 0 0 20px rgba(229,57,53,0.08);
}

.strategy-banner.action-red .strategy-action {
  color: var(--lose-red-light);
  text-shadow: 0 0 20px rgba(229,57,53,0.4);
}

.strategy-hand-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  position: relative;
  max-width: 48ch;
}

.strategy-detail {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  position: relative;
  max-width: 48ch;
}

/* Action tracking buttons */
.action-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 360px);
  margin: 10px auto 0;
  position: relative;
}

.action-btns.hidden {
  display: none;
}

.action-btn {
  width: 100%;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.2px;
}

.action-btn.hidden {
  display: none;
}

.action-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.action-btn.active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #111;
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212,168,67,0.25);
  font-weight: 700;
}

/* Prompt state: when the street has no logged action yet, pulse every visible
   action button so the user knows they need to tap one to move on. */
.action-btns.needs-tap .action-btn {
  animation: actionBtnPulse 1.4s ease-in-out infinite;
  border-color: var(--gold);
  color: var(--gold-light);
  background: linear-gradient(180deg, rgba(212,168,67,0.18) 0%, rgba(212,168,67,0.08) 100%);
}
.action-btns.needs-tap .action-btn:hover {
  animation: none;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #111;
}

@keyframes actionBtnPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(212, 168, 67, 0.55),
      0 0 10px rgba(212, 168, 67, 0.35);
    transform: translateY(0) scale(1);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(212, 168, 67, 0),
      0 0 18px rgba(212, 168, 67, 0.75);
    transform: translateY(-1px) scale(1.015);
  }
}

/* ─── Settings nav button (gear icon) ───────────────────────────── */
.nav-btn-settings {
  font-size: 20px !important;
  padding: 0 12px !important;
  min-width: 44px !important;
}

/* ─── Settings Modal ────────────────────────────────────────────── */
.settings-list {
  padding: 14px 14px 24px;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 6px 0;
  overflow: hidden;
}

.settings-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 10px 16px 6px;
}

.settings-row {
  padding: 14px 16px;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.settings-row:first-of-type { border-top: none; }
.settings-row:hover { background: rgba(255,255,255,0.04); }
.settings-row:active { background: rgba(255,255,255,0.07); }
.settings-row.settings-row-info {
  cursor: default;
}
.settings-row.settings-row-info:hover { background: none; }

.settings-row-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.settings-row-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.35;
}

.settings-account-card {
  padding: 16px 18px 14px;
}

.settings-account-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 3px;
}

.settings-account-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 14px;
}

.settings-btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.settings-btn:hover { background: rgba(255,255,255,0.14); border-color: var(--border-strong); }
.settings-btn:active { transform: scale(0.98); }

.settings-btn-primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #0a0f0a;
  border-color: var(--gold);
}
.settings-btn-primary:hover {
  background: linear-gradient(180deg, #f1d278 0%, #dfb547 100%);
}

.settings-btn-danger {
  background: rgba(229, 57, 53, 0.15);
  color: var(--lose-red-light);
  border-color: rgba(229, 57, 53, 0.5);
}
.settings-btn-danger:hover {
  background: rgba(229, 57, 53, 0.25);
  border-color: var(--lose-red);
}

.raise-size-panel {
  width: min(100%, 420px);
  margin: 12px auto 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212,168,67,0.18);
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(255,255,255,0.03) 100%);
}

.raise-size-panel.hidden {
  display: none;
}

.raise-size-panel label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.raise-size-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

#raise-size-input {
  width: 88px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: rgba(255,255,255,0.95);
  color: #111;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

#raise-size-input:focus {
  outline: none;
  border-color: rgba(212,168,67,0.75);
  box-shadow: 0 0 0 3px rgba(212,168,67,0.16);
}

.raise-size-suffix {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-light);
}

.raise-size-confirm {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212,168,67,0.5);
  background: linear-gradient(135deg, rgba(212,168,67,0.24) 0%, rgba(212,168,67,0.12) 100%);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.raise-size-confirm:hover {
  background: linear-gradient(135deg, rgba(212,168,67,0.34) 0%, rgba(212,168,67,0.16) 100%);
  border-color: rgba(212,168,67,0.72);
}

.hand-flow-note {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 42ch;
}

.hand-flow-note.hidden {
  display: none;
}

.hand-reset-btn {
  margin: 12px auto 0;
  display: block;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212,168,67,0.45);
  background: linear-gradient(135deg, rgba(212,168,67,0.18) 0%, rgba(212,168,67,0.08) 100%);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hand-reset-btn:hover {
  background: linear-gradient(135deg, rgba(212,168,67,0.28) 0%, rgba(212,168,67,0.14) 100%);
  border-color: rgba(212,168,67,0.65);
}

.hand-reset-btn.hidden {
  display: none;
}

/* ─── Compact Setup Bar ───────────────────────────────────────── */
.setup-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}

.setup-item {
  min-width: 0;
}

.setup-item label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  font-weight: 700;
  white-space: nowrap;
}

.setup-item input {
  width: 100%;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 100%);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  outline: none;
  transition: all var(--transition-fast);
  min-height: 48px;
}

.setup-item input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,168,67,0.15), 0 0 10px rgba(212,168,67,0.1);
}

.setup-item input:hover {
  border-color: var(--border-strong);
}

.position-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 100%);
  border: 1px solid var(--border-medium);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.3px;
  min-height: 40px;
  white-space: nowrap;
}

.setup-bb span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 100%);
  border: 1px solid var(--border-medium);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  min-height: 40px;
}

.setup-pos {
  flex: 2;
  min-width: 200px;
}

.position-btns {
  display: flex;
  gap: 3px;
}

.pos-btn {
  flex: 1;
  padding: 7px 2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pos-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.pos-btn.active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #111;
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212,168,67,0.2);
  font-weight: 700;
}

/* ─── Landing Page ────────────────────────────────────────────── */
.landing-page {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: radial-gradient(ellipse at 50% 25%, #122012 0%, #070d07 60%, #030503 100%);
  overflow: hidden;
}

.landing-page.hidden { display: none; }

/* Subtle vignette overlay for depth */
.landing-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 1;
}

.chip-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 75%;
  overflow: visible;
  pointer-events: none;
  z-index: 20;
}
.landing-page:has(.landing-form) .chip-canvas { display: none; }

/* Gravity drop — fall straight down, land, done */
@keyframes chipGravity {
  0% {
    left: 50%;
    top: -120px;
    opacity: 0;
    transform: translate(-50%, 0) rotate(0deg);
  }
  8% { opacity: 1; }
  /* Falling straight down */
  50% {
    left: 50%;
    top: var(--land-y);
    transform: translate(-50%, 0) rotate(var(--spin));
  }
  /* Land — quick slide to final spot */
  58% {
    left: var(--land-x);
    top: var(--land-y);
    transform: translate(-50%, 0) rotate(var(--land-r));
  }
  /* Stay */
  58%, 100% {
    left: var(--land-x);
    top: var(--land-y);
    transform: translate(-50%, 0) rotate(var(--land-r));
    opacity: 1;
  }
}

.chip-physics {
  opacity: 0;
}

/* ─── Landing content: main screen (below chips) ─── */
.landing-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 28%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 32px 36px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Form screens: anchor to top, scrollable so nothing gets clipped */
.landing-content:has(.landing-form) {
  top: 0;
  bottom: 0;
  justify-content: flex-start;
  padding-top: 8px;
  padding-bottom: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.landing-content.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Card Fan (CSS-drawn, landing page) ─── */
.landing-card-fan {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 270px;
  height: 150px;
  pointer-events: none;
  z-index: 10;
}
/* Hide card fan on form screens so forms aren't cramped */
.landing-page:has(.landing-form) .landing-card-fan { display: none; }
.lcf-card {
  position: absolute;
  width: 92px;
  height: 128px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f3e4 100%);
  border: 2px solid #111;
  box-shadow: 0 10px 24px rgba(0,0,0,0.7), 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.9);
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  top: 8px;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg);
  opacity: 0;
  animation: cardFanOpen 1.1s cubic-bezier(0.34, 1.35, 0.5, 1) forwards;
}
.lcf-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.lcf-corner-tl { top: 7px; left: 8px; }
.lcf-corner-br {
  bottom: 7px;
  right: 8px;
  transform: rotate(180deg);
}
.lcf-rank {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.lcf-suit {
  font-size: 19px;
  line-height: 1;
  margin-top: 1px;
}
.lcf-center-suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 54px;
  line-height: 1;
  color: #111;
}
.lcf-card-1 { animation-delay: 0.30s; --fan-rot: -22deg; --fan-x: -66px; z-index: 1; }
.lcf-card-2 { animation-delay: 0.42s; --fan-rot: -8deg;  --fan-x: -22px; z-index: 2; }
.lcf-card-3 { animation-delay: 0.54s; --fan-rot: 8deg;   --fan-x: 22px;  z-index: 3; }
.lcf-card-4 { animation-delay: 0.66s; --fan-rot: 22deg;  --fan-x: 66px;  z-index: 4; }

@keyframes cardFanOpen {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px) rotate(0deg) scale(0.7);
  }
  40% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--fan-x))) translateY(0) rotate(var(--fan-rot)) scale(1);
  }
}

/* Content sits just below the chips */
.landing-page .landing-content { top: 28%; padding-bottom: 14px; }

@media (max-height: 760px) {
  .landing-card-fan { top: 3%; width: 230px; height: 130px; }
  .lcf-card { width: 78px; height: 108px; }
  .lcf-rank { font-size: 18px; }
  .lcf-suit { font-size: 16px; }
  .lcf-center-suit { font-size: 44px; }
  .landing-page .landing-content { top: 30%; }
}
@media (max-height: 680px) {
  .landing-card-fan { top: 2%; width: 210px; height: 120px; }
  .lcf-card { width: 68px; height: 96px; }
  .lcf-rank { font-size: 16px; }
  .lcf-suit { font-size: 14px; }
  .lcf-center-suit { font-size: 38px; }
  .landing-page .landing-content { top: 28%; padding-bottom: 12px; }
}

/* ─── Logo & typography ─── */
.landing-logo {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(160deg, #f5e4a8 0%, #d4a843 35%, #b8862a 70%, #d4a843 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(212,168,67,0.35));
  margin-bottom: 4px;
  text-align: center;
  line-height: 1.05;
}

.landing-tagline {
  font-size: 15px;
  font-weight: 300;
  color: #ececec;
  text-align: center;
  line-height: 1.35;
  margin-bottom: 2px;
}

.landing-subtitle {
  font-size: 11px;
  color: #7a937a;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 10px;
  max-width: 280px;
}

.landing-benefits {
  list-style: none;
  padding: 8px 14px;
  margin: 0 0 12px;
  max-width: 300px;
  background: rgba(212,168,67,0.08);
  border: 1px solid rgba(212,168,67,0.25);
  border-radius: 12px;
}
.landing-benefits li {
  font-size: 11px;
  font-weight: 600;
  color: #e8d9a8;
  line-height: 1.3;
  padding: 3px 0 3px 20px;
  position: relative;
}
.landing-benefits li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  top: 3px;
  color: var(--gold, #d4a843);
  font-weight: 900;
  font-size: 12px;
}

/* ─── Button group ─── */
.landing-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

.landing-meta-links {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.landing-meta-link {
  border: none;
  background: none;
  color: #7a937a;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  padding: 4px 0;
  opacity: 0.8;
  transition: color 0.2s, opacity 0.2s;
}

.landing-meta-link:hover {
  color: #d8c67c;
  opacity: 1;
}

/* ─── Primary button: gold, premium feel ─── */
.landing-btn-primary {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  background: linear-gradient(160deg, #e8c05a 0%, #d4a843 40%, #b8862a 100%);
  color: #1a1a0a;
  box-shadow: 0 4px 18px rgba(212,168,67,0.30), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.landing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212,168,67,0.40), inset 0 1px 0 rgba(255,255,255,0.15);
}

.landing-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(212,168,67,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ─── Secondary button: glass / outlined ─── */
.landing-btn-secondary {
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.13);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  color: #e0e0e0;
  transition: background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.landing-btn-secondary:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
}

.landing-btn-secondary:active {
  background: rgba(255,255,255,0.03);
}

/* ─── Skip link: visible but clearly tertiary ─── */
.landing-btn-skip {
  padding: 6px 10px;
  border: none;
  background: none;
  color: #7a937a;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.2px;
  opacity: 0.85;
  transition: color 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.landing-btn-skip:hover,
.landing-btn-skip:active {
  color: #a8bfa3;
  opacity: 1;
}

/* ─── Landing form ─── */
/* ─── All-In Hero (Sign Up / Sign In) ─── */
.allin-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  animation: allinHeroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.allin-fan {
  position: relative;
  width: 120px;
  height: 88px;
}
.allin-card {
  position: absolute;
  width: 60px;
  height: 86px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f3e4 100%);
  border: 2px solid #111;
  box-shadow: 0 10px 26px rgba(0,0,0,0.7), 0 3px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.9);
  top: 3px;
  left: 50%;
  transform-origin: 50% 100%;
  color: #c62828;
  font-family: Georgia, "Times New Roman", serif;
  opacity: 0;
  animation: allinCardFlip 0.9s cubic-bezier(0.34, 1.4, 0.5, 1) forwards;
}
.allin-card-left {
  animation-delay: 0.25s;
  --ac-rot: -14deg;
  --ac-x: -26px;
  z-index: 1;
}
.allin-card-right {
  animation-delay: 0.45s;
  --ac-rot: 14deg;
  --ac-x: 26px;
  z-index: 2;
}
@keyframes allinCardFlip {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotateY(90deg) rotate(0deg) scale(0.8);
  }
  50% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--ac-x))) rotateY(0deg) rotate(var(--ac-rot)) scale(1);
  }
}
.allin-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.allin-corner-tl { top: 5px; left: 7px; }
.allin-corner-br { bottom: 5px; right: 7px; transform: rotate(180deg); }
.allin-rank { font-size: 15px; font-weight: 900; line-height: 1; }
.allin-suit { font-size: 13px; line-height: 1; margin-top: 1px; }
.allin-center-suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 34px;
  line-height: 1;
}
.allin-label {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffdede 0%, #ff4f4f 45%, #8b0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(200,30,30,0.5));
  opacity: 0;
  animation: allinLabelIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s forwards;
  margin-top: 2px;
}
@keyframes allinHeroIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes allinLabelIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.8); letter-spacing: 2px; }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 6px; }
}

.landing-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

.landing-form-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(160deg, #f0d78c 0%, #d4a843 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  margin-bottom: 2px;
}

/* ─── Form inputs: dark inset, crisp edges ─── */
.landing-input {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  color: #e8e8e8;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none;
}

.landing-input:focus {
  border-color: #d4a843;
  box-shadow: 0 0 0 2px rgba(212,168,67,0.18);
  background: rgba(0,0,0,0.45);
}

.landing-input::placeholder {
  color: #6a806a;
  font-weight: 400;
}

.landing-error {
  color: #ef5350;
  font-size: 13px;
  text-align: center;
  min-height: 18px;
  margin-top: -4px;
}

.landing-success {
  color: #66bb6a;
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
}

.otp-input {
  text-align: center;
  font-size: 28px;
  letter-spacing: 10px;
  font-weight: 700;
  padding: 16px;
}

.landing-btn-link {
  background: none;
  border: none;
  color: #d4a843;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  padding: 2px 0;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.landing-btn-link:hover { color: #e8c96a; }

.landing-btn-primary:disabled,
.landing-btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(212,168,67,0.15);
}

/* Auth security: honeypot (hidden from humans) */
.landing-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

/* Auth security: CAPTCHA shell */
.landing-security-shell {
  margin: 8px 0;
  text-align: center;
}
.landing-captcha {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.landing-security-note {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
}

/* ─── Landing: short-screen safety (Galaxy S8, etc.) ─── */
@media (max-height: 680px) {
  .landing-content {
    top: 38%;
    padding-bottom: 28px;
  }
  .landing-content:has(.landing-form) {
    top: 0;
    padding-top: 16px;
    padding-bottom: 20px;
  }
  .landing-logo { font-size: 32px; margin-bottom: 6px; }
  .landing-tagline { font-size: 17px; margin-bottom: 4px; }
  .landing-subtitle { font-size: 12px; margin-bottom: 20px; }
  .landing-buttons { gap: 10px; }
  .landing-btn-primary,
  .landing-btn-secondary { padding: 13px 20px; font-size: 15px; }
  .landing-btn-skip { padding: 8px; }
  .landing-form { gap: 11px; }
  .landing-form-title { font-size: 21px; margin-bottom: 6px; }
  .landing-input { padding: 13px 16px; font-size: 14px; }
}

/* Extra-short screens (e.g., older 16:9 phones, landscape) */
@media (max-height: 560px) {
  .landing-content { top: 34%; padding-bottom: 16px; }
  .landing-content:has(.landing-form) { padding-top: 10px; padding-bottom: 12px; }
  .landing-logo { font-size: 28px; letter-spacing: 3px; }
  .landing-tagline { font-size: 15px; }
  .landing-subtitle { margin-bottom: 14px; }
  .landing-btn-primary,
  .landing-btn-secondary { padding: 11px 18px; font-size: 14px; border-radius: 10px; }
  .landing-form { gap: 9px; }
  .landing-input { padding: 11px 14px; }
}

/* ─── Welcome Popup ───────────────────────────────────────────── */
.welcome-popup {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.welcome-popup.hidden { display: none; }

.welcome-box {
  background: linear-gradient(135deg, #1a2a1a 0%, #0f1a0f 100%);
  border: 1px solid rgba(212,168,67,0.4);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 24px rgba(212,168,67,0.08);
}

.welcome-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.welcome-text p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.welcome-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #b8922e 100%);
  color: #000;
  border: none;
  padding: 14px 40px;
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
  min-height: 48px;
  box-shadow: 0 2px 8px rgba(212,168,67,0.2);
}

.welcome-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(212,168,67,0.3);
}

/* Ensure modal scroll areas clear bottom safe area + banner */
.fullscreen-modal .modal-scroll {
  padding-bottom: calc(24px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}

body.banner-visible .app-scroll-area {
  padding-bottom: calc(90px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}

body.banner-visible .fullscreen-modal .modal-scroll {
  padding-bottom: calc(80px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}

/* Accent button (Train) */
.btn-accent {
  background: linear-gradient(135deg, var(--gold) 0%, #b8922e 100%) !important;
  color: #000 !important;
  border-color: var(--gold) !important;
  font-weight: 700 !important;
}

/* ─── Fullscreen Modals ───────────────────────────────────────── */
.fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fullscreen-modal.hidden { display: none !important; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  padding-top: calc(var(--safe-area-top, env(safe-area-inset-top, 36px)) + 10px);
  background: linear-gradient(180deg, rgba(12,20,12,0.98) 0%, rgba(8,14,8,0.95) 100%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  flex-shrink: 0;
  position: relative;
}

.modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.15), transparent);
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.modal-close {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.modal-close:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
  border-color: var(--border-strong);
  transform: rotate(90deg);
}

.modal-search {
  margin: 10px 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 100%);
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  min-height: 44px;
}

.modal-search::placeholder {
  color: var(--text-muted);
}

.modal-search:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,168,67,0.15), 0 0 10px rgba(212,168,67,0.1);
}

.modal-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 16px 16px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.modal-scroll::-webkit-scrollbar {
  width: 6px;
}

.modal-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.modal-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

.legal-scroll {
  padding: 0;
  overflow: hidden;
}

.legal-frame {
  display: block;
  width: 100%;
  min-height: calc(100vh - 110px - var(--safe-area-top, env(safe-area-inset-top, 0px)) - var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  border: 0;
  background: #071007;
}

/* Glossary entries */
.glossary-letter {
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--border-subtle);
  margin-top: 10px;
}

.glossary-entry {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--transition-fast);
}

.glossary-entry:hover {
  background: rgba(255,255,255,0.02);
}

.glossary-term {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.glossary-cat {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 8px;
  font-weight: 500;
}

.glossary-def {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.6;
}

.glossary-aliases {
  font-size: 10px;
  color: var(--gold);
  margin-top: 3px;
  opacity: 0.8;
}

/* How to Play / Rankings content */
/* Learn hub hero */
.guide-hero {
  text-align: center;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}
.guide-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 6px;
}
.guide-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}
.guide-tutorial-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #b8922e 100%);
  color: #000;
  border: none;
  padding: 12px 24px;
  min-height: 48px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 10px;
  display: inline-block;
}
.guide-tutorial-btn:active { transform: scale(0.97); }

.guide-tutorial-btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--gold-light);
  border: 1px solid var(--gold);
  margin-left: 8px;
}
.guide-tutorial-btn-secondary:hover {
  background: rgba(212,168,67,0.12);
}

/* Quick-jump nav */
.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}
.guide-nav-link {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.guide-nav-link:active {
  background: rgba(212,168,67,0.15);
  color: var(--gold);
  border-color: var(--gold-dark);
}

/* Guide sections */
.guide-section {
  margin-bottom: 24px;
  scroll-margin-top: 16px;
}

.guide-section h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

.guide-section p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 10px;
}

.glossary-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212,168,67,0.3);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.glossary-link:hover {
  border-bottom-color: var(--gold);
  color: var(--gold-light);
}

/* Rankings cards */
.ranking-block {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color var(--transition-fast);
}

.ranking-block:hover {
  border-color: var(--border-medium);
}

.ranking-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ranking-number {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
}

.ranking-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  flex: 1;
}

.ranking-strength {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(212,168,67,0.15) 0%, rgba(212,168,67,0.08) 100%);
  color: var(--gold);
  letter-spacing: 0.5px;
  border: 1px solid rgba(212,168,67,0.1);
}

.ranking-cards {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}

.ranking-card {
  width: 52px;
  height: 72px;
  border-radius: 4px;
  border: 2px solid rgba(200,200,190,0.6);
  background: linear-gradient(180deg, #ffffff 0%, #f0f0e8 40%, #e8e8e0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--black-suit);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.3);
  transition: transform var(--transition-fast);
}

.ranking-card:hover {
  transform: translateY(-2px);
}

.ranking-card.red {
  color: var(--red-suit);
}

.ranking-card-rank {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.ranking-card-suit {
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}

.ranking-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
}

.ranking-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.ranking-meta strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Compact mode */
.ranking-block.compact {
  padding: 10px 12px;
  margin-bottom: 6px;
}

.ranking-block.compact .ranking-header {
  margin-bottom: 4px;
}

.ranking-block.compact .ranking-number { font-size: 11px; }
.ranking-block.compact .ranking-name { font-size: 13px; }
.ranking-block.compact .ranking-strength { font-size: 8px; padding: 2px 6px; }

.ranking-row-compact {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ranking-row-compact .ranking-cards {
  gap: 3px;
  flex-shrink: 0;
}

.ranking-card.compact {
  width: 30px;
  height: 42px;
  border-radius: var(--radius-sm);
}

.ranking-card.compact .ranking-card-rank { font-size: 14px; }
.ranking-card.compact .ranking-card-suit { font-size: 11px; }

.ranking-details-compact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

.ranking-meta-inline {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ─── Mini Rankings Overlay ───────────────────────────────────── */
.rankings-mini {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 210px;
  max-height: 50vh;
  background: linear-gradient(180deg, rgba(15,25,15,0.97) 0%, rgba(10,18,10,0.98) 100%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  z-index: 50;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.rankings-mini.hidden { display: none; }

.mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.2) 100%);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.3px;
}

.mini-header button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.mini-header button:hover {
  color: var(--text-primary);
}

.mini-list {
  overflow-y: auto;
  max-height: calc(50vh - 30px);
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.mini-rank-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  transition: background var(--transition-fast);
}

.mini-rank-row:hover {
  background: rgba(255,255,255,0.03);
}

.mini-rank-num {
  font-weight: 800;
  color: var(--gold);
  width: 16px;
  text-align: center;
}

.mini-rank-name {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary);
}

.mini-rank-tag {
  font-size: 8px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ─── Tutorial ────────────────────────────────────────────────── */
.tut-table {
  position: relative;
  width: 80%;
  max-width: 420px;
  margin: 0 auto 10px;
  padding-bottom: 32%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--felt-highlight) 0%, var(--felt-light) 15%, var(--felt-green) 45%, var(--felt-dark) 100%);
  border: 6px solid var(--rail-color);
  box-shadow: inset 0 0 25px rgba(0,0,0,0.35), 0 0 0 2px var(--rail-highlight), 0 4px 16px rgba(0,0,0,0.4);
}

.tut-seat {
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 80px;
  transition: opacity 0.3s;
}

.tut-seat.folded { opacity: 0.25; }
.tut-seat.highlighted { filter: brightness(1.3); }
.tut-seat.winner .tut-seat-label { color: var(--win-green); font-weight: 800; }

.tut-seat-1 { left: 50%; top: 92%; }
.tut-seat-2 { left: 12%; top: 65%; }
.tut-seat-3 { left: 12%; top: 25%; }
.tut-seat-4 { left: 50%; top: 2%; }
.tut-seat-5 { left: 88%; top: 25%; }
.tut-seat-6 { left: 88%; top: 65%; }

.tut-seat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 3px;
  white-space: nowrap;
}

.tut-seat-1 .tut-seat-label { color: var(--gold); }

.tut-seat-cards {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.tut-card {
  width: 28px;
  height: 38px;
  border-radius: 4px;
  border: 1.5px solid rgba(200,200,190,0.6);
  background: linear-gradient(180deg, #ffffff 0%, #f0f0e8 40%, #e8e8e0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--black-suit);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.tut-card.red { color: var(--red-suit); }

.tut-card.back {
  border-color: rgba(212,168,67,0.35);
  background: linear-gradient(160deg, #1e3068 0%, #142450 40%, #0d1a3a 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  color: rgba(212,168,67,0.2);
  font-size: 10px;
}
.tut-card.back::after {
  content: '\2660';
}

.tut-card-rank { font-size: 12px; font-weight: 800; line-height: 1; }
.tut-card-suit { font-size: 10px; line-height: 1; }

.tut-action {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  padding: 2px 7px;
  border-radius: 3px;
  margin-top: 2px;
  display: inline-block;
  letter-spacing: 0.3px;
}

.tut-board {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
}

.tut-board .tut-card {
  width: 34px;
  height: 46px;
}

.tut-board .tut-card-rank { font-size: 14px; }
.tut-board .tut-card-suit { font-size: 12px; }

/* Dealer avatar */
.tut-dealer {
  position: absolute;
  top: 6%;
  left: 40%;
  text-align: center;
  z-index: 3;
}

.tut-dealer-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
  color: #111;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  border: 2px solid var(--gold);
}

.tut-dealer-label {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
}

/* Card dealing animation */
@keyframes dealIn {
  0% { opacity: 0; transform: translate(0, -20px) scale(0.3); }
  50% { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); }
}

.tut-deal-in {
  animation: dealIn 0.4s ease-out both;
}

/* Card flip animation */
@keyframes flipIn {
  0% { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

.tut-flip-in {
  animation: flipIn 0.5s ease-out both;
}

/* Board cards slide in */
@keyframes slideIn {
  0% { opacity: 0; transform: translateY(-15px) scale(0.5); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.tut-slide-in {
  animation: slideIn 0.4s ease-out both;
}

/* Action badge pop in */
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

.tut-pop-in {
  animation: popIn 0.35s ease-out both;
}

/* Text fade in */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.tut-fade-in {
  animation: fadeIn 0.3s ease-out both;
}

/* Chip badge (SB/BB indicator) */
.tut-chip-badge {
  font-size: 10px;
  font-weight: 700;
  color: #111;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 2px;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Win celebration banner */
.tut-win-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  font-size: 24px;
  font-weight: 900;
  color: var(--win-green-light);
  background: rgba(0,0,0,0.8);
  padding: 10px 28px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--win-green);
  box-shadow: 0 0 20px rgba(67,160,71,0.3);
  z-index: 10;
  white-space: nowrap;
  letter-spacing: 1px;
}

.tut-text-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
}

.tut-scenario-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(212,168,67,0.12) 0%, rgba(212,168,67,0.04) 100%);
  border: 1px solid rgba(212,168,67,0.3);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.tut-scenario-label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.tut-scenario-name {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
}

.tut-step-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

.tut-step-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.tut-step-text strong {
  color: #fff;
  font-weight: 700;
}

.tut-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tut-btn {
  padding: 10px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tut-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.tut-btn:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

.tut-btn-primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #111;
  border-color: var(--gold);
  font-weight: 700;
}

.tut-btn-primary:hover {
  background: linear-gradient(180deg, #ecd47a 0%, #d4a843 100%);
  box-shadow: var(--shadow-glow-gold);
  transform: translateY(-1px);
}

.tut-progress {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ─── Card Picker ─────────────────────────────────────────────── */
#card-picker {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#card-picker.hidden {
  display: none;
}

#picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#picker-bar {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #1e241e 0%, #161a16 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 14px 14px 20px;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* When banner is visible, push picker above banner */
body.banner-visible #card-picker {
  padding-bottom: calc(60px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

#picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

#picker-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

#picker-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

#picker-close:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
  border-color: var(--border-strong);
  transform: rotate(90deg);
}

/* Card grid */
#picker-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.picker-card {
  flex: 1;
  height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fafaf6 0%, #eeeee8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--black-suit);
  border: 2px solid transparent;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.picker-card-suit {
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;
}

.picker-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), var(--shadow-glow-gold);
}

.picker-card:active {
  transform: translateY(0) scale(0.95);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.picker-card.red {
  color: var(--red-suit);
}

.picker-card.used {
  opacity: 0.1;
  pointer-events: none;
  box-shadow: none;
}

/* ─── Calculating indicator ───────────────────────────────────── */
.calculating #hand-name {
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* ─── MOBILE-FIRST PREMIUM LAYOUT ─────────────────────────── */

  /* Header — mobile but touch targets stay 44px minimum */
  .header-top { padding: 6px 10px 4px; gap: 6px; }
  #header h1 { font-size: 16px; letter-spacing: 1px; }
  .header-greeting { font-size: 11px; }
  .header-game-controls { gap: 6px; }
  /* Player counter keeps its large buttons */
  .players-group { padding: 3px 5px; gap: 5px; }
  .player-count-btn { width: 44px; height: 44px; font-size: 22px; }
  #players-count { font-size: 17px; min-width: 22px; }
  /* Other header buttons stay tappable */
  .reset-btn { min-height: 44px; min-width: 52px; padding: 0 10px; font-size: 12px; }
  .signout-btn { min-height: 44px; min-width: 52px; padding: 0 10px; font-size: 12px; }
  .report-bug-inline { min-width: 44px; min-height: 44px; font-size: 18px; }
  /* Nav: tight padding so all 8 tabs fit on narrow phones without horizontal scroll */
  .header-nav { padding: 4px 4px 10px; gap: 2px; }
  .nav-btn { min-height: 44px; min-width: 40px; padding: 0 6px; font-size: 11.5px; border-radius: 22px; }
  .nav-btn-settings { padding: 0 7px !important; min-width: 36px !important; font-size: 17px !important; }
  /* Scrim fade edges so users can see there's more if needed */
  .header-nav {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  }

  /* Table — fill the width */
  #table-wrapper {
    margin: 4px auto;
    padding: 0 2px;
  }

  #poker-table {
    border-width: 8px;
    padding-bottom: 60%;
  }

  /* Seats — readable on phone, bigger touch targets */
  .seat { width: 64px; }
  .seat-label { font-size: 10px; font-weight: 700; }
  .seat-badge { width: 36px; height: 36px; font-size: 18px; }

  /* Seat controls — readable on phone */
  .seat-status { gap: 4px; }
  .seat-status-btn { font-size: 11px; padding: 6px 9px; min-height: 32px; }
  .stack-tag-btn { font-size: 11px; padding: 4px 8px; min-height: 30px; }
  .dealer-btn { width: 32px; height: 32px; font-size: 12px; }
  .pos-tag { font-size: 11px; padding: 3px 6px; }

  /* Cards — readable on phone, slightly bigger than before */
  .card-slot { width: 30px; height: 42px; }
  .card-slot .card-rank { font-size: 12px; }
  .card-slot .card-suit { font-size: 10px; }
  .seat-cards { gap: 3px; }

  /* Hero cards significantly bigger — you interact with these directly */
  .seat-1 .card-slot { width: 42px; height: 58px; }
  .seat-1 .card-slot .card-rank { font-size: 18px; }
  .seat-1 .card-slot .card-suit { font-size: 14px; }
  .seat-1 .seat-cards { gap: 5px; }

  .board-slot { width: 32px; height: 44px; }
  .board-slot .card-rank { font-size: 13px; }
  .board-slot .card-suit { font-size: 11px; }

  #community { gap: 4px; }
  .street-label { font-size: 10px; letter-spacing: 0.5px; }

  /* Card picker — big enough for fingers */
  .picker-card { height: 44px; font-size: 13px; min-width: 26px; }
  .picker-card-suit { font-size: 10px; }
  #picker-bar { padding: 12px 10px 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  #picker-header { margin-bottom: 10px; }
  #picker-grid { gap: 6px; }
  .picker-suit-row { gap: 3px; }

  /* Setup bar — 44px minimum touch targets */
  .setup-bar { padding: 10px; gap: 8px; }
  .setup-item input { padding: 10px 8px; font-size: 15px; min-height: 48px; }
  .setup-item label { font-size: 10px; letter-spacing: 0.5px; margin-bottom: 5px; }
  .position-display { font-size: 12px; padding: 10px 4px; min-height: 48px; }
  .setup-bb span { font-size: 14px; padding: 10px 4px; min-height: 48px; }

  /* Strategy banner — impactful */
  .strategy-banner { padding: 12px 14px; margin-bottom: 8px; }
  .strategy-action { font-size: 26px; letter-spacing: 2px; }
  .strategy-hand-desc { font-size: 12px; }
  .strategy-detail { font-size: 12px; }
  .action-btns { width: 100%; gap: 8px; }
  .action-btn { min-height: 48px; font-size: 13px; padding: 10px 14px; font-weight: 700; }
  .raise-size-panel { width: 100%; padding: 12px 14px; }
  .raise-size-panel label { font-size: 12px; }
  .raise-size-row { gap: 8px; }
  #raise-size-input { width: 92px; min-height: 48px; font-size: 17px; }
  .raise-size-suffix { font-size: 13px; }
  .raise-size-confirm { min-height: 48px; font-size: 13px; padding: 10px 14px; }
  .hand-flow-note { font-size: 12px; }
  .hand-reset-btn { width: 100%; max-width: 260px; min-height: 44px; font-size: 13px; }

  /* Results — clean spacing */
  #results-panel { padding: 0 10px 16px; margin-top: 4px; }
  .results-section { padding: 12px; margin-bottom: 8px; }
  .results-section h2 { font-size: 11px; margin-bottom: 8px; }
  .equity-bars { gap: 6px; }
  .equity-row { gap: 8px; }
  .equity-label { font-size: 11px; width: 32px; }
  .equity-bar-track { height: 22px; border-radius: 11px; }
  .equity-bar-fill { border-radius: 11px; }
  .equity-value { font-size: 13px; width: 46px; }
  .hand-name-display { font-size: 13px; padding: 10px 12px; margin-top: 10px; }
}

@media (min-width: 700px) {
  .seat {
    width: 100px;
  }

  .card-slot {
    width: 36px;
    height: 50px;
  }

  .board-slot {
    width: 46px;
    height: 64px;
  }

  .picker-card {
    width: 42px;
    height: 54px;
  }

  .setup-bar {
    padding: 16px 20px;
    gap: 12px;
  }

  .results-section {
    padding: 20px;
  }

  #results-panel {
    padding: 0 20px 20px;
  }
}

/* ─── Premium Polish: Tabular Nums, Form Consistency, Active States ── */

/* Tabular nums for all number displays */
.st-stat-value,
.st-session-result,
.st-session-buyin,
.st-session-payout,
.st-graph-amount,
.trn-score-value,
.trn-score-pct,
.equity-value,
.outs-count,
#stack-bb-display,
.position-display {
  font-variant-numeric: tabular-nums;
}

/* Consistent form input styling for dynamically injected inputs */
.st-form-input,
.fullscreen-modal input[type="text"],
.fullscreen-modal input[type="number"],
.fullscreen-modal input[type="date"],
.fullscreen-modal select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

/* Consistent button active/pressed states */
.st-btn-add:active,
.st-btn-clear:active,
.trn-choice-btn:active,
.trn-next-btn:active,
.trn-reset-btn:active,
.nav-btn:active,
.action-btn:active,
.tut-btn:active {
  transform: scale(0.97);
  transition-duration: 0.05s;
}

/* Ensure all text in modals is visible and not clipped */
.fullscreen-modal * {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mobile modal padding fix */
@media (max-width: 420px) {
  .modal-header {
    padding: 12px 12px;
    padding-top: calc(var(--safe-area-top, env(safe-area-inset-top, 36px)) + 8px);
  }
  .modal-title {
    font-size: 17px;
  }
  .modal-search {
    margin: 8px 12px;
    font-size: 14px;
  }
  .modal-scroll {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 375px — tightest Samsung screens (Galaxy S series) */
@media (max-width: 384px) {
  /* Keep inputs tappable but let text shrink so they fit */
  .setup-bar { padding: 8px; gap: 6px; }
  .setup-item input { padding: 10px 6px; font-size: 14px; min-height: 48px; }
  .setup-item label { font-size: 9px; letter-spacing: 0.4px; }
  .position-display { font-size: 11px; padding: 10px 2px; min-height: 48px; }
  .setup-bb span { font-size: 13px; min-height: 48px; }
  #results-panel { padding: 0 8px 12px; }
  .results-section { padding: 10px; }
  .equity-row { gap: 6px; }
  .equity-label { width: 30px; font-size: 10px; }
  .equity-value { width: 42px; font-size: 12px; }
  .equity-bar-track { height: 20px; border-radius: 10px; }
  .equity-bar-fill { border-radius: 10px; }
  .hand-name-display { font-size: 12px; padding: 8px 10px; }
  .welcome-box { padding: 24px 16px; }
  .welcome-title { font-size: 20px; }
  .welcome-text p { font-size: 13px; }
  .welcome-btn { padding: 14px 32px; font-size: 15px; min-height: 48px; }
  /* Shrink header brand to make room for buttons */
  #header h1 { font-size: 14px; letter-spacing: 0.8px; }
  .header-nav { padding: 4px 8px 10px; gap: 4px; }
  .nav-btn { padding: 0 11px; font-size: 12px; }
}

@media (max-width: 384px) {
  .tut-seat { width: 40px; }
  .tut-seat-label { font-size: 10px; }
  .tut-seat-cards { gap: 1px; }
  .tut-card { width: 24px; height: 34px; }
  .tut-card-rank { font-size: 11px; }
  .tut-card-suit { font-size: 9px; }
  .tut-action { font-size: 9px; padding: 1px 4px; }
  .tut-chip-badge { font-size: 9px; }
  .tut-dealer-label { font-size: 10px; }
  .tut-text-box { padding: 10px; }
  .tut-step-title { font-size: 15px; }
  .tut-step-text { font-size: 13px; }
  .tut-table { max-width: 280px; }
}

/* Header button in rankings modal */
.header-btn {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212,168,67,0.3);
  background: linear-gradient(180deg, rgba(212,168,67,0.12) 0%, rgba(212,168,67,0.06) 100%);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  margin-left: auto;
  margin-right: 12px;
}

.header-btn:hover {
  background: linear-gradient(180deg, rgba(212,168,67,0.2) 0%, rgba(212,168,67,0.12) 100%);
  border-color: rgba(212,168,67,0.5);
}

.header-btn:active {
  transform: scale(0.96);
}

@keyframes broadcastSlideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Play Mode */
.play-modal {
  background:
    radial-gradient(circle at top, rgba(212,168,67,0.08), transparent 28%),
    linear-gradient(180deg, #08120d 0%, #050b08 100%);
}

.play-modal-header {
  background:
    linear-gradient(180deg, rgba(8,18,13,0.98) 0%, rgba(5,11,8,0.94) 100%);
}

.play-scroll {
  padding: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(212,168,67,0.06), transparent 24%),
    linear-gradient(180deg, rgba(8,18,13,0.96) 0%, rgba(4,9,7,1) 100%);
  overflow-y: auto;
}

.play-mode {
  --play-panel: rgba(10, 22, 16, 0.84);
  --play-border: rgba(255,255,255,0.08);
  --play-soft: rgba(255,255,255,0.06);
  --play-gold: #d6af55;
  --play-ink: #f6f1e3;
  --play-muted: #8aa089;
  --play-green: #2a8c58;
  --play-red: #cf514f;
  --play-blue: #4a8ecb;
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  color: var(--play-ink);
  display: grid;
  gap: 14px;
}

/* Table-first layout: table fills screen, dock at bottom */
.play-mode-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
  overflow: hidden;
}
.play-mode-table .play-stage-card {
  flex: 1 1 0%;
  min-height: 0;
  position: relative;
}
.play-mode-table .play-feed-card {
  flex: 0 0 auto;
  min-height: 0;
  max-height: min(21vh, 220px);
  overflow: hidden;
  margin: 8px 10px 0;
}
.play-mode-table .play-hero-dock {
  flex: 0 0 auto;
}
.play-mode-table .play-mini-hud {
  flex: 0 0 auto;
}

/* Mini HUD — compact one-line overlay */
.play-mini-hud {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--play-muted);
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  letter-spacing: 0.02em;
}
.play-mini-hud span { white-space: nowrap; }
.play-quit-btn {
  background: none;
  border: 1px solid rgba(207,81,79,0.3);
  color: var(--play-red);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
}
.play-quit-btn:hover { background: rgba(207,81,79,0.15); }

/* ─── Add Player Hint (pointing finger) ─────────────────────── */
.add-player-hint {
  position: fixed;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
  animation: hintFadeIn 0.3s ease forwards;
}
.add-player-hint.is-leaving {
  animation: hintFadeOut 0.3s ease forwards;
}
.add-player-hint-finger {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
  animation: hintBounce 0.7s ease-in-out infinite;
  margin-left: var(--hint-finger-shift, 0);
}
.add-player-hint-text {
  background: #ffffff;
  color: #000000;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 2px rgba(0,0,0,0.2);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
#players-plus.is-hinted {
  animation: hintPulse 0.8s ease-in-out infinite;
  background: linear-gradient(135deg, var(--gold) 0%, #b8922e 100%) !important;
  color: #000 !important;
  border-color: var(--gold) !important;
}
@keyframes hintFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hintFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(212,168,67,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(212,168,67,0); }
}

/* ─── Premium Flash Overlay ──────────────────────────────── */
.play-premium-flash {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: flashFadeIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
}
.play-premium-flash.is-interactive {
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.4) 100%);
}
.play-flash-btn {
  margin-top: 14px;
  padding: 14px 42px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1a1a;
  background: linear-gradient(180deg, #f8e9b5 0%, #d6af55 50%, #a47a26 100%);
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.45),
    0 0 40px rgba(214,168,67,0.35),
    inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.play-flash-btn:active {
  transform: scale(0.96);
  box-shadow: 0 3px 12px rgba(0,0,0,0.45), 0 0 24px rgba(214,168,67,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.play-premium-flash.is-leaving {
  animation: flashFadeOut 0.4s cubic-bezier(0.55, 0, 0.68, 0.53) forwards;
}
.play-flash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 36px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16,28,20,0.95) 0%, rgba(6,14,10,0.98) 100%);
  border: 1px solid rgba(212,168,67,0.35);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    0 0 60px rgba(212,168,67,0.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(10px) scale(0.94);
  animation: flashPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  max-width: 85%;
  text-align: center;
}
.play-premium-flash.is-leaving .play-flash-inner {
  animation: flashPopOut 0.4s ease forwards;
}
.play-flash-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--play-gold);
  opacity: 0.85;
}
.play-flash-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #f8e9b5 0%, #d6af55 50%, #a47a26 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 12px rgba(212,168,67,0.3);
  line-height: 1.1;
}
.play-flash-sub {
  font-size: 13px;
  font-weight: 600;
  color: rgba(246,241,227,0.85);
  letter-spacing: 0.02em;
}
.play-flash-champion .play-flash-inner {
  border-color: #f8e9b5;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.7),
    0 0 100px rgba(248,233,181,0.4),
    0 0 200px rgba(212,168,67,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15);
  animation: flashPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, flashChampionPulse 1.5s ease-in-out 0.6s infinite;
}
.play-flash-champion .play-flash-title {
  font-size: 42px;
}
.play-flash-win .play-flash-inner {
  border-color: rgba(76,180,108,0.5);
}
.play-flash-win .play-flash-title {
  background: linear-gradient(180deg, #c8f0d4 0%, #4cb46c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.play-flash-loss .play-flash-inner {
  border-color: rgba(207,81,79,0.5);
}
.play-flash-loss .play-flash-title {
  background: linear-gradient(180deg, #ffc8c6 0%, #cf514f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.play-flash-subtle .play-flash-inner {
  padding: 10px 22px;
  background: rgba(6,14,10,0.85);
}
.play-flash-subtle .play-flash-title {
  font-size: 18px;
}
.play-flash-subtle .play-flash-sub {
  font-size: 11px;
}
.play-flash-neutral .play-flash-title {
  font-size: 22px;
}
@keyframes flashFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes flashFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes flashPopIn {
  0% { transform: translateY(20px) scale(0.85); opacity: 0; }
  60% { transform: translateY(-4px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes flashPopOut {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-12px) scale(0.96); opacity: 0; }
}
@keyframes flashChampionPulse {
  0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 100px rgba(248,233,181,0.4), 0 0 200px rgba(212,168,67,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
  50% { box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 140px rgba(248,233,181,0.55), 0 0 240px rgba(212,168,67,0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
}

/* Hero dock — compact bottom panel */
.play-hero-dock {
  background: linear-gradient(180deg, rgba(10,20,15,0.97) 0%, rgba(4,10,7,1) 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
  padding: 8px 12px calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}
.play-dock-hand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.play-dock-cards {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.play-dock-cards .play-card-lg {
  box-shadow:
    0 2px 6px rgba(0,0,0,0.2),
    0 8px 18px rgba(0,0,0,0.15),
    0 0 0 1px rgba(255,255,255,0.06);
}
.play-dock-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.play-dock-info strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--play-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.play-dock-info span {
  font-size: 11px;
  color: var(--play-muted);
}
.play-dock-status {
  text-align: center;
  font-size: 12px;
  color: var(--play-muted);
  padding: 8px 0;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.play-dock-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.play-dock-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--play-gold);
}
.play-dock-timer .play-turn-track { flex: 1; }

/* Clean seat styling — typography-tuned */
.play-seat-shell {
  position: relative;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.06);
}
.play-seat.is-active .play-seat-shell {
  border-color: rgba(214,175,85,0.7);
  animation: playActivePulse 1.6s ease-in-out infinite;
  will-change: box-shadow;
}
/* Seat name + chips sit below the circle */
.play-seat-name {
  font-size: 9px;
  font-weight: 700;
  color: var(--play-ink);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.play-seat-chips {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin-top: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
  letter-spacing: 0.02em;
}
.play-seat-chips em {
  color: var(--play-gold);
  font-style: normal;
}
.play-seat-pos {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 700;
  color: var(--play-gold);
  background: rgba(0,0,0,0.8);
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 2;
}
.play-seat-cards {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 2px;
}
/* Classic white oval speech bubble — tall and wide */
.play-seat-action {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 900;
  padding: 14px 16px;
  border-radius: 22px;
  min-width: 100px;
  min-height: 36px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #000000 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(0,0,0,0.2);
  white-space: nowrap;
  z-index: 100;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.play-seat-action::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #ffffff;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
  z-index: -1;
}
.play-seat-action.tone-win,
.play-seat-action.tone-loss,
.play-seat-action.tone-warning,
.play-seat-action.tone-info,
.play-seat-action.tone-neutral {
  background: #ffffff;
  color: #000000 !important;
}
.play-seat-action.tone-muted { opacity: 0.8; }
/* Hide 'Waiting' text - only show real actions */
.play-seat:not(.is-folded):not(.is-busted) .play-seat-action.tone-muted { opacity: 0; }

/* Active player pointing finger indicator — on the right side, pointing LEFT at player */
.play-seat.is-active::before {
  content: '\1F448';
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%);
  font-size: 28px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
  z-index: 50;
  animation: fingerBounce 0.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fingerBounce {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-5px); }
}

/* Showdown dock */
.play-showdown-dock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 14px 12px 16px;
}
.play-showdown-summary {
  text-align: center;
}
.play-showdown-summary strong {
  font-size: 14px;
  font-weight: 800;
  display: block;
  margin-bottom: 3px;
}
.play-showdown-summary span {
  font-size: 11px;
  color: var(--play-muted);
}
.play-showdown-actions {
  display: flex;
  gap: 8px;
}
.play-showdown-summary.tone-win strong {
  color: #9fe2ba;
  text-shadow: 0 0 10px rgba(80,200,120,0.2);
}

.play-overline,
.play-panel-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--play-gold);
}

.play-subline,
.play-panel-note {
  color: var(--play-muted);
  line-height: 1.55;
}

.play-hero-banner,
.play-panel,
.play-launch-card,
.play-feed-card,
.play-action-rail,
.play-result-banner {
  background: var(--play-panel);
  border: 1px solid var(--play-border);
  border-radius: 22px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.28);
  backdrop-filter: blur(12px);
}

.play-hero-banner {
  padding: 22px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}

.play-hero-banner h2,
.play-panel h3,
.play-launch-card h3,
.play-action-hero h3,
.play-result-banner h3 {
  margin: 0;
  line-height: 1.1;
}

.play-hero-banner h2 {
  font-size: clamp(28px, 5vw, 38px);
  max-width: 12ch;
}

.play-hero-banner-meta,
.play-hero-metrics {
  display: grid;
  gap: 10px;
}

.play-hero-stat,
.play-hero-metric,
.play-hud-pill {
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.06);
}

.play-hero-stat span,
.play-hero-metric span,
.play-hud-pill span,
.play-lobby-player-role,
.play-seat-role,
.play-standing-meta span,
.play-showdown-row span {
  color: var(--play-muted);
  font-size: 12px;
}

.play-hero-stat strong,
.play-hero-metric strong,
.play-hud-pill strong,
.play-lobby-player-stack,
.play-showdown-stack,
.play-standing-meta strong {
  display: block;
  color: var(--play-ink);
  font-size: 15px;
  font-weight: 700;
}

.play-lobby-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.play-panel,
.play-feed-card {
  padding: 18px;
}

.play-panel-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.play-lobby-roster,
.play-level-list,
.play-feed-list,
.play-review-list,
.play-standings-list,
.play-showdown-list {
  display: grid;
  gap: 10px;
}

.play-feed-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.play-lobby-player,
.play-standing-row,
.play-showdown-row,
.play-feed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.play-lobby-player.is-hero,
.play-standing-row.is-hero {
  border-color: rgba(214,175,85,0.35);
  background: linear-gradient(180deg, rgba(214,175,85,0.12) 0%, rgba(214,175,85,0.05) 100%);
}

.play-lobby-player-main,
.play-standing-name,
.play-showdown-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.play-lobby-player-name,
.play-seat-name {
  font-size: 14px;
  font-weight: 700;
}

.play-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(214,175,85,0.24) 0%, rgba(214,175,85,0.1) 100%);
  border: 1px solid rgba(214,175,85,0.28);
  color: var(--play-gold);
  font-weight: 800;
  flex-shrink: 0;
}

.play-level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.play-launch-card {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* ── Tournament Setup (redesigned lobby) ─────────────────── */
.play-setup{max-width:420px;margin:0 auto;gap:18px;padding:6px 0 20px}
.play-setup-header{text-align:center;padding:6px 0 2px}
.play-setup-header h2{margin:0;font-size:clamp(22px,5vw,28px);letter-spacing:.02em;color:var(--play-ink)}
.play-setup-section{display:grid;gap:10px}
.play-setup-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--play-gold)}
.play-pill-group{display:flex;gap:6px}
.play-pill{flex:1;min-height:40px;padding:0 6px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.04);color:var(--play-muted);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.play-pill:hover{background:rgba(255,255,255,.08);color:var(--play-ink)}
.play-pill.is-active{background:linear-gradient(135deg,rgba(214,175,85,.22) 0%,rgba(214,175,85,.10) 100%);border-color:rgba(214,175,85,.5);color:var(--play-gold);box-shadow:0 0 12px rgba(214,175,85,.12)}
.play-pill-wide{min-width:64px}
.play-setup-players-row{display:flex;gap:8px;flex-wrap:wrap}
.play-setup-player{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:13px;font-weight:600;color:var(--play-muted)}
.play-setup-player.is-hero{border-color:rgba(214,175,85,.3);background:rgba(214,175,85,.08);color:var(--play-gold)}
.play-setup-player .play-avatar{width:26px;height:26px;font-size:12px}
.play-setup-player-name{white-space:nowrap}
.play-setup-name-input{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;
  color:var(--play-ink);
  font-size:11px;
  font-weight:600;
  padding:3px 6px;
  width:60px;
  text-align:center;
  font-family:inherit;
}
.play-setup-name-input:focus{
  outline:none;
  border-color:var(--play-gold);
  background:rgba(255,255,255,0.12);
}
.play-setup-blinds{gap:8px}
.play-setup-level-list{display:flex;gap:6px}
.play-setup-level{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:12px;color:var(--play-ink)}
.play-setup-level-num{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--play-muted)}
.play-setup-hint{font-size:12px;color:var(--play-muted);text-align:center}
.play-setup-start{width:100%;min-height:50px;font-size:16px;letter-spacing:.04em;border-radius:14px}

.play-hud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.play-status-banner,
.play-result-banner {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.play-status-text,
.play-result-banner p {
  margin: 0;
  line-height: 1.5;
}

.play-status-phase {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  font-weight: 700;
}

.play-mode .tone-neutral { color: var(--play-ink); }
.play-mode .tone-muted { color: var(--play-muted); }
.play-mode .tone-info { color: #b9dbff; }
.play-mode .tone-win { color: #9fe2ba; }
.play-mode .tone-warning { color: #f0cf86; }
.play-mode .tone-loss { color: #ffb0ac; }

.play-stage-card {
  position: relative;
  padding: 0;
  min-height: 0;
  background: transparent;
}

.play-stage-glow {
  display: none;
}

.play-table-surface {
  position: absolute;
  inset: 16px 2px 8px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 90% 85% at 50% 45%, rgba(55,160,105,0.95) 0%, rgba(30,110,65,0.97) 45%, rgba(14,65,38,0.99) 75%, rgba(6,35,18,1) 100%);
  border: 5px solid #2a1a10;
  outline: 1px solid rgba(80,60,40,0.4);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.3),
    inset 0 0 80px rgba(0,0,0,0.1),
    0 8px 30px rgba(0,0,0,0.4);
}

/* Wood rail overlay */
.play-table-surface::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 6px solid transparent;
  background:
    linear-gradient(180deg, #6b4f30 0%, #4a3218 25%, #3a2518 50%, #2a1a0c 75%, #1a0e04 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.08), inset 0 -2px 4px rgba(0,0,0,0.4);
}

.play-seat {
  position: absolute;
  width: min(90px, 24vw);
  transform: translate(-50%, -50%);
  text-align: center;
  overflow: visible;
  z-index: 5;
}
.play-seat.is-active { z-index: 15; }
.play-seat-shell { overflow: visible; }

.play-seat-0 { left: 50%; top: 82%; }
.play-seat-1 { left: 11%; top: 58%; }
.play-seat-2 { left: 22%; top: 22%; }
.play-seat-3 { left: 50%; top: 18%; }
.play-seat-4 { left: 78%; top: 22%; }
.play-seat-5 { left: 89%; top: 58%; }

.play-seat-shell {
  padding: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.1);
  width: 44px;
  height: 44px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

.play-seat.is-active .play-seat-shell {
  border-color: rgba(214,175,85,0.7);
  box-shadow:
    0 0 0 1px rgba(214,175,85,0.4),
    0 0 20px rgba(214,175,85,0.25),
    0 12px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: playActivePulse 1.6s ease-in-out infinite;
  will-change: box-shadow;
}

.play-seat.is-folded .play-seat-shell {
  opacity: 0.5;
  filter: brightness(0.7) saturate(0.6);
  border-color: rgba(255,255,255,0.04);
}

.play-seat.is-busted .play-seat-shell {
  opacity: 0.35;
  filter: grayscale(0.8) brightness(0.5);
  border-color: rgba(255,255,255,0.03);
}

.play-seat-head,
.play-seat-stack-row,
.play-action-clock,
.play-review-top,
.play-review-summary,
.play-raise-head,
.play-raise-footer,
.play-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.play-seat-id {
  min-width: 0;
  flex: 1;
}

.play-seat-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.play-dealer-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f8e08a 0%, #d4a83a 100%);
  color: #27190b;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
  border: 1px solid rgba(180,140,60,0.5);
}

.play-seat-stack-row strong,
.play-seat-stack-meter,
.play-turn-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}

.play-seat-stack-meter {
  margin: 8px 0;
}

.play-seat-stack-meter span,
.play-turn-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}

.play-seat-stack-meter span {
  background: linear-gradient(90deg, rgba(214,175,85,0.95), rgba(96,198,141,0.95));
}

.play-turn-fill {
  background: linear-gradient(90deg, rgba(214,175,85,1), rgba(255,110,74,0.9));
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.play-turn-track.is-large {
  height: 8px;
}

.play-turn-meter,
.play-seat-cards,
.play-hero-cards,
.play-showdown-cards,
.play-board-row,
.play-raise-presets {
  display: flex;
  gap: 8px;
}

.play-board-row {
  justify-content: center;
  gap: 6px;
}

.play-turn-meter {
  align-items: center;
  margin-bottom: 8px;
}

.play-seat-wager {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 3;
}

.play-seat-wager span {
  font-size: 11px;
  font-weight: 700;
  color: var(--play-gold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.6);
  white-space: nowrap;
}

/* Left-side seats: put wager on the LEFT of seat to avoid going off-table */
.play-seat-1 .play-seat-wager,
.play-seat-2 .play-seat-wager {
  left: auto;
  right: calc(100% + 6px);
}

.play-turn-meter span,
.play-action-clock span {
  font-size: 12px;
  font-weight: 700;
  color: var(--play-gold);
  white-space: nowrap;
}

.play-seat-cards {
  margin-bottom: 8px;
}

.play-table-center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 70vw);
  display: grid;
  gap: 12px;
  justify-items: center;
}

.play-pot-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.play-center-badge,
.play-pot-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(5,14,10,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 20px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.play-center-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--play-gold);
}

.play-pot-stack {
  min-height: 34px;
  min-width: 28px;
}

.play-pot-stack.is-empty {
  opacity: 0.32;
}

.play-pot-pill {
  text-align: center;
  padding: 10px 20px;
  background: rgba(5,12,8,0.88);
  border: 1px solid rgba(214,175,85,0.2);
  box-shadow:
    0 0 16px rgba(214,175,85,0.12),
    0 10px 24px rgba(0,0,0,0.3);
}

.play-pot-pill span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--play-muted);
  margin-bottom: 1px;
}

.play-pot-pill strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--play-gold);
  text-shadow: 0 0 12px rgba(214,175,85,0.3);
}

.play-card,
.play-board-slot {
  width: 54px;
  height: 74px;
  border-radius: 14px;
}

.play-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(175deg, #ffffff 0%, #f8f5ef 35%, #efe8d8 75%, #e8dfcc 100%);
  border: 1px solid rgba(25,25,25,0.1);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.12),
    0 8px 16px rgba(0,0,0,0.15),
    0 16px 28px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.play-card {
  animation: none !important;
}
.play-card.is-new {
  animation: playDealIn 0.34s ease forwards, playPulse 0.6s ease forwards !important;
  will-change: transform, opacity, box-shadow;
}

/* Showdown card flip - opponents' face-up reveal */
.play-card.is-revealed {
  animation: playFlipIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

/* Seat action badge pop-in */
.play-seat-action.is-fresh {
  animation: playBadgeIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* Pot increase bump */
.play-pot-pill.is-bumped {
  animation: playPotBump 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform;
}

.play-card-sm {
  width: 34px;
  height: 48px;
  border-radius: 10px;
}

.play-card-lg {
  width: 64px;
  height: 88px;
}

.play-card-rank {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.play-card-suit {
  font-size: 16px;
  line-height: 1;
}

.play-card.is-red { color: #cb413d; }
.play-card.is-black { color: #181818; }

.play-card-back {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #2a4a8a 0%, #1a3060 40%, #0e1e3e 100%);
  border: 1px solid rgba(120,160,220,0.2);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.15),
    0 8px 16px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.play-card-back-pattern {
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1.5px solid rgba(180,200,240,0.18);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 4px, transparent 4px 8px),
    radial-gradient(ellipse at center, rgba(100,140,220,0.12) 0%, transparent 70%);
}

.play-board-slot {
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.025);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.15);
}

/* Flop | Turn | River separator gaps */
.play-board-row .play-card:nth-child(3),
.play-board-row .play-board-slot:nth-child(3) {
  margin-right: 6px;
}
.play-board-row .play-card:nth-child(4),
.play-board-row .play-board-slot:nth-child(4) {
  margin-left: 2px;
  margin-right: 6px;
}
.play-board-row .play-card:nth-child(5),
.play-board-row .play-board-slot:nth-child(5) {
  margin-left: 2px;
}

.play-action-rail {
  position: sticky;
  bottom: 6px;
  padding: 18px;
}

.play-action-rail.is-live {
  box-shadow: 0 0 0 1px rgba(214,175,85,0.16), 0 18px 42px rgba(0,0,0,0.36);
}

.play-action-hero {
  display: grid;
  gap: 14px;
}

.play-action-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.play-hero-stack-meta {
  text-align: right;
}

.play-hero-stack-meta strong {
  display: block;
  font-size: 14px;
}

.play-action-panel,
.play-coach-card,
.play-raise-card,
.play-review-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.play-action-panel {
  display: grid;
  gap: 12px;
}

.play-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.play-primary-btn,
.play-secondary-btn,
.play-action-btn,
.play-raise-preset {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.play-primary-btn,
.play-secondary-btn,
.play-action-btn {
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
}

.play-primary-btn {
  background: linear-gradient(135deg, #f2cd73 0%, #d5a53c 100%);
  color: #241707;
  box-shadow: 0 10px 18px rgba(214,175,85,0.22);
}

.play-primary-btn.is-full {
  width: 100%;
}

.play-secondary-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--play-ink);
}

.play-action-btn {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.play-action-btn.is-fold {
  background: linear-gradient(160deg, #c44040 0%, #992e2e 100%);
  box-shadow: 0 4px 12px rgba(180,50,50,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.play-action-btn.is-call {
  background: linear-gradient(160deg, #f0c850 0%, #c89a2e 100%);
  color: #1a1000;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(214,175,85,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}
.play-action-btn.is-raise {
  background: linear-gradient(160deg, #38b068 0%, #228a48 100%);
  box-shadow: 0 4px 12px rgba(42,140,88,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.play-action-btn.is-allin {
  background: linear-gradient(160deg, #9550e0 0%, #6e30b8 100%);
  box-shadow: 0 4px 12px rgba(120,60,200,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}

.play-primary-btn:hover,
.play-secondary-btn:hover,
.play-action-btn:hover,
.play-raise-preset:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.play-primary-btn:active,
.play-secondary-btn:active,
.play-action-btn:active,
.play-raise-preset:active {
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.92);
  transition-duration: 0.06s;
}

.play-raise-presets {
  flex-wrap: wrap;
}

.play-raise-preset {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--play-ink);
  font-size: 12px;
}

.play-raise-slider {
  width: 100%;
  accent-color: var(--play-gold);
  height: 6px;
  margin: 4px 0;
}

.play-review-card.is-good {
  border-color: rgba(95,201,141,0.26);
  background: rgba(95,201,141,0.08);
}

.play-review-card.is-leak {
  border-color: rgba(207,81,79,0.25);
  background: rgba(207,81,79,0.08);
}

.play-showdown-row.is-winner {
  border-color: rgba(80,200,120,0.4);
  background: linear-gradient(180deg, rgba(60,200,110,0.14) 0%, rgba(60,200,110,0.04) 100%);
  box-shadow: 0 0 16px rgba(60,200,110,0.12);
}

/* Winner seat glow during showdown */
.play-mode-showdown .play-seat.is-winner .play-seat-shell {
  border-color: rgba(80,200,120,0.6);
  box-shadow:
    0 0 0 1px rgba(80,200,120,0.3),
    0 0 20px rgba(60,200,110,0.25),
    0 12px 24px rgba(0,0,0,0.3);
  animation: playWinnerGlow 1.8s ease-in-out infinite;
}

@keyframes playWinnerGlow {
  0%   { box-shadow: 0 0 0 1px rgba(80,200,120,0.3), 0 0 12px rgba(60,200,110,0.15), 0 12px 24px rgba(0,0,0,0.3); }
  50%  { box-shadow: 0 0 0 1px rgba(80,200,120,0.5), 0 0 28px rgba(60,200,110,0.35), 0 12px 24px rgba(0,0,0,0.3); }
  100% { box-shadow: 0 0 0 1px rgba(80,200,120,0.3), 0 0 12px rgba(60,200,110,0.15), 0 12px 24px rgba(0,0,0,0.3); }
}

@keyframes playDealIn {
  from { transform: translateY(12px) scale(0.94); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes playPulse {
  0% { box-shadow: 0 0 0 rgba(214,175,85,0); }
  50% { box-shadow: 0 0 22px rgba(214,175,85,0.36); }
  100% { box-shadow: 0 0 0 rgba(214,175,85,0); }
}

@keyframes playFlipIn {
  0%   { transform: rotateY(90deg) scale(0.85); opacity: 0; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes playBadgeIn {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes playActivePulse {
  0%   { box-shadow: 0 0 0 1px rgba(214,175,85,0.4), 0 0 12px rgba(214,175,85,0.15), 0 12px 24px rgba(0,0,0,0.3); }
  50%  { box-shadow: 0 0 0 1px rgba(214,175,85,0.65), 0 0 26px rgba(214,175,85,0.35), 0 12px 24px rgba(0,0,0,0.3); }
  100% { box-shadow: 0 0 0 1px rgba(214,175,85,0.4), 0 0 12px rgba(214,175,85,0.15), 0 12px 24px rgba(0,0,0,0.3); }
}

/* ── Chip Bet Animation ── */
.play-chip-bet {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  will-change: transform, opacity;
  animation: chipFlyToPot var(--chip-fly-duration, 600ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.play-chip-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  min-height: 16px;
}

.play-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.25),
    inset 0 -1px 2px rgba(0,0,0,0.3),
    0 1px 3px rgba(0,0,0,0.4);
  position: relative;
}

.play-chip + .play-chip {
  margin-top: -14px;
}

.play-seat-chip-stack .play-chip {
  width: 15px;
  height: 15px;
}

.play-seat-chip-stack .play-chip + .play-chip {
  margin-top: -11px;
}

/* Dashed inner ring */
.play-chip::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.3);
}

.play-chip.chip-25 {
  background: radial-gradient(circle at 35% 35%, #ffe066, #e6b800 50%, #b38f00 100%);
  border-color: rgba(180,144,0,0.5);
}

.play-chip.chip-50 {
  background: radial-gradient(circle at 35% 35%, #6fa8ff, #2979ff 50%, #1a53b0 100%);
  border-color: rgba(26,83,176,0.5);
}

.play-chip.chip-100 {
  background: radial-gradient(circle at 35% 35%, #69f0ae, #2e7d32 50%, #1b5e20 100%);
  border-color: rgba(27,94,32,0.5);
}

.play-chip.chip-500 {
  background: radial-gradient(circle at 35% 35%, #ff6b6b, #d32f2f 50%, #8b1a1a 100%);
  border-color: rgba(139,26,26,0.5);
}

.play-chip.chip-1000 {
  background: radial-gradient(circle at 35% 35%, #666, #2a2a2a 50%, #111 100%);
  border-color: rgba(80,80,80,0.5);
}

@keyframes chipFlyToPot {
  0% {
    transform: translate(var(--chip-start-x, 0), var(--chip-start-y, 0)) scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--chip-end-x, 0), var(--chip-end-y, 0)) scale(0.7) rotate(45deg);
    opacity: 0;
  }
}

.play-chip-bet.is-push {
  animation-name: chipPushToSeat;
}

@keyframes chipPushToSeat {
  0% {
    transform: translate(var(--chip-start-x, 0), var(--chip-start-y, 0)) scale(0.95);
    opacity: 1;
  }
  100% {
    transform: translate(var(--chip-end-x, 0), var(--chip-end-y, 0)) scale(1.08);
    opacity: 0;
  }
}

@keyframes playPotBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.play-showdown-auto {
  font-size: 11px;
  font-weight: 700;
  color: var(--play-muted);
}

@media (max-width: 900px) {
  .play-hero-banner,
  .play-lobby-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .play-scroll { padding: 14px 10px 20px; }
  .play-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .play-stage-card { min-height: 320px; padding: 6px; }
  .play-mode-table .play-feed-card {
    max-height: min(18vh, 170px);
    margin: 6px 8px 0;
    padding: 12px;
  }
  .play-feed-list {
    gap: 8px;
  }
  .play-feed-item {
    padding: 10px 12px;
  }
  .play-table-surface { border-width: 4px; }
  .play-table-surface::before { inset: -4px; border-width: 4px; }
  .play-seat { width: min(80px, 22vw); }
  .play-seat-shell { width: 38px; height: 38px; }
  .play-seat-0 { top: 78%; }
  .play-seat-1 { left: 13%; top: 58%; }
  .play-seat-2 { left: 24%; top: 14%; }
  .play-seat-3 { top: 10%; }
  .play-seat-4 { left: 76%; top: 14%; }
  .play-seat-5 { left: 87%; top: 58%; }
  .play-table-center { width: min(280px, 72vw); }
  .play-card, .play-board-slot { width: 44px; height: 60px; border-radius: 10px; }
  .play-card-lg { width: 56px; height: 76px; }
  .play-card-rank { font-size: 17px; }
  .play-card-suit { font-size: 14px; }
  .play-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .play-action-btn { min-height: 42px; }
  .play-launch-card,
  .play-status-banner,
  .play-result-banner,
  .play-action-hero-top {
    flex-direction: column;
    align-items: stretch;
  }
  .play-result-actions {
    width: 100%;
    justify-content: stretch;
  }
  .play-result-actions .play-primary-btn,
  .play-result-actions .play-secondary-btn {
    width: 100%;
  }
  .play-pot-pill strong { font-size: 13px; }
  .play-center-badge { font-size: 11px; padding: 6px 12px; }
  .play-dock-actions { gap: 5px; }
}

@media (max-width: 412px) {
  .play-stage-card { min-height: 300px; padding: 6px; }
  .play-mode-table .play-feed-card {
    max-height: min(16vh, 145px);
    margin: 4px 8px 0;
    padding: 10px;
  }
  .play-table-surface { min-height: 280px; border-width: 8px; }
  .play-table-surface::before { inset: -8px; border-width: 8px; }
  .play-seat { width: min(128px, 34vw); }
  .play-seat-0 { top: 82%; }
  .play-seat-1 { left: 15%; top: 61%; }
  .play-seat-2 { left: 21%; top: 19%; }
  .play-seat-4 { left: 79%; top: 19%; }
  .play-seat-5 { left: 85%; top: 61%; }
  .play-seat-shell { padding: 5px 7px; border-radius: 14px; }
  .play-seat-name { font-size: 10px; }
  .play-seat-chips { font-size: 13px; font-weight: 900; }
  .play-seat-action { font-size: 10px; padding: 14px 16px; color: #000 !important; }
  .play-hero-dock { padding: 8px 10px 12px; }
  .play-dock-hand { gap: 8px; margin-bottom: 4px; }
  .play-dock-info strong { font-size: 13px; }
  .play-dock-info span { font-size: 10px; }
  .play-board-row { gap: 5px; }
  .play-card, .play-board-slot { width: 40px; height: 56px; border-radius: 9px; }
  .play-card-sm { width: 28px; height: 40px; border-radius: 7px; }
  .play-card-lg { width: 52px; height: 72px; }
  .play-card-rank { font-size: 15px; }
  .play-card-suit { font-size: 12px; }
  .play-table-center { width: min(260px, 74vw); gap: 8px; }
  .play-pot-pill { padding: 6px 14px; }
  .play-pot-pill strong { font-size: 12px; }
  .play-pot-pill span { font-size: 9px; }
  .play-center-badge { font-size: 10px; padding: 5px 10px; }
}

@media (max-width: 384px) {
  .play-stage-card { min-height: 0; }
  .play-table-surface { border-width: 3px; }
  .play-seat { width: min(70px, 20vw); }
  .play-card, .play-board-slot { width: 37px; height: 52px; border-radius: 8px; }
  .play-card-sm { width: 26px; height: 37px; border-radius: 6px; }
  .play-card-lg { width: 48px; height: 66px; }
  .play-card-rank { font-size: 14px; }
  .play-card-suit { font-size: 11px; }
  .play-seat-shell { padding: 4px 6px; border-radius: 12px; }
  .play-seat-name { font-size: 9px; }
  .play-seat-chips { font-size: 12px; font-weight: 900; }
  .play-board-row { gap: 4px; }
  .play-board-row .play-card:nth-child(3),
  .play-board-row .play-board-slot:nth-child(3) { margin-right: 4px; }
  .play-board-row .play-card:nth-child(4),
  .play-board-row .play-board-slot:nth-child(4) { margin-left: 1px; margin-right: 4px; }
  .play-board-row .play-card:nth-child(5),
  .play-board-row .play-board-slot:nth-child(5) { margin-left: 1px; }
}

@media (max-width: 360px) {
  .play-table-center { width: min(240px, 78vw); }
  .play-seat { width: min(110px, 32vw); }
  .play-seat-1 { left: 16%; }
  .play-seat-5 { left: 84%; }
  .play-action-rail { padding: 14px; }
  .play-card, .play-board-slot { width: 34px; height: 48px; }
  .play-card-lg { width: 46px; height: 62px; }
}

/* Mobile height optimization — keep table ~60vh, dock ~25vh */
@media (max-height: 760px) {
  .play-stage-card { min-height: 54vh; }
  .play-table-surface { min-height: calc(54vh - 20px); }
  .play-action-rail { position: static; }
}

@media (max-height: 700px) {
  .play-stage-card { min-height: 50vh; }
  .play-table-surface { min-height: calc(50vh - 16px); }
  .play-hero-dock { padding: 6px 10px 10px; }
  .play-dock-hand { margin-bottom: 3px; }
  .play-mini-hud { padding: 3px 8px; }
}

/* ─── First-Run Tour (Guided Walkthrough) ───────────────────────── */

/* No dark overlay — background stays fully visible. */
.first-run-overlay {
  display: none;
}

/* Spotlight: highlights the targeted element with a glowing gold ring.
   No blackout — just a bright border and pulsing glow so the element stands out. */
.first-run-spotlight {
  position: fixed;
  border: 3px solid var(--gold);
  border-radius: 14px;
  background: rgba(212, 168, 67, 0.08);
  box-shadow:
    0 0 30px rgba(212, 168, 67, 0.85),
    0 0 60px rgba(212, 168, 67, 0.45),
    inset 0 0 14px rgba(212, 168, 67, 0.35);
  z-index: 10001;
  pointer-events: none;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  animation: firstRunPulse 1.8s ease-in-out infinite;
}

/* Pointing hand — uses direction-specific emoji, no rotation needed */
.first-run-hand {
  position: fixed;
  font-size: 44px;
  z-index: 10002;
  pointer-events: none;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 4px rgba(212, 168, 67, 0.6));
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  animation: firstRunHandBounce 1.2s ease-in-out infinite;
}

.first-run-tooltip {
  position: fixed;
  background: linear-gradient(180deg, rgba(22,42,24,0.98) 0%, rgba(10,23,13,0.98) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 14px 16px 12px;
  z-index: 10003;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(212, 168, 67, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--text-primary);
  max-width: 340px;
  box-sizing: border-box;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: firstRunTooltipIn 0.35s ease;
  /* Use flex column so title + text scroll and buttons stay pinned at the bottom */
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.first-run-tooltip.centered {
  animation: firstRunTooltipCenterIn 0.35s ease;
}

.first-run-progress {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}

.first-run-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.25;
  flex-shrink: 0;
  margin: 4px 0 6px;
}

.first-run-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-primary);
  /* Scroll the description if it's too tall for the available space */
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 2px;
  margin-bottom: 10px;
}
.first-run-text::-webkit-scrollbar { width: 4px; }
.first-run-text::-webkit-scrollbar-thumb { background: rgba(212,168,67,0.4); border-radius: 2px; }

.first-run-text strong {
  color: var(--gold-light);
  font-weight: 700;
}

.first-run-text em {
  color: var(--text-secondary);
  font-style: italic;
}

.first-run-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(212,168,67,0.15);
}

.first-run-btn {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.first-run-btn:hover { background: rgba(255, 255, 255, 0.14); }
.first-run-btn:active { transform: scale(0.96); }

.first-run-btn-primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #0a0f0a;
  border-color: var(--gold);
  margin-left: auto;
  padding: 0 18px;
  font-size: 14px;
  flex-shrink: 0;
}
.first-run-btn-primary:hover {
  background: linear-gradient(180deg, #f1d278 0%, #dfb547 100%);
}

.first-run-skip {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  padding: 0 10px;
  font-size: 12px;
}
.first-run-skip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

@keyframes firstRunFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes firstRunTooltipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes firstRunTooltipCenterIn {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes firstRunPulse {
  0%, 100% {
    box-shadow:
      0 0 28px rgba(212, 168, 67, 0.75),
      0 0 60px rgba(212, 168, 67, 0.4),
      inset 0 0 12px rgba(212, 168, 67, 0.3);
  }
  50% {
    box-shadow:
      0 0 48px rgba(212, 168, 67, 1),
      0 0 90px rgba(212, 168, 67, 0.6),
      inset 0 0 22px rgba(212, 168, 67, 0.55);
  }
}

@keyframes firstRunHandBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Narrow phones: tighter tooltip padding */
@media (max-width: 384px) {
  .first-run-tooltip { padding: 14px 16px 12px; }
  .first-run-title { font-size: 16px; }
  .first-run-text { font-size: 13px; }
  .first-run-btn-primary { padding: 0 18px; }
  .first-run-hand { font-size: 38px; }
}

/* ─── Focus-visible for keyboard accessibility ──────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Landing trust link separator ──────────────────────────── */
.landing-meta-separator {
  color: var(--text-muted);
  font-size: 12px;
  opacity: 0.6;
  margin: 0 6px;
}

/* ─── Welcome Toast ─────────────────────────────────────────── */
.welcome-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  max-width: 480px;
  width: calc(100% - 32px);
  animation: toastSlideUp 0.4s ease-out;
}

.welcome-toast.hidden { display: none; }

.welcome-toast-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 1px rgba(212,168,67,0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.welcome-toast-content p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.welcome-toast-close {
  align-self: flex-end;
  background: var(--gold);
  color: #0a0f0a;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.welcome-toast-close:hover { opacity: 0.85; }

@keyframes toastSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Ad Slots ──────────────────────────────────────────────── */
.ad-slot {
  text-align: center;
  overflow: hidden;
}

.ad-slot-top {
  max-width: min(65vh, 900px);
  margin: 0 auto 4px;
  min-height: 0;
}

.ad-slot-sidebar {
  display: none;
}

/* Placeholder state (no publisher ID configured) */
.ad-slot-placeholder {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.4;
  margin: 4px auto;
}

.ad-slot-placeholder::after {
  content: 'ad';
}

.ad-slot-sidebar.ad-slot-placeholder {
  display: none;
}

/* Modal banner ad slot */
.ad-slot-modal {
  margin: 16px 0 0;
  min-height: 90px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Guide inline ad slot */
.ad-slot-guide {
  margin: 20px 0;
  min-height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Ad gate display ad */
.ad-slot-gate {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Home nav button — subtle accent */
.nav-btn-home {
  color: var(--gold);
  border-color: rgba(212,168,67,0.2);
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP WEB LAYOUT (900px+)
   Premium poker-table feel, not a stretched phone UI.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 900px) {

  /* ── LANDING HERO ─────────────────────────────────────────── */
  .landing-page {
    overflow: hidden;
  }

  /* ── 1. LEFT HALF ATMOSPHERE — felt-green radial showcase stage ── */
  .landing-page::after {
    background:
      radial-gradient(ellipse 60% 50% at 25% 46%, rgba(26,107,42,0.18) 0%, rgba(26,107,42,0.06) 40%, transparent 70%),
      radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.4) 100%);
  }

  /* ── 6. VERTICAL DIVIDER — atmospheric gold glow ── */
  .landing-page::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 50%;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(212,168,67,0.08) 15%,
      rgba(212,168,67,0.22) 35%,
      rgba(232,201,106,0.30) 50%,
      rgba(212,168,67,0.22) 65%,
      rgba(212,168,67,0.08) 85%,
      transparent 100%
    );
    z-index: 40;
    pointer-events: none;
    box-shadow:
      0 0 8px 1px rgba(212,168,67,0.08),
      0 0 20px 2px rgba(212,168,67,0.04);
  }

  /* ── 2. CARD FAN — dramatic showcase presentation ── */
  .landing-page .landing-card-fan {
    position: absolute;
    top: 46%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
  }

  /* Gold reflection surface under card fan */
  .landing-page .landing-card-fan::after {
    content: '';
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 50px;
    background: radial-gradient(ellipse at 50% 0%, rgba(212,168,67,0.12) 0%, rgba(212,168,67,0.04) 50%, transparent 80%);
    pointer-events: none;
    filter: blur(6px);
  }

  .landing-page .lcf-card {
    position: relative;
    top: auto;
    left: auto;
    width: 115px;
    height: 161px;
    animation: none;
    opacity: 1;
    flex-shrink: 0;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.3),
      0 4px 8px rgba(0,0,0,0.25),
      0 14px 32px rgba(0,0,0,0.5),
      0 20px 48px rgba(0,0,0,0.3),
      0 0 0 1px rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .landing-page .lcf-card-1 { transform: rotate(-16deg) translateY(6px); }
  .landing-page .lcf-card-2 { transform: rotate(-5deg) translateY(-2px); margin-left: -12px; z-index: 1; }
  .landing-page .lcf-card-3 { transform: rotate(5deg) translateY(-2px); margin-left: -12px; z-index: 2; }
  .landing-page .lcf-card-4 { transform: rotate(16deg) translateY(6px); margin-left: -12px; }
  .landing-page .lcf-rank { font-size: 24px; }
  .landing-page .lcf-suit { font-size: 20px; }
  .landing-page .lcf-center-suit { font-size: 58px; }

  /* Chips — stacked tower arrangement on desktop */
  .landing-page .chip-canvas {
    position: absolute;
    top: auto;
    bottom: 14%;
    left: 10%;
    right: 52%;
    height: 160px;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
  }

  /* Override JS inline styles — arrange into 3 stacked towers */
  .landing-page .chip-physics {
    animation: none !important;
    position: absolute !important;
    width: 72px !important;
    height: 72px !important;
    opacity: 1 !important;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)) !important;
  }

  /* Stack 1 (left): chips 1-3 */
  .landing-page .chip-physics:nth-child(1) {
    left: 20% !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(2deg) !important;
    z-index: 20 !important;
  }
  .landing-page .chip-physics:nth-child(2) {
    left: 20% !important;
    bottom: 8px !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(-1deg) !important;
    z-index: 21 !important;
  }
  .landing-page .chip-physics:nth-child(3) {
    left: 20% !important;
    bottom: 16px !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(3deg) !important;
    z-index: 22 !important;
  }

  /* Stack 2 (center): chips 4-7 — tallest */
  .landing-page .chip-physics:nth-child(4) {
    left: 45% !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(-2deg) !important;
    z-index: 23 !important;
  }
  .landing-page .chip-physics:nth-child(5) {
    left: 45% !important;
    bottom: 8px !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(1deg) !important;
    z-index: 24 !important;
  }
  .landing-page .chip-physics:nth-child(6) {
    left: 45% !important;
    bottom: 16px !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(-1deg) !important;
    z-index: 25 !important;
  }
  .landing-page .chip-physics:nth-child(7) {
    left: 45% !important;
    bottom: 24px !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(2deg) !important;
    z-index: 26 !important;
  }

  /* Stack 3 (right): chips 8-9 — short */
  .landing-page .chip-physics:nth-child(8) {
    left: 70% !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(3deg) !important;
    z-index: 27 !important;
  }
  .landing-page .chip-physics:nth-child(9) {
    left: 70% !important;
    bottom: 8px !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(-2deg) !important;
    z-index: 28 !important;
  }

  /* ── 3 & 5. CONTENT — right half, better vertical rhythm ── */
  .landing-page .landing-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 64px 48px 60px;
    opacity: 1;
    transform: none;
    z-index: 30;
  }

  .landing-page .landing-content:has(.landing-form) {
    align-items: center;
    overflow-y: auto;
  }

  /* ── 3. LOGO — grand presence with enhanced gold glow ── */
  .landing-page .landing-logo {
    font-size: 44px;
    letter-spacing: 7px;
    text-align: left;
    margin-bottom: 18px;
    filter: drop-shadow(0 2px 12px rgba(212,168,67,0.40)) drop-shadow(0 0 30px rgba(212,168,67,0.12));
  }

  /* ── 3. TAGLINE — more presence and weight ── */
  .landing-page .landing-tagline {
    font-size: 24px;
    font-weight: 400;
    text-align: left;
    margin-bottom: 14px;
    line-height: 1.35;
    color: #f0f0f0;
    letter-spacing: 0.2px;
  }

  /* ── 3 & 5. SUBTITLE — breathes more, refined color ── */
  .landing-page .landing-subtitle {
    font-size: 14px;
    text-align: left;
    margin-bottom: 36px;
    max-width: 400px;
    color: #8aa68a;
    line-height: 1.5;
  }

  /* ── 3. BENEFITS BOX — refined glass treatment ── */
  .landing-page .landing-benefits {
    text-align: left;
    margin-bottom: 36px;
    padding: 18px 22px;
    max-width: 400px;
    background: linear-gradient(
      160deg,
      rgba(212,168,67,0.07) 0%,
      rgba(212,168,67,0.04) 100%
    );
    border: 1px solid rgba(212,168,67,0.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.03),
      0 2px 12px rgba(0,0,0,0.15);
  }
  .landing-page .landing-benefits li {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .landing-page .landing-benefits li:last-child {
    margin-bottom: 0;
  }

  /* ── 4. CTA BUTTONS — richer gold, more definition ── */
  .landing-page .landing-buttons {
    width: 100%;
    max-width: 360px;
    gap: 14px;
  }

  /* Primary: richer gold gradient with subtle shimmer */
  .landing-page .landing-btn-primary {
    font-size: 16px;
    padding: 15px 0;
    background: linear-gradient(
      160deg,
      #f0d060 0%,
      #e8c05a 20%,
      #d4a843 50%,
      #c49535 75%,
      #b8862a 100%
    );
    box-shadow:
      0 4px 18px rgba(212,168,67,0.30),
      0 8px 32px rgba(212,168,67,0.12),
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -1px 0 rgba(0,0,0,0.08);
    letter-spacing: 0.5px;
  }
  .landing-page .landing-btn-primary:hover {
    box-shadow:
      0 6px 24px rgba(212,168,67,0.45),
      0 12px 40px rgba(212,168,67,0.15),
      inset 0 1px 0 rgba(255,255,255,0.25),
      inset 0 -1px 0 rgba(0,0,0,0.08);
  }

  /* Secondary: more defined glass button */
  .landing-page .landing-btn-secondary {
    font-size: 15px;
    padding: 13px 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 2px 8px rgba(0,0,0,0.2);
    letter-spacing: 0.3px;
  }
  .landing-page .landing-btn-secondary:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(212,168,67,0.25);
    color: #f0f0f0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 4px 14px rgba(0,0,0,0.25);
  }

  .landing-page .landing-btn-skip {
    font-size: 14px;
    padding: 10px 0;
  }

  .landing-page .landing-meta-links {
    align-self: flex-start;
    margin-top: 12px;
  }

  /* Forms on desktop — constrain width */
  .landing-page .landing-form {
    max-width: 360px;
    width: 100%;
  }

  /* ── APP SHELL — full-width, no wasted space ───────────────── */

  #header {
    padding-top: 0;
    background: linear-gradient(180deg, rgba(10,18,10,0.98) 0%, rgba(8,14,8,0.95) 100%);
    border-bottom: 1px solid var(--border-medium);
  }

  #header::after {
    left: 2%;
    right: 2%;
  }

  .header-top {
    padding: 10px 32px 6px;
  }

  .header-brand h1 {
    font-size: 20px;
    letter-spacing: 3px;
  }

  .header-nav {
    padding: 2px 32px 10px;
    gap: 6px;
    overflow-x: visible;
  }

  .nav-btn {
    font-size: 13px;
    padding: 8px 20px;
    min-height: 38px;
    border-radius: var(--radius-md);
    letter-spacing: 0.3px;
    transition: all var(--transition-fast);
  }

  .nav-btn:hover {
    background: rgba(212,168,67,0.12);
    border-color: rgba(212,168,67,0.25);
    color: var(--gold-light);
  }

  .nav-btn-settings {
    position: relative;
    right: auto;
    margin-left: auto;
    background: rgba(255,255,255,0.06) !important;
    box-shadow: none;
  }

  /* Main content — FULL WIDTH, no max-width cap */
  .app-scroll-area {
    max-width: none;
    width: 100%;
    padding: 0 24px;
  }

  /* ── Desktop ad slots ── */
  .ad-slot-top {
    max-width: min(65vh, 900px);
    min-height: 90px;
    margin: 4px auto;
  }

  .ad-slot-sidebar {
    display: block;
    position: fixed;
    top: 120px;
    right: 16px;
    width: 160px;
    min-height: 600px;
    z-index: 5;
  }

  .ad-slot-sidebar.ad-slot-placeholder {
    display: flex;
    width: 160px;
    min-height: 300px;
  }

  /* Home button accent on desktop */
  .nav-btn-home {
    color: var(--gold);
    border-color: rgba(212,168,67,0.25);
  }
  .nav-btn-home:hover {
    background: rgba(212,168,67,0.15);
  }

  /* ── POKER TABLE — sized to fit viewport with controls ────── */

  #table-wrapper {
    max-width: min(65vh, 900px);
    margin: 4px auto;
    padding: 0 12px;
  }

  /* Reduce table vertical size so setup+results fit below */
  #poker-table {
    padding-bottom: 56%;
  }

  /* 2. Table visual refinement — outer glow + richer felt */
  #poker-table {
    border-width: 16px;
    background:
      radial-gradient(ellipse at 50% 38%, var(--felt-highlight) 0%, var(--felt-light) 12%, var(--felt-green) 42%, var(--felt-dark) 100%);
    box-shadow:
      /* inner depth */
      inset 0 0 60px rgba(0,0,0,0.45),
      inset 0 0 20px rgba(0,0,0,0.25),
      inset 0 -5px 16px rgba(0,0,0,0.18),
      /* rail rings */
      0 0 0 2px var(--rail-inner),
      0 0 0 5px var(--rail-highlight),
      0 0 0 7px var(--rail-shine),
      0 0 0 8px rgba(0,0,0,0.4),
      /* ambient glow — makes the table pop against the dark bg */
      0 0 40px rgba(26,107,42,0.18),
      0 0 80px rgba(26,107,42,0.10),
      /* drop shadow */
      0 12px 50px rgba(0,0,0,0.65),
      0 4px 12px rgba(0,0,0,0.45);
  }

  /* 3. Seats — larger labels, cards, and badges on desktop */
  .seat {
    width: 100px;
  }

  .seat-label {
    font-size: 12px;
    letter-spacing: 0.3px;
  }

  .seat-badge {
    width: 42px;
    height: 42px;
    font-size: 20px;
    border-width: 2px;
    color: rgba(255,255,255,0.25);
  }

  .seat-badge:hover {
    box-shadow: 0 0 16px rgba(255,255,255,0.08);
  }

  .card-slot {
    width: 36px;
    height: 50px;
    border-radius: 5px;
  }

  .card-slot.has-card {
    font-size: 12px;
  }

  .seat-cards {
    gap: 4px;
  }

  .pos-tag {
    font-size: 10px;
    padding: 2px 6px;
  }

  .dealer-btn {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .stack-tag-btn {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* 4. Community cards — scale up for desktop */
  #community {
    gap: 14px;
  }

  .board-slot {
    width: 48px;
    height: 66px;
    border-radius: 7px;
  }

  .board-slot .card-rank {
    font-size: 16px;
  }

  .board-slot .card-suit {
    font-size: 15px;
  }

  .street-label {
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 6px;
  }

  .board-cards {
    gap: 5px;
  }

  /* 5. Setup bar — compact, matches table width */
  .setup-bar {
    max-width: min(65vh, 900px);
    margin: 0 auto 4px;
    padding: 10px 14px;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .setup-item label {
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .setup-item input {
    padding: 13px 12px;
    font-size: 16px;
    min-height: 50px;
    border-radius: var(--radius-md);
  }

  .position-display {
    font-size: 13px;
    padding: 12px 8px;
    min-height: 50px;
  }

  #stack-bb-display {
    font-size: 16px;
  }

  /* 6. Results panel — compact, matches table width */
  #results-panel {
    max-width: min(65vh, 900px);
    margin: 0 auto;
    padding: 0 14px 12px;
  }

  .results-section {
    padding: 14px 18px;
    margin-bottom: 8px;
    border-radius: var(--radius-xl);
  }

  .results-section h2 {
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

  .equity-bars {
    gap: 10px;
  }

  .equity-row {
    gap: 14px;
  }

  .equity-label {
    width: 40px;
    font-size: 12px;
  }

  .equity-bar-track {
    height: 28px;
    border-radius: 14px;
  }

  .equity-bar-fill {
    border-radius: 14px;
  }

  .equity-value {
    width: 56px;
    font-size: 16px;
  }

  .hand-name-display {
    font-size: 16px;
    padding: 16px 20px;
    margin-top: 14px;
  }

  /* 7. Strategy advisor — better desktop sizing */
  .strategy-banner {
    max-width: clamp(850px, 60vw + 100px, 1000px);
    padding: 18px 24px;
    margin-bottom: 16px;
    border-radius: var(--radius-xl);
  }

  .strategy-action {
    font-size: 32px;
    letter-spacing: 4px;
    margin-bottom: 8px;
  }

  .strategy-hand-desc {
    font-size: 15px;
    max-width: 56ch;
  }

  .strategy-detail {
    font-size: 13px;
    max-width: 56ch;
    line-height: 1.6;
  }

  .action-btns {
    width: min(100%, 440px);
    gap: 10px;
    margin-top: 14px;
  }

  .action-btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius-md);
    letter-spacing: 0.3px;
  }

  /* ── MODALS — polished web dialogs ────────────────────────── */
  .fullscreen-modal:not(.hidden) {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 48px 24px !important;
    overflow-y: auto !important;
  }

  /* Both header and scroll: same max-width, auto-centered */
  .fullscreen-modal > .modal-header,
  .fullscreen-modal > .modal-scroll {
    max-width: 760px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .fullscreen-modal > .modal-header {
    padding: 16px 20px;
    padding-top: 16px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(180deg, rgba(18,28,18,0.98) 0%, rgba(14,22,14,0.95) 100%) !important;
    border: 1px solid var(--border-medium);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 1;
  }

  .fullscreen-modal > .modal-scroll {
    background: var(--bg-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border: 1px solid var(--border-medium);
    border-top: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 1px rgba(212,168,67,0.1);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  .fullscreen-modal .modal-close {
    font-size: 24px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    transition: background var(--transition-fast);
  }

  .fullscreen-modal .modal-close:hover {
    background: rgba(255,255,255,0.1);
    transform: none;
  }

  /* Modal title */
  .modal-title {
    font-size: 20px;
    letter-spacing: 0.5px;
  }

  /* ── FIRST-RUN TOUR — side-panel style on desktop ─────────── */
  .first-run-tooltip {
    max-width: 420px;
  }

  .first-run-tooltip.centered {
    top: auto;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
  }

  /* ── TYPOGRAPHY scale-up ──────────────────────────────────── */
  .equity-bar-label {
    font-size: 13px;
  }

  .hand-name {
    font-size: 16px;
  }

  /* ── DESKTOP POLISH — typography, spacing, micro-refinements ── */

  /* 1. Body text — bump base for comfortable desktop reading */
  body {
    font-size: 16px;
    line-height: 1.55;
  }

  /* 2. Modal section headers — larger titles, more breathing room */
  .modal-title {
    font-size: 22px;
    letter-spacing: 0.8px;
  }

  .modal-header {
    padding: 18px 24px;
  }

  .modal-scroll {
    padding: 24px 28px 48px;
  }

  /* Guide / Learn modal typography */
  .guide-hero {
    padding: 28px 24px 22px;
    margin-bottom: 24px;
  }

  .guide-hero-title {
    font-size: 26px;
    margin-bottom: 10px;
  }

  .guide-hero-sub {
    font-size: 15px;
    line-height: 1.6;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
  }

  .guide-nav {
    gap: 8px;
    padding-bottom: 20px;
    margin-bottom: 24px;
  }

  .guide-nav-link {
    font-size: 12px;
    padding: 7px 14px;
  }

  .guide-section {
    margin-bottom: 32px;
  }

  .guide-section h3 {
    font-size: 19px;
    margin-bottom: 12px;
  }

  .guide-section p {
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 12px;
  }

  /* Rankings — larger cards and better spacing */
  .ranking-block {
    padding: 20px 24px;
    margin-bottom: 16px;
  }

  .ranking-name {
    font-size: 20px;
  }

  .ranking-number {
    font-size: 16px;
  }

  .ranking-strength {
    font-size: 11px;
    padding: 4px 12px;
  }

  .ranking-card {
    width: 58px;
    height: 80px;
  }

  /* Settings section headers */
  .settings-section-title {
    font-size: 12px;
    letter-spacing: 1.5px;
    padding: 12px 20px 8px;
  }

  .settings-row {
    padding: 16px 20px;
    min-height: 60px;
  }

  .settings-row-label {
    font-size: 16px;
  }

  .settings-row-sub {
    font-size: 13px;
    margin-top: 4px;
  }

  .settings-account-name {
    font-size: 20px;
  }

  .settings-account-sub {
    font-size: 14px;
  }

  /* 3. Form inputs — taller, wider, more generous padding */
  .landing-input {
    padding: 14px 18px;
    font-size: 15px;
    border-radius: 10px;
  }

  .landing-form {
    max-width: 380px;
    gap: 10px;
  }

  .landing-form-title {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .modal-search {
    margin: 12px 24px;
    padding: 14px 18px;
    font-size: 15px;
    min-height: 48px;
    border-radius: var(--radius-md);
  }

  /* Session tracker form inputs (injected via JS — needs specificity) */
  .fullscreen-modal .st-form-input {
    padding: 13px 14px;
    font-size: 15px;
    min-height: 46px;
    border-radius: var(--radius-md);
  }

  .fullscreen-modal .st-form-label {
    font-size: 11px;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
  }

  .fullscreen-modal input[type="text"],
  .fullscreen-modal input[type="number"],
  .fullscreen-modal input[type="date"],
  .fullscreen-modal select {
    padding: 13px 14px;
    font-size: 15px;
    min-height: 46px;
    border-radius: var(--radius-md);
  }

  /* 4. Training mode — larger question text, spacious answer options
        Training uses inline styles via JS, so we target the container
        and use descendant selectors with specificity boosts */
  #training-content {
    font-size: 15px;
    line-height: 1.65;
  }

  #training-content button {
    min-height: 48px;
  }

  /* 5. Session tracker — desktop proportions */
  .fullscreen-modal .st-container {
    padding: 8px 0 48px;
  }

  .fullscreen-modal .st-stats {
    gap: 12px;
    margin-bottom: 28px;
  }

  .fullscreen-modal .st-stat-card {
    padding: 18px 12px;
  }

  .fullscreen-modal .st-stat-label {
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .fullscreen-modal .st-stat-value {
    font-size: 20px;
  }

  .fullscreen-modal .st-section-header {
    margin: 32px 0 16px;
    padding-bottom: 10px;
  }

  .fullscreen-modal .st-section-title {
    font-size: 14px;
    letter-spacing: 1.2px;
  }

  .fullscreen-modal .st-form {
    padding: 20px 24px;
    margin-bottom: 8px;
  }

  .fullscreen-modal .st-form-grid {
    gap: 14px;
  }

  .fullscreen-modal .st-btn-add {
    padding: 14px 24px;
    font-size: 14px;
    min-height: 48px;
  }

  .fullscreen-modal .st-session {
    padding: 14px 18px;
    gap: 14px;
  }

  .fullscreen-modal .st-session-date {
    font-size: 13px;
  }

  .fullscreen-modal .st-session-bottom {
    font-size: 12px;
    gap: 12px;
  }

  .fullscreen-modal .st-session-notes {
    max-width: 200px;
    font-size: 12px;
  }

  .fullscreen-modal .st-session-result {
    font-size: 18px;
  }

  .fullscreen-modal .st-list {
    gap: 8px;
  }

  .fullscreen-modal .st-graph-wrap {
    padding: 20px 16px 16px;
  }

  .fullscreen-modal .st-graph-legend {
    font-size: 11px;
    padding: 0 8px;
  }

  /* 6. Glossary — use more desktop space */
  .glossary-letter {
    font-size: 22px;
    padding: 18px 0 8px;
    margin-top: 14px;
  }

  .glossary-entry {
    padding: 14px 0;
  }

  .glossary-term {
    font-size: 16px;
  }

  .glossary-cat {
    font-size: 11px;
    margin-left: 10px;
  }

  .glossary-def {
    font-size: 14px;
    margin-top: 5px;
    line-height: 1.7;
  }

  .glossary-aliases {
    font-size: 11px;
    margin-top: 5px;
  }

  /* 7. Card picker — scale up for desktop */
  #card-picker {
    align-items: center;
  }

  #picker-bar {
    max-width: 600px;
    padding: 20px 20px 28px;
    border-radius: var(--radius-xl);
    border-bottom: 1px solid var(--border-subtle);
    animation: none;
  }

  #picker-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  #picker-title {
    font-size: 17px;
  }

  #picker-close {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  #picker-grid {
    gap: 8px;
  }

  .picker-suit-row {
    gap: 6px;
  }

  .picker-card {
    height: 54px;
    font-size: 15px;
    border-radius: var(--radius-sm);
  }

  .picker-card-suit {
    font-size: 12px;
    margin-top: 2px;
  }

  /* 8. Overall spacing — open, not cramped */
  .app-scroll-area {
    padding: 0 24px;
  }

  #table-wrapper {
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .setup-bar {
    margin-bottom: 24px;
  }

  #results-panel {
    padding-bottom: 32px;
  }

  .results-section {
    margin-bottom: 20px;
  }

  .results-section h2 {
    font-size: 13px;
    letter-spacing: 2.5px;
    margin-bottom: 16px;
  }

  /* Tutorial / Learn content inside modals — more room */
  .tut-text-box {
    padding: 20px 24px;
    margin-bottom: 18px;
  }

  .tut-step-title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .tut-step-text {
    font-size: 15px;
    line-height: 1.75;
  }

  .tut-scenario-banner {
    padding: 10px 18px;
    margin-bottom: 16px;
    font-size: 14px;
  }

  .tut-scenario-label {
    font-size: 12px;
  }

  .tut-scenario-name {
    font-size: 15px;
  }

  .tut-btn {
    padding: 12px 28px;
    font-size: 15px;
  }

  /* Blind timer inside modal — slightly larger for desktop */
  #blind-timer-content {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Strategy banner spacing */
  .strategy-banner {
    margin-bottom: 20px;
    padding: 22px 28px;
  }

  .strategy-action {
    margin-bottom: 10px;
  }

  .strategy-hand-desc {
    margin-bottom: 8px;
  }

  /* Welcome box — more generous proportions */
  .welcome-box {
    padding: 40px 32px;
  }

  .welcome-title {
    font-size: 28px;
  }

  .welcome-text p {
    font-size: 15px;
    line-height: 1.7;
  }

  .welcome-btn {
    padding: 16px 40px;
    font-size: 16px;
    min-height: 52px;
  }

  /* Section dividers — more vertical air */
  .fullscreen-modal .modal-scroll > *:not(:last-child) {
    margin-bottom: 8px;
  }
}

/* ── EXTRA-WIDE (1400px+) ─────────────────────────────────── */
@media (min-width: 1400px) {

  /* Landing: larger cards and typography */
  .landing-page .lcf-card {
    width: 135px;
    height: 189px;
  }
  .landing-page .lcf-rank { font-size: 30px; }
  .landing-page .lcf-suit { font-size: 26px; }
  .landing-page .lcf-center-suit { font-size: 74px; }

  .landing-page .landing-logo { font-size: 52px; letter-spacing: 7px; }
  .landing-page .landing-tagline { font-size: 28px; }
  .landing-page .landing-subtitle { font-size: 15px; }
  .landing-page .landing-benefits li { font-size: 15px; }

  /* App: larger table on wide screens */
  #table-wrapper { max-width: min(75vh, 1050px); }
  .setup-bar { max-width: min(75vh, 1050px); }
  #results-panel { max-width: min(75vh, 1050px); }
  .strategy-banner { max-width: min(75vh, 1050px); }

  .board-slot {
    width: 52px;
    height: 72px;
  }
  .board-slot .card-rank { font-size: 17px; }
  .board-slot .card-suit { font-size: 16px; }

  .action-btns {
    width: min(100%, 480px);
  }

  .fullscreen-modal .modal-scroll {
    max-width: 840px;
  }
}

/* ── ULTRA-WIDE (1800px+) ─────────────────────────────────── */
@media (min-width: 1800px) {
  .landing-page .lcf-card {
    width: 150px;
    height: 210px;
  }
  .landing-page .lcf-rank { font-size: 34px; }
  .landing-page .lcf-suit { font-size: 30px; }
  .landing-page .lcf-center-suit { font-size: 84px; }

  .landing-page .landing-logo { font-size: 58px; }
  .landing-page .landing-tagline { font-size: 32px; }

  #table-wrapper { max-width: min(80vh, 1100px); }
  .setup-bar { max-width: min(80vh, 1100px); }
  #results-panel { max-width: min(80vh, 1100px); }
  .strategy-banner { max-width: min(80vh, 1100px); }

  .board-slot {
    width: 56px;
    height: 76px;
  }
  .board-slot .card-rank { font-size: 18px; }
  .board-slot .card-suit { font-size: 17px; }
}