/* ============================================================================
   Playit — LOGIN / REGISTER modal styling (partial/modal/auth.html).
   A cyan-bordered arcade card over a dark blurred backdrop. Loaded on EVERY page
   by base.html (like modal.css) because the modal can open from the header
   anywhere. It builds ON the shared `.modal` shell (modal.css) — that gives the
   full-screen backdrop, the open/close wiring and the pop reveal; here we only add
   the auth look and the login↔register text toggle. The strict CSP forbids inline
   styles, so every value below is a class, never a style="" attribute.
   ============================================================================ */

/* ---- Backdrop: darker + softer blur than the generic modal — this one covers
   the whole app while the user types a password. ---- */
.modal-auth {
  padding: 24px;
  background: rgba(5, 4, 15, .88);
  backdrop-filter: blur(3px);
}

/* ---- The card: a 430px cyan-bordered panel with a layered cyan glow + hard
   drop ledge. It lifts into place on open, reusing the app's transform-only modal
   reveal (`.is-open`) so every modal opens the same way. ---- */
.auth-card {
  width: 430px;
  max-width: 100%;
  border: 4px solid var(--color-cyan);
  background: var(--color-panel);
  box-shadow:
    0 0 0 3px var(--color-ink),
    0 0 34px rgba(36, 229, 255, .42),
    12px 14px 0 rgba(0, 0, 0, .55);
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}
.modal.is-open .auth-card { transform: none; }

/* ---- Title bar: sparkle + mode title on the left, close button on the right,
   split by a dashed rule in the console-header divider colour (#3a3670). ---- */
.auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 2px dashed #3a3670;
}
.auth-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  color: #7ff0ff;
}
.auth-head-sparkle { display: inline-flex; color: var(--color-cyan); }
/* the cyan close X is the shared `.btn btn-cyan modal-close` (see modal.css) */

/* ---- Body ---- */
.auth-body { padding: 22px 22px 24px; }

/* Gmail pill: uses the .btn system (.btn-white gives the white fill + grey ledge
   and the shared lift-on-hover); here we only tune its size + icon gap. The ledge
   is the .btn system's, so it lifts like every other button. */
.auth-gmail {
  gap: 12px;
  font-size: 11px;
  padding: 13px 16px;
}
.auth-gmail-icon { display: inline-flex; }

/* OR divider: a centred label between two thin rules. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
.auth-divider-line {
  flex: 1;
  height: 2px;
  background: var(--color-line);
}
.auth-divider-label {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--color-faint);
}

/* Fields: a relative wrapper so the icon can sit inside, on the left. The
   password field sits a touch further from the submit below it. */
.auth-field {
  position: relative;
  margin-bottom: 14px;
}
/* Login: the password is the last field before submit → the larger gap sits on it. */
.auth-field-password { margin-bottom: 20px; }
/* Register: the confirm field becomes the last field, so the password gap tightens
   back to 14 and the confirm field carries the larger gap before submit. */
.modal-auth[data-auth-mode="register"] .auth-field-password { margin-bottom: 14px; }
.auth-field-confirm { margin-bottom: 20px; }
.auth-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  /* The person icon (partial/icon/person.html) is fill:currentColor; the faint field-icon colour.
     The mail/lock icons carry their own hard-coded fill, so this only affects the person. */
  color: #6f6ab0;
}
/* The icon slot drawn as a "$" glyph — for a money box (the tip amount, the withdraw amount). */
.auth-field-dollar {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-gold);
}
.auth-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-ink);
  border: 2px solid var(--color-line-2);
  outline: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.2;
  /* extra left padding leaves room for the inset icon */
  padding: 12px 12px 12px 40px;
  caret-color: var(--color-cyan);
}
.auth-input:focus { border-color: var(--color-cyan); }

/* Inline error line — a gentle, centred sentence (password mismatch now; server auth
   errors later). Hidden via the [hidden] attribute until auth.js fills it. */
.auth-error {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-pink-light);
}

/* Switch-mode row: a prompt + an underlined gold link that flips the mode. */
.auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-muted);
}
.auth-switch-link {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--color-gold);
  text-decoration: underline;
}
.auth-switch-link:hover { color: #fff; }

/* ---- Login ↔ register: the modal root carries data-auth-mode; show only the
   matching label everywhere (title, submit, switch text + link). auth.js flips
   the flag when the switch link is tapped. ---- */
.modal-auth[data-auth-mode="login"] .auth-only-register { display: none; }
.modal-auth[data-auth-mode="register"] .auth-only-login { display: none; }