/* ── 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. See
   the identical fix (and its full writeup) in poker's setup.css, where
   this exact bug was first reported against the Regular/Beginner mode
   toggle below — the color picker here was silently affected the same
   way, just less obviously (the swatch's own colored background always
   showed through regardless, only the selection *ring* was invisible). */
#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) ──
   Same #screen-join specificity fix as .color-swatch above. */
.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; }

  /* The 8 color swatches otherwise wrap to a second line on narrower
     phones (iPhone SE/mini-width screens) — shrinking them slightly and
     tightening the gap keeps the whole row on one line. */
  .color-picker { gap: 0.4rem; }
  #screen-join .color-swatch { width: 28px; height: 28px; }

  /* Tighter Join/Create spacing so "Create New Game" sits right under
     "Join Game" instead of needing an extra scroll to reach. */
  .auth-divider { margin: 0.75rem 0 0.6rem; }
}