/* ── Join / Setup screens ─────────────────────────────────────────────── */

.screen { display: none; }
.screen.active { display: flex; }

/* ── Color picker ── */
.color-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}
/* #screen-join-qualified (not just .color-swatch) because theme.css's
   ".auth-form button:not(.icon-btn)" rule (specificity 0,2,1: two
   classes + the button element) otherwise silently wins over the plain
   class rules below (0,2,0 for .color-swatch.selected) and overrides
   them — every swatch rendered with theme.css's own border/background
   regardless of .selected. An #id prefix outranks any class-only
   selector regardless of how many classes it has, so this can't lose
   that fight again even if theme.css's rule changes shape later. Same
   bug, same fix, as the card games' setup pages. */
#screen-join .color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
#screen-join .color-swatch:hover { transform: scale(1.08); }
#screen-join .color-swatch.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 228, 56, 0.25);
}

/* ── Mode toggle (Regular / Beginner) — unused on this page (fadein has
   no such toggle in its markup), kept only because it shipped as part
   of the same shared setup.css template every game's join screen
   copies from. Fixed the same way regardless, so it isn't a live bug
   the moment anyone does add one here. ── */
.mode-toggle {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
#screen-join .mode-btn {
  flex: 1;
  padding: 0.65rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-mid);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#screen-join .mode-btn:hover { border-color: var(--border-strong); }
#screen-join .mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 228, 56, 0.10);
}

/* ── Back to games home ── */
.back-home-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.back-home-link:hover {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Chip counts panel (game setup) ── */
.chip-setup-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}
.chip-setup-eyebrow {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.chip-setup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.chip-setup-row:last-child { margin-bottom: 0; }
.chip-setup-chip-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chip-setup-chip-label {
  font-size: 0.8rem;
  color: var(--text-mid);
}
/* Chip face colors are denomination identity (real casino chip colors),
   not theme decoration — these stay data-driven (inline per-value) rather
   than themed, same reasoning as the card suit colors on the live table. */
.chip-face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  flex-shrink: 0;
}
.chip-setup-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chip-setup-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 26px;
  text-align: center;
}
.chip-setup-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.chip-setup-total-label {
  font-size: 0.8rem;
  color: var(--text-mid);
}
.chip-setup-total-value {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--accent);
}

/* Two cards (join + setup) can be mid-transition together briefly on
   narrow screens without this; keeps the stack tidy on mobile. */
@media (max-width: 480px) {
  .auth-card { padding: 1.75rem 1.25rem; }
}