/* ── lightlol.com theme, ported ────────────────────────────────────────
   Poker is a separate deployable service from lightlol.com/infotech, so
   this is a self-contained copy of the design tokens and the handful of
   components these screens need — not a <link> to lightlol.com's own
   stylesheet. Linking cross-origin would work today, but it would mean
   poker's look silently depends on lightlol.com's static assets never
   moving or changing shape, which is exactly the kind of hidden coupling
   the identity-service split (see IDENTITY_SERVICE_URL) was deliberately
   explicit about instead of assuming.

   Source of truth for these values: lightlol/static/css/style.css :root.
   If that theme changes, this file needs a manual pass to match — there's
   no build step tying the two together. */

:root {
  --bg:            #E4E7EB;
  --surface-1:     #FFFFFF;
  --surface-2:     #D8DCE1;

  --border:        rgba(25, 30, 40, 0.08);
  --border-strong: rgba(25, 30, 40, 0.16);

  --text:          #20242C;
  --text-mid:      #5C6270;
  --text-muted:    #6E7481;

  --accent:        #FFE438;
  --accent-hover:  #FFE95C;
  --on-accent:     #241800;

  --white:         #ffffff;

  --danger:        #D1453A;
  --danger-deep:   #A3352B;

  --font-display: 'Raleway', sans-serif;
  --font-body:    'Inter', sans-serif;
}

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

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: radial-gradient(120% 100% at 50% -8%, var(--surface-1) 0%, var(--bg) 55%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text);
}

/* ── Card container, matching lightlol's login/register cards exactly ── */
.auth-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding: 2rem 1rem;
  gap: 1.25rem;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.auth-card h1 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 1.75rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.auth-field label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mid);
}

.auth-field input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 228, 56, 0.2);
}

.auth-field small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-mid);
}

.stats-hint {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Primary action inside a form — same accent-colored pill everywhere on the site
   (login, register, resend-verify all use this same bare-button rule). */
/* :not(.icon-btn) isn't load-bearing in this particular file (31 has no
   chip-style steppers the way blackjack/poker's setup screens do), kept
   only so this rule matches its siblings in the other card games —
   harmless either way since nothing here uses .icon-btn. */
.auth-form button:not(.icon-btn) {
  margin-top: 0.5rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 999px;
  padding: 0.8rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.auth-form button:not(.icon-btn):hover  { background: var(--accent-hover); }
.auth-form button:not(.icon-btn):active { transform: scale(0.98); }
.auth-form button:not(.icon-btn):disabled { opacity: 0.4; cursor: default; transform: none; }

/* Create/Join — both buttons intentionally share the same accent-pill
   look now. An earlier version gave "Join Game" a quieter outline
   treatment to read as the secondary action; that has been dropped for
   visual consistency, so .btn-secondary carries no override below and
   simply inherits the same styling as every other .auth-form button. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.4rem 0 1.1rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Small circular stepper buttons (chip +/- controls) */
.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.icon-btn:hover { border-color: var(--accent); background: var(--surface-1); }
.icon-btn:active { transform: scale(0.92); }

/* ── Auto-assigned color preview (join screen) ──
   Replaces the old manual "Pick Your Color" field — color is now chosen
   automatically (random for guests, profile avatar color for signed-in
   players) and changed later from in-game Settings, so this is just a
   read-only dot rather than anything clickable. */
.color-assigned-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  color: var(--text-muted);
}
.my-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}