/* ── lightlol.com theme, ported ────────────────────────────────────────
   Crossword Race 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. See every other game's theme.css for the same reasoning.

   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:            #F3F5F9;
  --surface-1:     #FFFFFF;
  --surface-2:     #EEF1F6;

  --border:        rgba(22, 28, 45, 0.10);
  --border-strong: rgba(22, 28, 45, 0.18);

  --text:          #161820;
  --text-mid:      #474B5A;
  --text-muted:    #5A5F70;
  --page-bg:       linear-gradient(180deg, #FBFCFE 0%, #EEF1F6 100%);
  --nav-bg:        rgba(251, 252, 254, 0.82);
  --card-bg:       rgba(255, 255, 255, 0.88);
  --chip-bg:       rgba(22, 24, 32, 0.05);
  --shadow-card:   0 18px 40px -26px rgba(30, 45, 90, 0.38);
  --gold:          #E8A200;
  --gold-text:     #9A5B00;

  --accent:        #FFE438;
  --accent-hover:  #FFE95C;
  --on-accent:     #2A1B00;

  --white:         #ffffff;

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

  --success:       #3FA96A;

  --font-display: 'Fredoka', sans-serif;
  --font-body:    'Nunito', sans-serif;
}

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

/* Stops iOS Safari's double-tap-to-zoom (a second quick tap on the same
   spot — tapping "11" or "22" on a number pad, tapping Hit twice, and so
   on). The viewport meta's maximum-scale/user-scalable are ignored by
   iOS for accessibility, so this CSS is the thing that actually works.
   "manipulation" keeps scrolling and pinch-zoom; it only removes the
   double-tap gesture (and the 300ms tap delay that comes with it). The
   effective value is the intersection down the tree, so setting it on
   <html> covers every button/cell without touching each one. */
html, body {
  touch-action: manipulation;
  height: 100%;
  font-family: var(--font-body);
  background-color: var(--bg); background-image: var(--page-bg);
  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 {
  /* Was centered with justify-content: center, which put this card at
     (viewport height - card height) / 2 from the top -- different on
     every game since every game's card has different content, and
     unrelated to the "Back to Games" pill fixed at top: 1rem, which
     doesn't participate in that centering at all. That made the gap
     under the button random per game: tall card + short viewport could
     put the card right under (or behind) the button; short card + tall
     viewport left a huge gap. Anchoring from the top with a fixed
     padding instead makes the gap identical everywhere, regardless of
     card height or viewport height. 5.5rem clears the button
     (top: 1rem + its own height) with consistent breathing room below
     it, on every game, every screen size. */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 5.5rem 1rem 2rem;
  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: var(--shadow-card, 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);
}

.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; }

.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);
}

.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); }