/* ── Sheepshead — Casino Green Theme ─────────────────────────────────────── */

:root {
  --green-table:  #35764a;  /* bright casino felt */
  --green-dark:   #1e4d2e;  /* rail / borders */
  --green-mid:    #2a6038;  /* seats / panels */
  --gold:         #d4aa4e;
  --gold-light:   #f0cc70;
  --white:        #ffffff;
  --off-white:    #f0ece0;
  --light-green:  #c8f0d0;
  --card-w:       96px;
  --card-h:       144px;
  --radius:       6px;
  --shadow:       0 4px 18px rgba(0,0,0,0.45);
  /* Table background gradient — subtle centre highlight, same colour family */
  --table-gradient: radial-gradient(ellipse at 50% 40%, #3d8854 0%, #35764a 55%, #1e4d2e 100%);

  /* Setup screen — overridden per theme */
  --setup-bg:                radial-gradient(ellipse at 50% 40%, #3d8854 0%, #1e4d2e 100%);
  --setup-title-color:       var(--gold);
  --setup-subtitle-color:    rgba(212,170,78,0.45);
  --setup-rule-color:        var(--gold);
  --setup-module-bg:         rgba(0,0,0,0.28);
  --setup-module-border:     rgba(212,170,78,0.25);
  --setup-module-label:      rgba(212,170,78,0.55);
  --setup-module-change:     var(--gold);
  --setup-chip-bg:           rgba(255,255,255,0.08);
  --setup-chip-border:       rgba(255,255,255,0.15);
  --setup-chip-color:        #fff;
  --setup-rule-chip-bg:      rgba(255,255,255,0.06);
  --setup-rule-chip-border:  rgba(212,170,78,0.3);
  --setup-rule-chip-color:   rgba(212,170,78,0.9);
  --setup-subpanel-bg:       var(--green-dark);
  --setup-continue-color:    rgba(255,255,255,0.3);
}

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

html {
  font-size: 17px; /* slightly larger than browser default 16px — improves readability on iPad */
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--green-dark);
  color: var(--white);
  overflow: hidden;
}

/* ── Setup Screen ──────────────────────────────────────────────────────────── */

#setup-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--setup-bg);
  overflow-y: auto;
  padding: clamp(16px, 3vh, 32px) 20px;
}

/* Single centered block — everything stacks naturally, no stretching */
#setup-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  gap: clamp(16px, 3vh, 28px);
}

/* Modules region — natural height, no flex-grow */
.setup-modules-region {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 10px;
}

/* Gear icon — fixed to viewport top-right, 44px minimum touch target for iPad */
.setup-gear {
  position: fixed;
  top: 10px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem;
  opacity: 0.45;
  color: var(--setup-title-color);
  transition: opacity 0.2s;
  padding: 10px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  line-height: 1;
}
.setup-gear:hover { opacity: 0.8; }

/* Hero block */
.setup-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0;
  flex-shrink: 0;
  width: 100%;
  /* Scales with viewport height: airy on desktop (56px), tight on iPad landscape (~38px) */
  margin-bottom: clamp(24px, 5vh, 56px);
}
.sheep-icon-wrap {
  width: 96px; height: 96px;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); /* currentColor in SVGs resolves to gold */
}
.sheep-icon-wrap svg { width: 96px; height: 96px; }

/* ── Card deck pickers (Deck tab) ─────────────────────────────────────────── */
.card-picker {
  display: grid;
  gap: 8px;
}
.card-back-picker  { grid-template-columns: repeat(4, 1fr); }
.card-front-picker { grid-template-columns: repeat(2, 1fr); }

.card-option {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.card-option input[type="radio"] { display: none; }
.card-preview {
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,0.15);
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.15s;
  display: flex;
  align-items: stretch;
  opacity: 0.55;
}
.card-preview svg  { width: 100%; height: 100%; display: block; }

/* Selected tile: brighter, gold border + glow, slightly scaled up */
.card-option input:checked + .card-preview {
  border-color: var(--gold);
  border-width: 2.5px;
  box-shadow: 0 0 0 2px rgba(212,170,78,0.35), 0 4px 16px rgba(212,170,78,0.25);
  opacity: 1;
  transform: scale(1.04);
}


.card-option-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  transition: color 0.15s;
}
.card-option input:checked ~ .card-option-label {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(212,170,78,0.4);
}

/* ── Logo picker in settings (Table tab) ──────────────────────────────────── */
.logo-picker {
  display: flex;
  gap: 10px;
}
.logo-option {
  flex: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.logo-option input[type="radio"] { display: none; }
.logo-preview {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  background: rgba(0,0,0,0.15);
}
.logo-preview svg { width: 100%; height: 100%; }
.logo-option input:checked + .logo-preview {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200,168,75,0.08);
}
.logo-option-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color 0.15s;
}
.logo-option input:checked ~ .logo-option-label {
  color: var(--gold);
}

.setup-wordmark {
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--setup-title-color);
  line-height: 1;
  margin-bottom: 12px;
  text-align: center;
  padding-right: 0.28em;
  white-space: nowrap;
}
.wordmark-rule-row {
  display: flex; align-items: center; gap: 8px;
  color: var(--setup-subtitle-color);
  font-size: 0.76rem; font-style: italic; letter-spacing: 0.03em;
}
.wordmark-rule {
  flex-shrink: 0; width: 28px; border: none; height: 1px;
  background: var(--setup-rule-color);
  opacity: 0.4; margin: 0;
}

/* Module list */
.setup-modules {
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.setup-module {
  background: var(--setup-module-bg);
  border: 1px solid var(--setup-module-border);
  border-radius: 10px;
  padding: 13px 16px 14px;
}
.module-header-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 9px;
}
.module-label {
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--setup-module-label);
}
.module-change {
  font-size: 0.8rem; font-weight: 500;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--setup-module-change);
  transition: opacity 0.15s; font-family: inherit;
}
.module-change:hover { opacity: 0.65; }

/* Chips inside modules — unified 5px corners (square-pill style) */
.module-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.setup-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 5px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  background: var(--setup-chip-bg);
  border: 1px solid var(--setup-chip-border);
  color: var(--setup-chip-color);
  white-space: nowrap;
}
.setup-chip-icon { font-size: 0.7rem; opacity: 0.8; }
.setup-rule-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 5px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  background: var(--setup-rule-chip-bg);
  border: 1px solid var(--setup-rule-chip-border);
  color: var(--setup-rule-chip-color);
  white-space: nowrap;
}

/* Avatar row in Pull Up a Chair module chips */
.avatars-row {
  display: flex; align-items: flex-start; gap: 10px;
  justify-content: center;
  width: 100%;
}
.avatar-unit {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1;
}
/* Face SVG wrapper — full face portrait, no crop/mask */
.avatar-face-wrap {
  width: 100%; aspect-ratio: 1 / 1.18; flex-shrink: 0;
  overflow: hidden;
}
.avatar-face-wrap svg { width: 100%; height: 100%; display: block; }
.avatar-name {
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1;
  color: var(--setup-chip-color);
  opacity: 0.7;
}

/* Deal section — anchored at bottom of the flex column */
.setup-deal-section {
  width: 100%;
  display: flex; flex-direction: column; gap: 10px;
}
.btn-deal {
  display: block; width: 100%; padding: 14px;
  background: var(--gold); border: none; border-radius: 10px;
  font-size: 1.05rem; font-weight: 700; color: #1a2a10;
  cursor: pointer; letter-spacing: 0.04em;
  transition: all 0.15s; font-family: inherit;
}
.btn-deal:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,170,78,0.45);
}
.btn-continue-link {
  display: block; width: 100%; background: none; border: none;
  cursor: pointer; font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--setup-continue-color);
  text-align: center; padding: 4px; transition: color 0.15s;
  font-family: inherit;
}
.btn-continue-link:hover { color: rgba(255,255,255,0.5); }

.form-section {
  margin-bottom: 18px;
}
.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 8px;
}

.radio-group, .check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-btn, .check-btn {
  position: relative;
}
.radio-btn input,
.check-btn input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.radio-btn label,
.check-btn label {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border: 2px solid rgba(212,170,78,0.5);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--white);
  background: rgba(0,0,0,0.2);
  transition: all 0.15s;
  user-select: none;
  min-height: 40px;
}
.radio-btn input:checked + label,
.check-btn input:checked + label {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a2a10;
  font-weight: 700;
}
.radio-btn label:hover,
.check-btn label:hover {
  border-color: var(--gold);
  background: rgba(212,170,78,0.2);
}

/* ±5 test option — dim appearance to signal it's for testing */
.label-test {
  opacity: 0.45;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.text-input {
  display: block;
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 2px solid rgba(212,170,78,0.5);
  border-radius: 8px;
  padding: 9px 14px;
  color: var(--white);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}
.text-input::placeholder { color: rgba(255,255,255,0.45); }
.text-input:focus { border-color: var(--gold); }

.divider {
  border: none;
  border-top: 1px solid rgba(212,170,78,0.3);
  margin: 20px 0;
}

/* ── Sub-panels (centered floating dialog) ─────────────────────────────────── */

.subpanel {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.subpanel-card {
  background: var(--setup-subpanel-bg);
  border: 1px solid var(--setup-module-border);
  border-radius: 14px;
  width: 100%; max-width: 520px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.4);
}
/* Wide variant for content-heavy panels (Pull Up a Chair) */
.subpanel-card--wide {
  max-width: 980px;
  height: 660px;
  max-height: calc(100vh - 48px);
}
.subpanel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(212,170,78,0.15);
  flex-shrink: 0;
  gap: 14px;
}
.subpanel-header h3 {
  font-size: 1rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.04em; margin: 0;
  white-space: nowrap;
}
.subpanel-header-left {
  display: flex; align-items: center; gap: 18px;
  min-width: 0; flex: 1;
}

/* Header selection stack — overlapping mini-faces of currently selected players */
.selection-stack {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.selection-faces {
  display: flex; align-items: center;
}
.selection-face {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold, #d4aa4e);
  background: rgba(255,255,255,0.06);
  margin-left: 4px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.15s ease, z-index 0s;
  cursor: default;
}
.selection-face:first-child { margin-left: 0; }
.selection-face:hover {
  transform: translateY(-2px) scale(1.10);
  z-index: 5;
  border-color: var(--gold-light, #e8bc5a);
}
.selection-face svg {
  width: 100%;
  height: auto;
  display: block;
  /* Shift up so the face (not the body/wool puffs) sits in the circle */
  margin-top: -4px;
}
.selection-face--empty {
  border-style: dashed;
  border-color: rgba(255,255,255,0.22);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.32);
  font-size: 0.95rem;
  font-weight: 600;
}
.selection-face--empty:hover {
  transform: none;
  border-color: rgba(255,255,255,0.35);
}
.selection-stack-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}
.selection-stack-label strong {
  color: var(--gold, #d4aa4e);
  font-weight: 700;
}

/* Mobile — hide the stack on narrow screens (the toolbar status still shows count) */
@media (max-width: 720px) {
  .selection-stack { display: none; }
}
.subpanel-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 4px;
  -webkit-overflow-scrolling: touch;
}
.subpanel-note {
  font-size: 0.82rem; color: rgba(255,255,255,0.45);
  line-height: 1.5; margin-bottom: 16px;
}
.btn-subpanel-done {
  margin: 12px 18px 18px;
  padding: 12px; border: none; border-radius: 8px;
  background: var(--gold); color: #1a2a10;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  letter-spacing: 0.03em; flex-shrink: 0;
  transition: background 0.15s; font-family: inherit;
}
.btn-subpanel-done:hover { background: var(--gold-light); }

/* Legacy .opponent-card styles (kept for animation cycling) — main grid is now .opponents-grid below */
.opponent-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}
/* Face SVG wrapper for sub-panel opponent cards */
.opponent-face-wrap {
  width: 60px; height: 76px; flex-shrink: 0;
  transition: opacity 0.4s;
}
.opponent-face-wrap svg { width: 100%; height: 100%; }
.opponent-name {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
}
.opponent-tag {
  font-size: 0.65rem; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.4); font-style: italic; line-height: 1.3;
}

/* Keep .btn-start as alias so any stray references don't break */
.btn-start {
  display: block; width: 100%; padding: 14px;
  background: var(--gold); border: none; border-radius: 10px;
  font-size: 1.1rem; font-weight: 700; color: #1a2a10;
  cursor: pointer; transition: all 0.15s;
  letter-spacing: 1px; margin-top: 12px; font-family: inherit;
}
.btn-start:hover {
  background: #e8c060;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,170,78,0.5);
}

/* ── Game Screen ───────────────────────────────────────────────────────────── */

#game-screen {
  display: none;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--green-table);
}

/* ── Scoreboard — B2 Left Tab ──────────────────────────────────────────────── */
#scoreboard {
  display: flex;
  align-items: stretch;
  background: var(--green-dark);
  border-bottom: 2px solid var(--gold);
  flex-shrink: 0;
  min-height: 56px;
  overflow: visible;
}

/* Hand tab — dark inset on the far left */
.sb-hand-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  border-right: 1px solid rgba(212,170,78,0.22);
  padding: 0 18px;
  flex-shrink: 0;
  gap: 1px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.sb-hand-tab:hover {
  background: rgba(0,0,0,0.6);
}
/* Arrow notch pointing into the score cells */
.sb-hand-tab::after {
  content: '';
  position: absolute;
  right: -8px; top: 50%; transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid rgba(0,0,0,0.4);
  z-index: 3;
  pointer-events: none;
}
.sb-hand-word {
  font-size: 0.46rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(212,170,78,0.55);
  line-height: 1;
}
.sb-hand-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold-light);
  line-height: 1;
}

/* Score cells — equal-width, fill full bar height */
.sb-score-cells {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.sb-score-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 5px 8px;
  min-width: 56px;
  position: relative;
  overflow: hidden;
}
/* Dealer: thin gold stripe at the top of the cell — no extra text/line */
.sb-dealer-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
/* "You" cell: slight tint so the human player is always easy to find */
.sb-you-cell { background: rgba(255,255,255,0.05); }

.sb-pname {
  font-size: 0.63rem;
  color: rgba(255,255,255,0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.sb-you-name { color: #fff; font-weight: 700; font-size: 0.68rem; }

.sb-pscore {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}
.sb-pos  { color: #6ee890; }
.sb-neg  { color: #e07878; }
.sb-zero { color: rgba(255,255,255,0.45); }

/* Notice column (doubler / leasters / loner / partner) */
.sb-notices {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.sb-notice {
  font-size: 0.66rem;
  font-weight: 800;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.sb-notice-doubler { color: #f0a060; background: rgba(230,100,60,0.2);  }
.sb-notice-leasters{ color: #88ddff; background: rgba(80,160,220,0.18); }
.sb-notice-alone   { color: #ffdd88; background: rgba(200,160,40,0.2);  }
.sb-notice-picker  { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
.sb-notice-partner { color: #88ffcc; background: rgba(40,180,120,0.2);  }
.sb-notice-crack   { color: #ffaaaa; background: rgba(200,40,40,0.22);  }

/* Action buttons */
.sb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.sb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s;
}
.sb-btn:hover     { background: rgba(255,255,255,0.14); }
.sb-btn-exit      { color: rgba(255,160,160,0.8); }
.sb-btn-exit:hover{ background: rgba(200,40,40,0.25); color: #ffaaaa; }

/* Status bar — fixed height, never wraps or resizes */
#status-bar {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--light-green);
  padding: 0 8px;
  background: var(--green-dark);
  border-bottom: 1px solid rgba(212,170,78,0.2);
  flex-shrink: 0;
  height: 26px;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s, color 0.2s;
}
/* Trick-winner mode: status bar highlights the winner */
#status-bar.trick-winner-bar {
  background: rgba(0,0,0,0.5);
  color: var(--gold-light);
  border-bottom-color: rgba(212,170,78,0.45);
}
#status-bar.trick-winner-bar strong {
  color: #fff;
}

/* Trick-winner seat glow — CPU seats */
.player-seat.trick-winner {
  filter: drop-shadow(0 0 8px rgba(212,170,78,0.85)) drop-shadow(0 0 18px rgba(212,170,78,0.4));
}
.player-seat.trick-winner .seat-name {
  color: var(--gold-light);
}

/* Passing indicator — PICKING phase */
.player-seat.has-passed {
  opacity: 0.75;
}
.pass-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #ff8888;
  border: 1px solid rgba(255,100,100,0.5);
  border-radius: 3px;
  padding: 1px 4px;
  background: rgba(200,40,40,0.18);
  line-height: 1.2;
}
@keyframes deciding-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,220,80,0.5)); }
  50%       { filter: drop-shadow(0 0 12px rgba(255,220,80,0.9)); }
}
.player-seat.is-deciding {
  animation: deciding-pulse 1.1s ease-in-out infinite;
}

/* Trick-winner human name badge */
.human-name-badge.trick-winner {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(212,170,78,0.18);
  box-shadow: 0 0 0 2px rgba(212,170,78,0.3), 0 0 14px rgba(212,170,78,0.25);
}

/* Table — two rows: cpu rail + play area */
#table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--table-gradient);
}

/* CPU player rail — fixed-height row, never overlaps play area */
#cpu-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  padding: 5px 16px 10px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(212,170,78,0.25);
  flex-shrink: 0;
  gap: 8px;
}

/* Play area — trick + blind + log, fills remaining table height */
#play-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Player seats — compact: avatar + name/stats row, no card fan */
.player-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  max-width: 130px;
  min-width: 70px;
  position: relative;   /* anchor for speech bubbles */
  transition: filter 0.2s;
}
.player-seat.active-player {
  filter: drop-shadow(0 0 10px rgba(212,170,78,0.9));
}
.seat-badges {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 18px;
}

/* CPU avatar — no hats, size 56 → viewBox H = 72 */
.avatar-wrap {
  line-height: 0;
  width: 56px;
  height: 72px;
  flex-shrink: 0;
}

/* Name + stats row */
.seat-namerow {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}
.seat-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
}
.seat-stat-hand,
.seat-stat-tricks {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.seat-stat-tricks { color: rgba(212,170,78,0.75); }

/* Legacy — kept for any stale references */
.seat-score {
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.role-tag {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.role-tag.picker      { background: var(--gold); color: #1a2a10; }
.role-tag.partner     { background: #2a8a4a; color: #ffffff; }
.role-tag.going-alone { background: #8a3a20; color: #ffdd88; }

.dealer-chip {
  font-size: 0.6rem;
  background: var(--gold);
  color: #1a2a10;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

/* ── Dealing indicator (shown in trick area during DEALING phase) ──────────── */
.dealing-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  color: rgba(255,255,255,0.55);
}
.dealing-cards-anim {
  font-size: 2rem;
  letter-spacing: 6px;
  animation: dealingCards 1s ease-in-out infinite alternate;
}
@keyframes dealingCards {
  from { opacity: 0.35; transform: scale(0.92) translateY(2px); }
  to   { opacity: 1;    transform: scale(1.05) translateY(-2px); }
}
/* Blind display during picking phase */
.picking-blind-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 28px 18px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(212,170,78,0.28);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.picking-blind-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: rgba(212,170,78,0.55);
}
.picking-blind-cards {
  display: flex;
  gap: 8px;
}
.picking-blind-hint {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  font-style: italic;
}

.dealing-doubler {
  font-size: 0.82rem;
  font-weight: 800;
  color: #f0a060;
  background: rgba(230,100,60,0.18);
  border: 1px solid rgba(230,100,60,0.35);
  border-radius: 6px;
  padding: 3px 12px;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.dealing-text {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--light-green);
}

/* ── Speech bubbles ────────────────────────────────────────────────────────── */
.speech-bubble {
  position: fixed;
  background: rgba(255, 253, 230, 0.96);
  color: #1e2e10;
  border: 1.5px solid rgba(212,170,78,0.55);
  border-radius: 14px;
  padding: 5px 13px;
  font-size: 0.77rem;
  font-weight: 600;
  max-width: 180px;
  text-align: center;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
  white-space: normal;
  line-height: 1.3;
  transition: opacity 0.45s ease;
}
/* Default: upward-pointing tail (bubble appears BELOW CPU seat, tail points UP toward player) */
.speech-bubble::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top: none;
  border-bottom-color: rgba(255, 253, 230, 0.96);
}
.speech-bubble::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top: none;
  border-bottom-color: rgba(212,170,78,0.55);
}
/* Downward-pointing tail for human player (bubble appears ABOVE, tail points DOWN toward player) */
.speech-bubble.speech-bubble-up::after {
  top: auto;
  bottom: -8px;
  border-bottom: none;
  border-top-color: rgba(255, 253, 230, 0.96);
  border-bottom-color: transparent;
  border-top-width: 8px;
}
.speech-bubble.speech-bubble-up::before {
  top: auto;
  bottom: -10px;
  border-bottom: none;
  border-top-color: rgba(212,170,78,0.55);
  border-bottom-color: transparent;
  border-top-width: 9px;
}

/* Trick area — centered in play-area by flexbox, no absolute needed */
#trick-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 12px;
  z-index: 5;
}

.trick-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  animation: cardDrop 0.25s ease-out;
}
@keyframes cardDrop {
  from { opacity: 0; transform: translateY(-14px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.trick-player-name {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.trick-placeholder {
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
  font-style: italic;
}

/* Blind area — compact panel below the game log (right side) */
#blind-area {
  position: absolute;
  right: 8px;
  top: auto;
  bottom: 8px;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 6;
  pointer-events: none;
}
.blind-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: right;
}
.blind-cards-row {
  display: flex;
  gap: 3px;
  align-items: center;
}
/* Mini blind cards */
#blind-area .card {
  width: 32px;
  height: 48px;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Human area — Design 5 Play Console ───────────────────────────────────── */
#human-area {
  display: flex;
  flex-direction: column;
  background: var(--green-dark);
  border-top: 2px solid var(--gold);
  flex-shrink: 0;
}

/* Console bar — always visible, always same height */
#player-console {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  gap: 12px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: 46px;
  flex-shrink: 0;
  transition: min-height 0.15s ease;
}

/* Left: identity (dealer chip + role tag + name pill) */
#human-avatar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.human-avatar-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  /* no flex-wrap — console is a single row */
}

/* Name pill — slightly smaller than before to suit the console bar */
.human-name-badge {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  padding: 4px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  letter-spacing: 0.3px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.human-avatar-inner.active-player .human-name-badge {
  background: rgba(212,170,78,0.15);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 8px rgba(212,170,78,0.35);
}

/* Center: live game context (score, tricks, cards / bury count) */
#player-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.pc-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
}
.pc-meta-val        { font-weight: 700; color: rgba(255,255,255,0.7); }
.pc-meta-val.pos    { color: #6ee890; }
.pc-meta-val.neg    { color: #e07878; }
.pc-meta-val.alert  { color: var(--gold-light); }
/* Context hint — crack stakes, dealer choice, etc */
.pc-meta-hint       { color: rgba(255,255,255,0.5); font-style: italic; }

/* Right: context action buttons */
#action-buttons {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;          /* Called Ace may have 3-4 buttons — let them wrap */
  justify-content: flex-end;
  max-width: 320px;         /* cap so they don't crowd the meta area */
}
/* Slightly tighter buttons inside the console */
#action-buttons .btn {
  padding: 7px 18px;
  font-size: 0.84rem;
}
/* action-info inside console: just plain meta text, no big block */
#action-buttons .action-info {
  font-size: 0.74rem;
}

/* Human hand — centered, scrollable */
#human-hand {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: center;
  align-items: flex-end;
  overflow-x: auto;
  /* overflow-x:auto forces overflow-y to auto too, which would clip hover lift.
     padding-top gives cards room to rise translateY(-20px) without being clipped. */
  padding: 24px 12px 16px;
  min-height: calc(var(--card-h) + 40px); /* keep hand area stable when empty */
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  z-index: 10; /* hover cards must clear #player-console above */
}
#human-hand::-webkit-scrollbar { display: none; }

/* Cards */
.card {
  display: inline-block;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius);
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  flex-shrink: 0;
  line-height: 0;
  position: relative;
  user-select: none;
  overflow: hidden;
}
/* SVGs scale to fill whatever container they're in */
.card svg,
.fan-card svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.avatar-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

.card.selectable { cursor: pointer; }
.card.selectable:hover {
  transform: translateY(-14px) scale(1.07);
  box-shadow: 0 10px 24px rgba(0,0,0,0.6);
  z-index: 20;
}
.card.selected {
  transform: translateY(-20px);
  box-shadow: 0 0 0 3px var(--gold), 0 10px 22px rgba(0,0,0,0.5);
  z-index: 21;
}
.card.dimmed {
  filter: brightness(0.45) saturate(0.5);
  cursor: not-allowed;       /* Disabled affordance for illegal cards */
}

/* ── Comfort: Highlight playable cards (always-lifted legal cards) ─────── */
/* Active when <body> has class .comfort-highlight-playable.
   Legal cards rest at -8px with a gold border, lift further on hover. */
body.comfort-highlight-playable .card.selectable:not(.selected) {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.45);
  border: 2px solid var(--gold);
  /* card border-radius is on the wrapper; nested SVG already inherits */
}
body.comfort-highlight-playable .card.selectable:not(.selected):hover {
  transform: translateY(-18px) scale(1.05);
  box-shadow: 0 14px 22px rgba(0,0,0,0.55);
}

/* ── Comfort: Confirm before playing — pending state ──────────────────── */
/* When a card is tapped once in confirm mode, it gets .confirm-pending and
   sits raised with a gold ring + small ✓ badge. Tap Play to commit or
   Cancel to deselect. Lift kept at -20px to match the hand container's
   padding-top: 24px (any more and the card top clips behind the player console).
   overflow:visible needed so the ::after ✓ badge isn't clipped by the
   default .card { overflow: hidden }. */
.card.confirm-pending {
  transform: translateY(-20px) !important;
  box-shadow: 0 0 0 3px var(--gold), 0 12px 20px rgba(0,0,0,0.55) !important;
  z-index: 22;
  position: relative;
  overflow: visible !important;
}
.card.confirm-pending::after {
  content: '✓';
  position: absolute;
  top: -10px; right: -8px;
  background: var(--gold);
  color: #1a2a10;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 23;
}

/* ── Comfort: Generous tap zones ──────────────────────────────────────── */
/* Each card gets an invisible extended hit area. Use ::before on the card
   container — pointer-events: auto on the pseudo, no visual effect. */
body.comfort-generous-tap #human-hand { gap: 12px; }
body.comfort-generous-tap .card { position: relative; }
body.comfort-generous-tap .card::before {
  content: '';
  position: absolute;
  top: -16px; left: -6px; right: -6px; bottom: -8px;
  /* No background — invisible. Just expands the click target. */
  pointer-events: auto;
  z-index: 1;
  border-radius: 10px;
}
/* Keep the actual card content above the extended zone for visual clicks */
body.comfort-generous-tap .card > * { position: relative; z-index: 2; }
/* Disable extended zones on dimmed (illegal) cards — they should NOT have
   bigger targets, since tapping them is rejected anyway. */
body.comfort-generous-tap .card.dimmed::before { pointer-events: none; }

/* ── Progression buttons: subtle escalating animation when idle ──────────
   Press-to-continue buttons (Next Trick, End Hand, Final Results, Next Hand)
   wear the .progression-btn class. They start plain, then begin a soft gold
   glow at 3 s, and add a barely-perceptible scale "breath" at 8 s. Power
   players never see it; slower players get a quiet nudge that the game
   is waiting for them. Animations are disabled if the OS prefers reduced
   motion. */

@keyframes progression-glow {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.30), 0 0 0 0 rgba(212,170,78,0.0); }
  50%      { box-shadow: 0 2px 6px rgba(0,0,0,0.30), 0 0 14px 3px rgba(212,170,78,0.55); }
}
@keyframes progression-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
.progression-btn {
  /* Two animations stack — each starts after its own delay. The button DOM
     is recreated on each render, so the delay clock resets cleanly when a
     new progression button appears. */
  animation:
    progression-glow   2.4s ease-in-out 3s infinite,
    progression-breath 1.8s ease-in-out 8s infinite;
}
.progression-btn:hover,
.progression-btn:focus-visible,
.progression-btn:active {
  /* User has engaged — pause the nudge */
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .progression-btn { animation: none !important; }
}

/* ── Coach hint pill — Variant C "Hint?" outlined ghost ──────────────── */
#coach-hint-pill {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: transparent;
  border: 1px solid rgba(212,170,78,0.35);
  color: rgba(212,170,78,0.78);
  padding: 6px 13px;
  border-radius: 18px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  z-index: 7;
}
#coach-hint-pill:hover,
#coach-hint-pill:focus-visible {
  background: rgba(212,170,78,0.10);
  border-color: rgba(212,170,78,0.55);
  color: var(--gold);
  outline: none;
}
#coach-hint-pill .hint-icon { font-size: 0.86rem; opacity: 0.85; }

/* ── Coach popover — appears above the pill on click ───────────────── */
#coach-popover {
  position: absolute;
  bottom: 56px;
  right: 12px;
  width: 290px;
  background: var(--green-dark);
  border: 1px solid rgba(212,170,78,0.45);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  z-index: 8;
  animation: coachPopIn 0.16s ease-out;
}
@keyframes coachPopIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.coach-popover-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.coach-popover-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 10px;
  font-size: 0.82rem;
  color: var(--muted-2, rgba(255,255,255,0.7));
  line-height: 1.5;
}
.coach-popover-body strong { color: var(--text); }
.coach-mini-card {
  width: 38px; height: 54px;
  border-radius: 5px;
  background: #f5e9d4;
  border: 1.2px solid #b89a5a;
  color: #1a2a10;
  font-size: 0.74rem;
  font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--gold), 0 4px 8px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.coach-mini-card.red { color: #b03030; }
.coach-mini-card .suit { font-size: 1.05rem; }
.coach-popover-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.pop-btn-primary, .pop-btn-ghost {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pop-btn-primary {
  background: var(--gold);
  color: #1a2a10;
}
.pop-btn-primary:hover { background: var(--gold-bright, #e8bc5a); }
.pop-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.18);
}
.pop-btn-ghost:hover {
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.32);
}

/* ── Suggested-card ⭐ marker (Comfort: highlightSuggested) ──────────
   Static — no animation. Sits above the suggested card during your turn.
   overflow:visible is required so the ::before ⭐ at top:-22px isn't
   clipped by the default .card { overflow: hidden }. */
body.comfort-highlight-suggested .card.suggested-card {
  position: relative;
  overflow: visible !important;
  z-index: 6;
}
body.comfort-highlight-suggested .card.suggested-card::before {
  content: '⭐';
  position: absolute;
  /* Anchor the star so it overlaps the top edge by ~half its body.
     Negative top + translateY(-50%) centers it ON the edge line. */
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  z-index: 7;
  pointer-events: none;
}

/* ── Show play log toggle (Options): hide log + 📋 button when off ─── */
body.hide-play-log #game-log,
body.hide-play-log .sb-btn-log {
  display: none !important;
}

/* ── Settings section heading inside a setting-group ─────────────────── */
.setting-section-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(212,170,78,0.20);
  margin-bottom: 6px;
}

/* Sub-heading nested inside a setting-group (visually subordinate to .setting-section-heading) */
.setting-subsection-heading {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(212,170,78,0.78);
  padding: 4px 0 6px;
  margin-bottom: 2px;
}

/* Cluster of related .setting-row's under one .setting-subsection-heading.
   Subgroups after the first get a divider above to visually break clusters. */
.setting-subgroup + .setting-subgroup {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(212,170,78,0.14);
}

.btn {
  padding: 9px 22px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  touch-action: manipulation; /* eliminates 300ms tap delay on iOS */
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 40px;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-primary  { background: var(--gold); color: #1a2a10; }
.btn-primary:not(:disabled):hover { background: #e8c060; transform: translateY(-1px); }

.btn-secondary {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.3);
}
.btn-secondary:hover { background: rgba(255,255,255,0.25); }

.btn-danger  { background: #c03030; color: #fff; }
.btn-danger:not(:disabled):hover { background: #d04040; }

.btn-ghost {
  background: transparent;
  color: var(--light-green);
  border: 2px solid rgba(200,240,208,0.35);
}
.btn-ghost:hover { background: rgba(200,240,208,0.12); }

.action-info {
  font-size: 0.82rem;
  color: var(--light-green);
  font-weight: 600;
  text-align: center;
}

/* Game log — pinned to right side of play-area */
#game-log {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 210px;
  max-height: 210px;
  overflow-y: auto;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(212,170,78,0.25);
  border-radius: 8px;
  padding: 6px 8px;
  z-index: 8;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,170,78,0.4) transparent;
}
.log-line {
  font-size: 0.69rem;
  color: var(--light-green);
  padding: 1px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  line-height: 1.4;
}
.log-line:first-child { color: var(--white); font-weight: 600; }

/* Log backdrop — small screens only */
#log-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 149;
}

/* Log toggle button in scoreboard — hidden on large screens */
.sb-btn-log {
  display: none;
}
.sb-btn-log.active {
  background: rgba(212,170,78,0.2);
  color: var(--gold-light);
}

/* Toast */
#toast {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--green-dark);
  border: 2px solid var(--gold);
  border-radius: 24px;
  padding: 8px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
  white-space: nowrap;
}
#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Modal */
#modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 50%), var(--green-dark);
  border: 1px solid rgba(212,170,78,0.55);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(212,170,78,0.07) inset;
  text-align: center;
  color: var(--white);
  animation: modalIn 0.22s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.modal-card h2 { font-size: 1.4rem; color: var(--gold); margin-bottom: 8px; }
.modal-card p  { font-size: 0.9rem; color: var(--light-green); margin-bottom: 4px; }
.win-text  { color: #60e080 !important; font-weight: 700; }
.lose-text { color: #e07070 !important; font-weight: 700; }
.modal-winner { font-size: 1.2rem !important; color: var(--gold) !important; font-weight: 700; }

.modal-scores {
  margin: 14px 0;
  text-align: left;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
}
.modal-score-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 14px;
  font-size: 0.9rem;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.modal-score-row:last-child { border-bottom: none; }
.pos { color: #60e080; font-weight: 700; }
.neg { color: #e07070; font-weight: 700; }

.modal-actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; }

/* ── Responsive / iPad ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --card-w: 82px; --card-h: 123px; }
  #game-log { width: 155px; }
  .avatar-wrap   { width: 50px; height: 66px; }
  /* Scoreboard */
  .sb-hand-tab   { padding: 0 12px; }
  .sb-hand-num   { font-size: 1.3rem; }
  .sb-score-cell { min-width: 48px; padding: 5px 5px; }
  .sb-actions    { padding: 0 8px; gap: 4px; }
  /* Player console */
  #player-console { gap: 8px; padding: 4px 10px; }
  #player-meta    { gap: 10px; }
  #action-buttons { max-width: 240px; }
}

@media (max-width: 600px) {
  :root { --card-w: 66px; --card-h: 99px; }
  .setup-card { padding: 20px 16px; }
  .setup-card h1 { font-size: 1.7rem; }
  /* Log hidden by default; revealed as a fixed overlay via .log-open */
  #game-log {
    display: none;
    position: fixed;
    right: 0;
    top: 74px;
    bottom: 0;
    width: min(280px, 82vw);
    max-height: none;
    border-radius: 12px 0 0 12px;
    border-right: none;
    z-index: 150;
    padding: 14px 10px 10px;
    background: rgba(10,28,16,0.97);
    box-shadow: -4px 0 24px rgba(0,0,0,0.6);
  }
  #game-log.log-open { display: block; }
  .sb-btn-log { display: flex; } /* show toggle button on small screens */
  .btn { padding: 8px 14px; font-size: 0.82rem; }
  .avatar-wrap   { width: 42px; height: 56px; }
  /* Scoreboard */
  .sb-hand-tab   { padding: 0 10px; }
  .sb-hand-num   { font-size: 1.15rem; }
  .sb-hand-word  { font-size: 0.42rem; }
  .sb-score-cell { min-width: 40px; padding: 4px 4px; }
  .sb-pname      { font-size: 0.58rem; }
  .sb-pscore     { font-size: 0.9rem; }
  .sb-notices    { padding: 4px 6px; }
  .sb-notice     { font-size: 0.6rem; padding: 2px 5px; }
  .sb-actions    { padding: 0 6px; gap: 3px; }
  .sb-btn        { min-width: 38px; min-height: 38px; font-size: 1rem; }
  /* Player console: hide meta on very small screens to save space */
  #player-console { gap: 6px; padding: 4px 8px; min-height: 40px; }
  #player-meta    { display: none; }
  #action-buttons { max-width: none; }
  #action-buttons .btn { padding: 6px 12px; font-size: 0.78rem; }
  #human-hand     { padding: 24px 8px 14px; }
}

@media (pointer: coarse) {
  .card.selectable { min-width: 44px; }
  .btn { min-height: 44px; }
}

/* ── Color themes ──────────────────────────────────────────────────────────── */

body.theme-blue {
  --green-table:    #2c4e82;
  --green-dark:     #162848;
  --green-mid:      #1f3a6a;
  --light-green:    #a8c8f0;
  --table-gradient: radial-gradient(ellipse at 50% 40%, #334e84 0%, #2c4e82 55%, #162848 100%);
  --setup-bg:       radial-gradient(ellipse at 50% 40%, #2c4e82 0%, #162848 100%);
  --setup-subpanel-bg: #162848;
}
body.theme-dark {
  --green-table:    #242424;
  --green-dark:     #101010;
  --green-mid:      #1c1c1c;
  --light-green:    #b0b8c0;
  --gold:           #c8a040;
  --table-gradient: radial-gradient(ellipse at 50% 40%, #2c2c2c 0%, #242424 55%, #101010 100%);
  --setup-bg:       radial-gradient(ellipse at 50% 40%, #2c2c2c 0%, #101010 100%);
  --setup-subpanel-bg: #101010;
}
body.theme-burgundy {
  --green-table:    #6a2030;
  --green-dark:     #3a0e18;
  --green-mid:      #501828;
  --light-green:    #f0b0b8;
  --table-gradient: radial-gradient(ellipse at 50% 40%, #742438 0%, #6a2030 55%, #3a0e18 100%);
  --setup-bg:       radial-gradient(ellipse at 50% 40%, #6a2030 0%, #3a0e18 100%);
  --setup-subpanel-bg: #3a0e18;
}

/* ── 5 new immersive themes ─────────────────────────────────────────────────── */

body.theme-navy {
  /* Game table */
  --green-table:    #1e3878;
  --green-dark:     #080f1e;
  --green-mid:      #122046;
  --light-green:    #a8c4f0;
  --table-gradient: radial-gradient(ellipse at 50% 40%, #253c80 0%, #1e3878 55%, #080f1e 100%);
  /* Setup screen */
  --setup-bg:               radial-gradient(ellipse at 50% 40%, #1a3060 0%, #080f1e 100%);
  --setup-module-bg:        #0d1a30;
  --setup-module-border:    rgba(200,168,75,0.25);
  --setup-rule-chip-border: rgba(200,168,75,0.3);
  --setup-subpanel-bg:      #0d1a30;
}
body.theme-felt {
  /* Game table — richer green with more contrast */
  --green-table:    #2d6e40;
  --green-dark:     #0f2a18;
  --green-mid:      #1a4228;
  --light-green:    #90d4a0;
  --gold:           #f0cc70;
  --gold-light:     #ffe090;
  --table-gradient: radial-gradient(ellipse at 50% 40%, #348048 0%, #2d6e40 55%, #0f2a18 100%);
  /* Setup screen */
  --setup-bg:                radial-gradient(ellipse at 50% 40%, #2d6e40 0%, #0f2a18 100%);
  --setup-title-color:       #f0cc70;
  --setup-subtitle-color:    rgba(180,230,190,0.45);
  --setup-rule-color:        #90d4a0;
  --setup-module-bg:         rgba(10,31,16,0.78);
  --setup-module-border:     rgba(100,200,120,0.2);
  --setup-module-label:      rgba(180,230,190,0.5);
  --setup-module-change:     #90d4a0;
  --setup-chip-bg:           rgba(255,255,255,0.1);
  --setup-chip-border:       rgba(255,255,255,0.2);
  --setup-rule-chip-border:  rgba(144,212,160,0.35);
  --setup-rule-chip-color:   rgba(180,230,190,0.9);
  --setup-subpanel-bg:       #0f2a18;
  --setup-continue-color:    rgba(255,255,255,0.28);
}
body.theme-tavern {
  /* Game table — warm dark amber */
  --green-table:    #3a1a08;
  --green-dark:     #0e0803;
  --green-mid:      #241008;
  --light-green:    #e8c870;
  --gold:           #e8c870;
  --gold-light:     #f8de90;
  --table-gradient: radial-gradient(ellipse at 50% 40%, #3e1c0a 0%, #3a1a08 55%, #0e0803 100%);
  /* Setup screen */
  --setup-bg:                radial-gradient(ellipse at 50% 40%, #2a1608 0%, #0e0803 100%);
  --setup-title-color:       #e8c870;
  --setup-subtitle-color:    rgba(220,180,80,0.4);
  --setup-rule-color:        #e8c870;
  --setup-module-bg:         #1a0e06;
  --setup-module-border:     rgba(220,180,80,0.3);
  --setup-module-label:      rgba(220,180,80,0.5);
  --setup-module-change:     #e8c870;
  --setup-chip-bg:           #2a1a08;
  --setup-chip-border:       rgba(220,180,80,0.3);
  --setup-chip-color:        #e8c870;
  --setup-rule-chip-bg:      #2a1a08;
  --setup-rule-chip-border:  rgba(220,180,80,0.3);
  --setup-rule-chip-color:   rgba(220,180,80,0.9);
  --setup-subpanel-bg:       #1a0e06;
  --setup-continue-color:    rgba(220,180,80,0.3);
}
body.theme-midnight {
  /* Game table — near-black minimal */
  --green-table:    #141420;
  --green-dark:     #08080e;
  --green-mid:      #101018;
  --light-green:    #b0b0c8;
  --gold:           #c8a84b;
  --table-gradient: #141420;
  /* Setup screen */
  --setup-bg:                #08080e;
  --setup-module-bg:         rgba(255,255,255,0.04);
  --setup-module-border:     rgba(255,255,255,0.08);
  --setup-module-label:      rgba(255,255,255,0.28);
  --setup-module-change:     rgba(200,168,75,0.8);
  --setup-chip-bg:           rgba(255,255,255,0.06);
  --setup-chip-border:       rgba(255,255,255,0.1);
  --setup-rule-chip-border:  rgba(200,168,75,0.22);
  --setup-subpanel-bg:       #101018;
  --setup-continue-color:    rgba(255,255,255,0.2);
}
body.theme-indigo {
  /* Game table — deep indigo */
  --green-table:    #201840;
  --green-dark:     #080610;
  --green-mid:      #140f28;
  --light-green:    #c0b0f0;
  --gold:           #d4aa4e;
  --table-gradient: radial-gradient(ellipse at 50% 40%, #261e48 0%, #201840 55%, #080610 100%);
  /* Setup screen */
  --setup-bg:                radial-gradient(ellipse at 50% 40%, #1a1530 0%, #080610 100%);
  --setup-module-bg:         rgba(100,80,180,0.1);
  --setup-module-border:     rgba(160,140,220,0.2);
  --setup-module-label:      rgba(180,160,230,0.5);
  --setup-module-change:     #c8a84b;
  --setup-chip-bg:           rgba(120,100,200,0.12);
  --setup-chip-border:       rgba(160,140,220,0.2);
  --setup-rule-chip-border:  rgba(200,168,75,0.28);
  --setup-subpanel-bg:       #0e0c20;
  --setup-continue-color:    rgba(200,180,240,0.28);
}

/* ── Scoreboard layout — legacy classes kept for safety (unused) ─────────── */
/* .scoreboard-chips / .scoreboard-actions / .btn-icon replaced by .sb-* */

/* ── Stats overlay ───────────────────────────────────────────────────────── */
#stats-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.stats-panel {
  background: var(--green-dark, #1e4d2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.stats-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold, #d4aa4e);
  margin: 0;
}
#stats-content {
  overflow-y: auto;
  flex: 1;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stats-empty {
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 32px 0;
  font-size: 0.85rem;
}

/* ── Game Info overlay ───────────────────────────────────────────────────────── */
#game-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.game-info-panel {
  background: var(--green-dark, #1e4d2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
#game-info-content {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0 12px;
}
.gi-rows { display: flex; flex-direction: column; }
.gi-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gi-row:last-child { border-bottom: none; }
.gi-icon {
  font-size: 0.95rem;
  text-align: center;
  line-height: 1;
  opacity: 0.8;
}
.gi-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
}
.gi-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold, #d4aa4e);
  text-align: right;
}
.gi-value strong { font-weight: 700; }
.stats-section { display: flex; flex-direction: column; gap: 8px; }
.stats-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
/* Sparkline */
.spark-wrap {
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 8px 12px 6px;
  display: flex;
  align-items: center;
  min-height: 58px;
}
.spark-svg { display: block; width: 100%; height: 44px; }
.spark-none { font-size: 0.78rem; color: rgba(255,255,255,0.4); }
/* Stats table */
.stats-table-wrap { overflow-x: auto; }
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.stats-table th {
  text-align: center;
  padding: 5px 6px;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
}
.stats-table th:first-child { text-align: left; }
.stats-table td {
  text-align: center;
  padding: 6px 6px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stats-table td:first-child { text-align: left; }
.stats-table tr.st-you td { color: #fff; font-weight: 600; }
.stats-table tr.st-you td:first-child { color: var(--gold, #d4aa4e); }
.st-pos { color: #7ddd88 !important; }
.st-neg { color: #ff8888 !important; }
.st-streak { font-size: 0.65rem; margin-left: 4px; vertical-align: middle; }
/* Session facts */
.stats-facts { display: flex; flex-direction: column; gap: 6px; }
.stat-fact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}
.sf-icon { font-size: 0.9rem; flex-shrink: 0; }
.stat-fact b { color: var(--gold-light, #f0cc70); }

/* ── Setup screen extras ──────────────────────────────────────────────────── */

.form-hint {
  font-size: 0.75rem;
  color: var(--light-green);
  margin-top: 6px;
  display: none;  /* shown by JS when both no-picker options checked */
}

/* Inline "or" separator within the no-picker check group */
.np-or-sep {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0 2px;
  align-self: center;
}

.btn-continue {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: 2px solid rgba(212,170,78,0.6);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
  text-align: center;
}
.btn-continue:hover {
  background: rgba(212,170,78,0.15);
  border-color: var(--gold);
}

/* ── Settings overlay ─────────────────────────────────────────────────────── */

#settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.settings-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 50%), var(--green-dark);
  border: 1px solid rgba(212,170,78,0.55);
  border-radius: 16px;
  padding: 24px 28px;
  width: 100%;
  max-width: 480px;
  height: min(580px, 88vh);
  box-shadow: 0 12px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(212,170,78,0.07) inset;
  color: var(--white);
  animation: modalIn 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.settings-header h2 {
  font-size: 1.3rem;
  color: var(--gold);
  margin: 0;
}

/* ── Settings tabs ─────────────────────────────────────────────────────────── */
.settings-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
  flex-shrink: 0;
}
.stab {
  flex: 1;
  padding: 9px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: rgba(255,255,255,0.4);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.stab:hover { color: rgba(255,255,255,0.7); }
.stab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
/* Icon-only tab (keyboard / shortcuts) — constrain width so it doesn't stretch */
.stab[data-tab="shortcuts"] {
  flex: 0 0 48px;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tab content — scrollable area */
.stab-content {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Sync toggle row */
.sync-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sync-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}

/* Deck placeholder */
.stab-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 10px;
  text-align: center;
}
.placeholder-icon { font-size: 2.2rem; opacity: 0.5; }
.placeholder-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
}
.placeholder-hint {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  line-height: 1.4;
}

.btn-icon-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  line-height: 1;
}
.btn-icon-close:hover { color: var(--white); background: rgba(255,255,255,0.1); }

.setting-group {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(212,170,78,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  /* Negative margin + matching padding extends the click target into the row's
     surrounding gap without changing visual layout. Bigger hit zone, no shift. */
  margin: 0 -10px;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background-color 0.12s;
}
.setting-row.indent {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
/* Toggle-only rows are click-through — give them a pointer cursor + soft hover. */
.setting-row:has(.toggle-switch) {
  cursor: pointer;
  user-select: none;
}
.setting-row:has(.toggle-switch):hover {
  background: rgba(255,255,255,0.04);
}

.setting-label {
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 600;
  flex: 1;
}
.setting-label strong {
  color: var(--gold);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--gold); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Range input */
.range-input {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  outline: none;
  width: 130px;
  flex-shrink: 0;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}
.range-input::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: none;
}

.theme-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.theme-group .radio-btn { width: 100%; }
.theme-group .radio-btn label {
  width: 100%;
  justify-content: center;
  padding: 8px 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keyboard shortcuts reference in settings */
.shortcuts-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}
.shortcuts-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sc-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.6);
}
.sc-row span:last-child {
  margin-left: 4px;
  color: rgba(255,255,255,0.5);
}
kbd {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: monospace;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

.settings-save-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
}

/* ── Auto-deal countdown ──────────────────────────────────────────────────── */

.auto-deal-countdown {
  text-align: center;
  font-size: 0.85rem;
  color: var(--light-green);
  padding: 8px 0 2px;
}
.countdown-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold);
}

/* ── End-game stats modal ─────────────────────────────────────────────────── */

.game-over-card { max-width: 560px; }

/* ── Option-C title block ── */
.go-trophy {
  text-align: center;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 6px;
}
.go-winner-line {
  text-align: center;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--gold-light);
  margin-bottom: 10px;
  line-height: 1.2;
}
.go-divider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.go-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212,170,78,0.45), transparent);
}
.go-hands-pill {
  background: linear-gradient(135deg, rgba(212,170,78,0.2), rgba(212,170,78,0.07));
  border: 1px solid rgba(212,170,78,0.45);
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold, #d4aa4e);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.go-num {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--gold-light);
  line-height: 1;
  font-family: Georgia, serif;
}

/* ── Score table ── */
.end-col-heads {
  display: grid;
  grid-template-columns: 1fr 66px 66px 72px 80px;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0 14px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 2px;
}
.end-col-heads span:not(:first-child) { text-align: right; }

.end-name  { font-weight: 700; }
.end-score { font-size: 1rem; font-weight: 800; }
.end-cell  { font-size: 0.82rem; color: rgba(255,255,255,0.6); text-align: right; }

/* Leasters delta colours */
.lstr-pos  { color: #60e080; font-weight: 700; }
.lstr-neg  { color: #e07070; font-weight: 700; }
.lstr-zero { color: rgba(255,255,255,0.35); }

.end-highlights {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 2px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  text-align: left;
}
.end-highlights b { color: var(--gold); }

/* ── Lead card indicator ──────────────────────────────────────────────────── */

.trick-card-wrap { position: relative; }

/* Small gold dot below the lead card */
.lead-pip {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(212,170,78,0.7);
  pointer-events: none;
}

/* Leasters scoreboard badge */
.leasters-chip {
  background: rgba(80,160,100,0.25);
  border-color: #4aaa66;
  color: #90dda8;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Game-type chips */
.loner-chip {
  background: rgba(200,80,40,0.25);
  border-color: #e06040;
  color: #f0a080;
  font-weight: 700;
}
.partner-chip {
  background: rgba(80,140,200,0.22);
  border-color: #5090d0;
  color: #90c8f0;
  font-weight: 700;
}
.doubler-chip {
  background: rgba(212,170,78,0.22);
  border-color: rgba(212,170,78,0.65);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Loner toggle button state */
.btn-warning {
  background: rgba(200,120,20,0.35);
  color: #ffcc66;
  border: 2px solid rgba(200,140,40,0.6);
}
.btn-warning:hover { background: rgba(200,120,20,0.5); }

/* ── Trick display while awaiting "Next Trick" ───────────────────────────── */

.trick-display-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.trick-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
}
/* The "Next Trick ▶" / "End Hand →" button — rendered in the player console action area */
.trick-next-btn {
  padding: 10px 28px;
  font-size: 0.95rem;
  box-shadow: 0 2px 12px rgba(212,170,78,0.35);
  transition: transform 0.08s ease, background 0.08s ease;
}
/* Instant press feedback — fires before JS, so tap feels immediate */
.trick-next-btn:active {
  transform: scale(0.94);
  background: #b8902a;
  box-shadow: none;
}
/* Same active press feel on all primary buttons */
.btn-primary:active {
  transform: scale(0.96);
  background: #c09830;
}

/* ── Offense / defense point totals in hand-result modal ─────────────────── */

.hand-score-totals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 4px;
}
.score-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  padding: 6px 16px;
  min-width: 80px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.2);
}
.score-total.side-win  { border-color: rgba(96,224,128,0.4);  background: rgba(40,120,60,0.2); }
.score-total.side-loss { border-color: rgba(224,112,112,0.35); background: rgba(120,40,40,0.15); }
.score-total-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.score-total-pts {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.score-total-divider {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ── Fun fact box ────────────────────────────────────────────────────────── */

.hand-fact {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(212,170,78,0.08);
  border: 1px solid rgba(212,170,78,0.28);
  border-radius: 8px;
  font-size: 0.79rem;
  color: rgba(255,255,255,0.72);
  text-align: center;
  font-style: italic;
  line-height: 1.45;
}

/* ── Hand details panel ──────────────────────────────────────────────────── */

.details-modal-card {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  max-height: 82vh;
}
.details-scroll {
  flex: 1;
  overflow-y: auto;
  margin: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,170,78,0.4) transparent;
  text-align: left;
}
.detail-trick-row {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.detail-trick-row:last-child { border-bottom: none; }
.detail-trick-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.detail-trick-num {
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.detail-trick-winner {
  color: var(--light-green);
  flex: 1;
  font-size: 0.77rem;
}
.detail-trick-pts {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
}
.detail-trick-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.detail-play {
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.73rem;
  color: rgba(255,255,255,0.8);
}
.detail-play.is-trump strong { color: var(--gold); }
.detail-play strong { font-weight: 700; }
.detail-buried {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px 4px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 4px;
}
.detail-buried-label { color: var(--gold); font-weight: 700; }

/* ── Picker + Partner combined role tag ──────────────────────────────────── */

.role-tag.picker-partner {
  background: linear-gradient(110deg, #b8860a 0%, #2a8a4a 100%);
  color: #fff;
  white-space: nowrap;
  font-size: 0.52rem;
}

/* ── Dealing animation ───────────────────────────────────────────────────── */

@keyframes dealPulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(212,170,78,0.4)); }
  35%  { transform: scale(1.07); filter: drop-shadow(0 0 20px rgba(212,170,78,1.0)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(212,170,78,0.5)); }
}
.player-seat.is-dealing {
  animation: dealPulse 2.5s ease-in-out;
}
/* For human name badge when human is dealing */
.human-avatar-inner.is-dealing .human-name-badge {
  animation: dealPulse 2.5s ease-in-out;
}

/* Label that appears under the dealing player */
.dealer-dealing-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: dealLabelFade 2.5s ease-in-out;
  margin-top: 2px;
}
@keyframes dealLabelFade {
  0%, 100% { opacity: 0; transform: translateY(2px); }
  25%, 75%  { opacity: 1; transform: translateY(0); }
}

/* ── Schneider alert in hand-result modal ────────────────────────────────── */

.schneider-alert {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #ffdd55 !important;
  margin: 4px 0 0 !important;
  letter-spacing: 0.3px;
}

/* ── Partner line in hand-result modal ───────────────────────────────────── */

.modal-partner-line {
  font-size: 0.88rem !important;
  color: var(--light-green) !important;
  margin: 1px 0 4px !important;
}

/* ── Settings hint sub-label ─────────────────────────────────────────────── */

.setting-hint {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.42);
  font-weight: 400;
}

/* ── Hand number chip in scoreboard ─────────────────────────────────────── */

.hand-num-chip {
  background: rgba(212,170,78,0.12);
  border-color: rgba(212,170,78,0.35);
  color: rgba(212,170,78,0.8);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* ── "Final Results" button glow ─────────────────────────────────────────── */

.btn-game-over-advance {
  background: linear-gradient(135deg, #d4aa4e 0%, #b8860a 100%);
  box-shadow: 0 0 14px rgba(212,170,78,0.5);
  animation: pulseGold 1.5s ease-in-out infinite;
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 10px rgba(212,170,78,0.4); }
  50%       { box-shadow: 0 0 22px rgba(212,170,78,0.85); }
}

/* ── Game-over quote bubble ──────────────────────────────────────────────── */

.go-quote-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 2px;
  text-align: left;
}
.go-quote-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.15);
}
.go-quote-avatar svg { width: 100%; height: 100%; display: block; }
.go-quote-bubble {
  background: rgba(255,253,230,0.1);
  border: 1.5px solid rgba(212,170,78,0.35);
  border-radius: 10px 10px 10px 3px;
  padding: 8px 12px;
  position: relative;
  flex: 1;
}
.go-quote-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 14px;
  border: 7px solid transparent;
  border-right-color: rgba(212,170,78,0.35);
  border-left: none;
}
.go-quote-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  font-style: italic;
  line-height: 1.45;
}
.go-quote-name {
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 700;
  margin-top: 5px;
  text-align: right;
}

/* ── Speed multiplier hint below slider ──────────────────────────────────── */

.speed-mult-row {
  text-align: right;
  padding: 2px 4px 0;
}
.speed-mult-hint {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  letter-spacing: 0.3px;
  font-style: italic;
}

/* ── Exit / end-game confirm dialog ─────────────────────────────────────── */

#exit-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.exit-confirm-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 50%), var(--green-dark);
  border: 1px solid rgba(200,60,60,0.55);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 300px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(200,60,60,0.06) inset;
  animation: modalIn 0.18s ease-out;
}
.exit-confirm-card h3 {
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 8px;
}
.exit-confirm-card p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 18px;
}
.exit-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}
/* Updated exit-confirm border — softer (green-gold) since "Save & Quit" is the default action */
#exit-confirm-overlay .exit-confirm-card {
  border-color: rgba(212,170,78,0.40);
  max-width: 340px;
}
/* Subtle danger style for "End Game…" tertiary button */
.btn-danger-subtle {
  background: transparent;
  color: rgba(220,90,90,0.85);
  border: 1px solid rgba(220,90,90,0.35);
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-danger-subtle:hover {
  background: rgba(220,90,90,0.12);
  color: rgba(255,120,120,1);
  border-color: rgba(220,90,90,0.55);
}

/* ── Pause overlay (bespoke) ────────────────────────────────────────────── */
#pause-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  animation: pauseFadeIn 0.20s ease-out;
}
@keyframes pauseFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pause-glyph {
  display: flex; gap: 9px;
  margin-bottom: 6px;
}
.pause-glyph::before, .pause-glyph::after {
  content: '';
  width: 14px; height: 50px;
  background: var(--gold);
  border-radius: 3px;
  box-shadow: 0 0 24px rgba(212,170,78,0.45);
}
.pause-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin: 0;
}
.pause-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.62);
  text-align: center;
  max-width: 420px;
  line-height: 1.55;
  margin: 0;
}
.pause-snapshot {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 14px 22px;
  margin-top: 6px;
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.62);
  text-align: center;
  max-width: 460px;
}
.pause-snapshot strong { color: rgba(255,255,255,0.92); font-weight: 600; }
.pause-snapshot .gold { color: var(--gold); font-weight: 700; }
.pause-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-resume {
  background: var(--gold);
  color: #1a2a10;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.15s, transform 0.10s;
}
.btn-resume::before {
  content: '▶';
  font-size: 0.78rem;
}
.btn-resume:hover {
  background: var(--gold-light, #e8bc5a);
}
.btn-resume:active {
  transform: translateY(1px);
}
.btn-quit {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 0.86rem;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-quit:hover {
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.08);
}

/* ── Resume context recap card ────────────────────────────────────────── */
#resume-recap-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 590;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pauseFadeIn 0.22s ease-out;
}
.recap-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 50%), var(--green-dark, #1e2e14);
  border: 1px solid rgba(212,170,78,0.45);
  border-radius: 14px;
  padding: 26px 30px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 40px rgba(212,170,78,0.10);
  animation: modalIn 0.20s ease-out;
}
.recap-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.recap-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 16px;
}
.recap-lines {
  display: flex;
  flex-direction: column;
}
.recap-line {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.86rem;
  color: rgba(255,255,255,0.62);
  align-items: baseline;
}
.recap-line:last-child { border-bottom: none; }
.recap-line .recap-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.recap-line .recap-value {
  color: rgba(255,255,255,0.92);
  flex: 1;
}
.recap-line .recap-value strong { color: var(--gold); font-weight: 700; }
.recap-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* ── End-of-game score table alignment ───────────────────────────────────── */

/* 5-column grid: name | score | picked | partner | leasters */
.game-over-card .modal-score-row {
  display: grid;
  grid-template-columns: 1fr 66px 66px 72px 80px;
  align-items: center;
  gap: 0;
  padding: 8px 14px;
  font-size: 0.9rem;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.game-over-card .modal-score-row:last-child { border-bottom: none; }
.game-over-card .modal-score-row.winner-row { background: rgba(212,170,78,0.07); }

.game-over-card .end-score { text-align: right; }
.game-over-card .end-cell  { text-align: right; }

/* ── Hand-result modal ────────────────────────────────────────────────────── */

.hand-score-card { max-width: 440px; }

/* 4-column grid: name | change | prev | total */
.hs-col-heads {
  display: grid;
  grid-template-columns: 1fr 64px 56px 64px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(255,255,255,0.4);
  padding: 0 14px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 2px;
}
.hs-col-heads span:not(:first-child) { text-align: right; }

.hand-score-card .modal-score-row.hs-row {
  display: grid;
  grid-template-columns: 1fr 64px 56px 64px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 0.9rem;
}
.hand-score-card .modal-score-row.hs-row:last-child { border-bottom: none; }

.hs-name  { font-weight: 700; }
.hs-delta { text-align: right; font-size: 1rem; font-weight: 800; }
.hs-prev  { text-align: right; font-size: 0.78rem; color: rgba(255,255,255,0.38); }
.hs-total { text-align: right; font-size: 0.95rem; font-weight: 800; color: var(--white); }

/* ── Leasters per-player summary table ───────────────────────────────────── */

.leasters-player-table {
  margin: 10px 0 6px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  overflow: hidden;
}

/* Column header row for leasters table */
.leasters-col-heads {
  display: grid;
  grid-template-columns: 1fr 56px 50px 52px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(255,255,255,0.35);
  padding: 5px 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.leasters-col-heads span:not(:first-child) { text-align: right; }

/* 4-column grid: name | tricks | pts | badge */
.leasters-player-row {
  display: grid;
  grid-template-columns: 1fr 56px 50px 52px;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.85rem;
}
.leasters-player-row:last-child { border-bottom: none; }
.leasters-player-row.leasters-winner { background: rgba(80,160,100,0.2); }
.leasters-player-row.leasters-loser  { background: rgba(160,40,40,0.18); }

.leasters-pname   { font-weight: 700; color: var(--white); }
.leasters-ptricks { font-size: 0.78rem; color: rgba(255,255,255,0.55); text-align: right; }
.leasters-ppts    { font-size: 0.82rem; font-weight: 700; color: var(--gold); text-align: right; }
.leasters-badge   { font-size: 0.72rem; font-weight: 700; color: #60e080; text-align: right; }
.leasters-lose-badge { color: #e07070; }

/* ── Player Roster Picker — Two-Pane Layout ─────────────────────────────── */

/* Two-pane container: left rail + main content. Replaces the previous
   stacked tabs+grid in the chair sub-panel. */
.roster-twopane {
  flex: 1;
  display: flex;
  min-height: 0;          /* allow children to scroll */
  overflow: hidden;
}

/* Left rail — categories + virtual filters */
.roster-rail {
  width: 220px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.20);
  border-right: 1px solid rgba(255,255,255,0.08);
  padding: 10px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rail-section {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  padding: 12px 18px 6px;
}
.rail-section:first-child { padding-top: 4px; }
.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.rail-item:hover {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.95);
}
.rail-item.active {
  background: rgba(212,170,78,0.10);
  border-left-color: var(--gold, #d4aa4e);
  color: var(--gold, #d4aa4e);
  font-weight: 600;
}
.rail-icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.rail-label { flex: 1; }
.rail-count {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  padding: 1px 7px;
  border-radius: 9px;
  font-weight: 500;
}
.rail-item.active .rail-count {
  background: rgba(212,170,78,0.20);
  color: var(--gold, #d4aa4e);
}

/* Main pane — toolbar (status + search) + scrollable grid */
.roster-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.roster-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.roster-status {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
}
.roster-status strong { color: var(--gold, #d4aa4e); font-weight: 700; }
.roster-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  padding: 6px 12px;
  width: 220px;
  transition: border-color 0.15s, background 0.15s;
}
.roster-search:focus-within {
  border-color: rgba(212,170,78,0.45);
  background: rgba(255,255,255,0.06);
}
.roster-search::before {
  content: '🔍';
  font-size: 0.8rem;
  opacity: 0.55;
}
.roster-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.82rem;
  font-family: inherit;
}
.roster-search input::placeholder { color: rgba(255,255,255,0.35); }

.roster-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 18px;
}
.roster-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.roster-group-label:first-child { margin-top: 0; }
.roster-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.roster-empty {
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
  padding: 40px 20px;
  font-style: italic;
}
.roster-empty--soon {
  padding: 60px 24px;
  font-style: normal;
}
.roster-empty-icon {
  font-size: 2.6rem;
  margin-bottom: 14px;
  opacity: 0.7;
}
.roster-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold, #d4aa4e);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.roster-empty-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}

/* Rail item states for in-progress / coming-soon packs */
.rail-item--soon {
  opacity: 0.55;
}
.rail-item--soon:hover {
  opacity: 0.75;
  background: rgba(255,255,255,0.04);
}
.rail-item--soon.active {
  opacity: 1;
}
.rail-soon-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  padding: 2px 7px;
  border-radius: 9px;
  margin-left: 6px;
}
.rail-item.active .rail-soon-badge {
  background: rgba(212,170,78,0.18);
  color: var(--gold, #d4aa4e);
}

/* Placeholder card appended to in-progress packs */
.roster-card--placeholder {
  border-style: dashed !important;
  background: rgba(255,255,255,0.02) !important;
  cursor: default !important;
  opacity: 0.55;
}
.roster-card--placeholder:hover {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.roster-avatar--placeholder {
  width: 52px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.15);
}
.roster-card--placeholder .roster-tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.40);
  font-style: normal;
}

/* Grid container (now used inside .roster-content groups) */
.opponents-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding-bottom: 4px;
}

/* ── Mobile collapse: rail → top pills ──────────────────────────────────── */
@media (max-width: 720px) {
  .subpanel-card--wide {
    height: auto;
    max-height: calc(100vh - 48px);
  }
  .roster-twopane {
    flex-direction: column;
  }
  .roster-rail {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 8px 12px;
    gap: 6px;
    flex-shrink: 0;
  }
  .rail-section { display: none; }
  .rail-item {
    flex-shrink: 0;
    padding: 6px 12px;
    border-left: none;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    font-size: 0.76rem;
  }
  .rail-item.active {
    border-left: none;
    background: var(--gold, #d4aa4e);
    color: #1a2a10;
  }
  .rail-item.active .rail-count {
    background: rgba(0,0,0,0.18);
    color: rgba(0,0,0,0.6);
  }
  .roster-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .roster-search { width: 100%; }
  .opponents-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.roster-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.roster-card:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
}
.roster-card.selected {
  border-color: var(--gold, #d4aa4e);
  background: rgba(212,170,78,0.12);
}
.roster-check-mark {
  display: none;
  position: absolute;
  top: 4px; right: 5px;
  font-size: 0.7rem;
  color: var(--gold, #d4aa4e);
  font-weight: 700;
}
.roster-card.selected .roster-check-mark { display: block; }
.roster-avatar {
  line-height: 0;
  width: 52px;
  height: 66px;
  flex-shrink: 0;
}
.roster-avatar svg { width: 100%; height: 100%; display: block; }
.roster-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0 2px;
}
.roster-tag {
  font-size: 0.60rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.avatar-empty {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.3);
}