/* BigPool UI refresh — login, signup, password reset and onboarding.
   Scoped to .auth-v2 / .onboarding-page so the legacy auth rules in app.css
   (kept for the PWA tests) are only overridden visually. */

/* ---------- Layout ---------- */
.auth-v2 { min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(440px, 1fr) minmax(0, 1.12fr); background: #070908; }
.auth-v2 .auth-panel {
  position: relative; isolation: isolate; align-items: center; justify-content: center; gap: 18px;
  padding: 40px clamp(24px, 5vw, 64px); border-right: 0;
  background: radial-gradient(90% 60% at 50% 0%, rgba(104,211,145,0.07), transparent 60%), linear-gradient(180deg, #0c110d, #080b09);
}
.auth-card {
  position: relative; width: min(440px, 100%); padding: 30px 30px 26px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(120% 70% at 50% 0%, rgba(104,211,145,0.08), transparent 60%), linear-gradient(180deg, #111712, #0b0f0c);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 70px -40px rgba(0,0,0,0.9);
}
.auth-card::before { /* gold-to-green hairline along the top edge, as on the lobby hero */
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,180,93,0.7) 30%, rgba(104,211,145,0.6) 70%, transparent);
}

/* ---------- Card head ---------- */
.auth-card-head { display: grid; justify-items: start; margin-bottom: 22px; }
.auth-v2 .auth-panel .brand { margin: 0 0 22px; }
.auth-v2 .brand-mark { width: 36px; height: 36px; }
.auth-kicker { color: var(--gold); font: 800 11px var(--font-heading); letter-spacing: 1.8px; text-transform: uppercase; }
.auth-v2 .auth-panel h1 { max-width: none; margin: 8px 0 8px; font: 900 clamp(28px, 3vw, 34px)/1.06 BigPoolDisplay, var(--font-heading); letter-spacing: -0.01em; text-wrap: balance; }
.auth-card-head p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.5; }

/* ---------- Context (challenge / invite) ---------- */
.auth-context { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(104,211,145,0.24); background: rgba(104,211,145,0.07); }
.auth-context > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(104,211,145,0.16); color: var(--green-bright); font: 900 15px/1 var(--font-heading); }
.auth-context p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.45; }
.auth-context strong { color: var(--text); }
.auth-context-gold { border-color: rgba(217,180,93,0.32); background: linear-gradient(90deg, rgba(217,180,93,0.1), rgba(217,180,93,0.03)); }
.auth-context-gold > span { color: #f4f4f1; background: radial-gradient(circle at 35% 30%, #3a3f3c, #070908 70%); box-shadow: 0 0 0 1px rgba(217,180,93,0.5), 0 0 14px rgba(217,180,93,0.3); font-size: 13px; }

/* ---------- Provider pills ---------- */
.auth-v2 .auth-provider-stack { gap: 10px; margin-bottom: 10px; }
.auth-v2 .google-auth, .auth-v2 .wallet-auth {
  height: 50px; min-height: 50px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--text); box-shadow: none; font: 800 14px var(--font-heading);
  transition: border-color .18s, background .18s, transform .18s;
}
.auth-v2 .google-auth:hover, .auth-v2 .wallet-auth:hover { transform: translateY(-1px); border-color: rgba(104,211,145,0.5); background: linear-gradient(180deg, rgba(104,211,145,0.1), rgba(255,255,255,0.03)); box-shadow: none; }
.auth-v2 .google-auth:active, .auth-v2 .wallet-auth:active { transform: translateY(0); }
.auth-v2 .google-auth:focus-visible, .auth-v2 .wallet-auth:focus-visible { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(104,211,145,0.28); }
.auth-v2 .google-auth:disabled, .auth-v2 .wallet-auth:disabled { opacity: .45; transform: none; border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.auth-v2 .google-auth i, .auth-v2 .wallet-auth i { color: #6d7a72; }
.auth-v2 .wallet-assurance { margin: 0 0 18px; color: var(--muted); font-size: 11px; }
.auth-v2 .auth-divider { margin-bottom: 18px; color: #6d7a72; font: 800 10px var(--font-heading); letter-spacing: 1.4px; }
.auth-v2 .auth-divider::before, .auth-v2 .auth-divider::after { background: rgba(255,255,255,0.08); }
.auth-v2 .auth-inapp-note { border-radius: 14px; border-color: rgba(104,211,145,0.22); }

/* ---------- Form ---------- */
.auth-v2 .form, .onboarding-page .form { gap: 16px; }
.auth-v2 .field, .onboarding-page .field { gap: 7px; }
.auth-v2 .field label, .onboarding-page .field label { color: var(--text-soft); font: 800 11px var(--font-heading); letter-spacing: 1.2px; text-transform: uppercase; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-label-row a { color: var(--green); font: 700 12px var(--font-heading); }
.auth-label-row a:hover { color: var(--green-bright); text-decoration: underline; text-underline-offset: 3px; }
.auth-v2 .input, .onboarding-page .input, .onboarding-page .select {
  min-height: 48px; border-radius: 12px; border-color: rgba(255,255,255,0.12); background: rgba(5,8,6,0.7); font-size: 15px;
}
.auth-v2 .input:hover, .onboarding-page .input:hover, .onboarding-page .select:hover { background: rgba(5,8,6,0.85); border-color: rgba(255,255,255,0.18); }
.auth-v2 .input:focus, .onboarding-page .input:focus, .onboarding-page .select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(104,211,145,0.22); background: #070a08; }
.auth-v2 .input:user-invalid { border-color: rgba(240,125,115,0.6); }
.auth-v2 .field-help { margin-top: -1px; font-size: 12px; }
.auth-v2 .form-error, .onboarding-page .form-error {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid rgba(240,125,115,0.32); background: rgba(240,125,115,0.08); color: #ffc0bb; font-size: 13px; line-height: 1.45;
}
.auth-v2 .form-error::before, .onboarding-page .form-error::before { content: "!"; flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(240,125,115,0.22); color: #ffd0cc; font: 900 11px/1 var(--font-heading); }
.auth-v2 .auth-error { margin: 0 0 16px; }
.auth-v2 [data-form-error]:empty { display: none; }
.auth-cta, .onboarding-form > .btn {
  width: 100%; min-height: 52px; border-radius: 14px; font-size: 16px;
  background: linear-gradient(180deg, #86e6a9, var(--green));
  box-shadow: 0 12px 30px -14px rgba(104,211,145,0.8), inset 0 1px 0 rgba(255,255,255,0.4);
}
.auth-cta:hover, .onboarding-form > .btn:hover { background: linear-gradient(180deg, #96ebb5, var(--green-bright)); }
.auth-cta:focus-visible, .onboarding-form > .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px #0b0f0c, 0 0 0 5px rgba(104,211,145,0.7); }
.auth-v2 .auth-legal { margin: -2px 0 0; color: var(--muted); font-size: 11.5px; }

/* ---------- Footer links ---------- */
.auth-v2 .auth-switch { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); color: var(--muted); font-size: 14px; text-align: center; }
.auth-v2 .auth-switch a { color: var(--green); font-family: var(--font-heading); font-weight: 800; }
.auth-v2 .auth-play-first { min-height: 46px; margin-top: 12px; border-radius: 12px; border-color: rgba(255,255,255,0.1); color: var(--text-soft); font-size: 13px; white-space: normal; text-align: center; line-height: 1.3; }
.auth-v2 .auth-play-first:hover { border-color: rgba(104,211,145,0.4); color: var(--text); }
.auth-v2 .auth-panel > p.auth-fineprint { width: min(440px, 100%); margin: 0; color: #6d7a72; font-size: 11.5px; line-height: 1.5; text-align: center; }
.auth-fineprint a { color: var(--text-soft); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 3px; }

/* ---------- Art panel (desktop only; app.css hides it under 720px) ---------- */
.auth-v2 .auth-visual {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; min-height: 0; display: flex; align-items: flex-end; padding: 40px 48px 52px 48px; border-left: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(5,8,6,0.35) 0%, rgba(5,8,6,0) 22%, rgba(5,8,6,0) 45%, rgba(5,8,6,0.94) 80%),
    /* The banner is the table photo (left 46%) beside a wordmark; scale it so
       only the photo fills the panel width. */
    url('/app-assets/assets/brand/bigpool-auth-banner.webp?v=2') 0% 38% / 217.5% auto no-repeat,
    radial-gradient(80% 60% at 30% 40%, rgba(104,211,145,0.1), transparent 70%), #040706;
}
.auth-v2 .auth-visual::before { background: linear-gradient(90deg, rgba(5,9,8,0.55), transparent 14%); }
.auth-visual-copy { position: relative; z-index: 1; max-width: 460px; }
.auth-visual-kicker { color: var(--gold); font: 800 11px var(--font-heading); letter-spacing: 1.8px; text-transform: uppercase; }
.auth-visual-copy strong { display: block; margin: 10px 0 10px; font: 900 clamp(32px, 3.4vw, 46px)/1.02 BigPoolDisplay, var(--font-heading); letter-spacing: -0.01em; }
.auth-visual-copy em { font-style: normal; color: var(--gold); text-shadow: 0 0 30px rgba(217,180,93,0.3); }
.auth-visual-copy p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.55; }
.auth-visual-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.auth-visual-copy li { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(7,9,8,0.6); color: var(--text-soft); font: 800 12px var(--font-heading); }
.auth-visual-copy li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(104,211,145,0.7); }

@media (max-width: 1100px) and (min-width: 721px) {
  .auth-v2 { grid-template-columns: minmax(420px, 1fr) minmax(0, 0.9fr); }
  .auth-v2 .auth-visual { padding: 32px; }
  .auth-visual-copy ul { display: none; }
}

/* ---------- Phone: one focused card ---------- */
@media (max-width: 720px) {
  .auth-v2 { grid-template-columns: 1fr; }
  .auth-v2 .auth-panel { min-height: 100vh; min-height: 100dvh; justify-content: flex-start; gap: 14px; padding: max(20px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
  .auth-card { padding: 22px 18px 20px; border-radius: 20px; }
  .auth-card::before { left: 18px; right: 18px; }
  .auth-v2 .auth-panel .brand { margin-bottom: 18px; }
  .auth-card-head { margin-bottom: 18px; }
  .auth-v2 .auth-panel h1 { font-size: 27px; }
  .auth-card-head p { font-size: 14px; }
  .auth-v2 .input, .onboarding-page .input, .onboarding-page .select { font-size: 16px; }
}

/* ---------- Onboarding (signed-in shell, step 2 of signup) ---------- */
.onboarding-page { display: grid; justify-items: center; padding-top: 12px; }
.onboarding-card {
  position: relative; width: min(560px, 100%); padding: 28px 28px 24px; border-radius: 22px; text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(120% 70% at 50% 0%, rgba(217,180,93,0.09), transparent 60%), linear-gradient(180deg, #111712, #0b0f0c);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 70px -40px rgba(0,0,0,0.9);
}
.onboarding-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,180,93,0.7) 30%, rgba(104,211,145,0.6) 70%, transparent); }
.ob-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.ob-steps span { width: 28px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.1); }
.ob-steps span.is-done { background: rgba(104,211,145,0.5); }
.ob-steps span.is-active { background: var(--green); box-shadow: 0 0 10px rgba(104,211,145,0.6); }
.ob-steps small { margin-left: 6px; color: var(--muted); font: 800 11px var(--font-heading); letter-spacing: 1.2px; text-transform: uppercase; }
.ob-kicker { color: var(--gold); font: 800 11px var(--font-heading); letter-spacing: 1.8px; text-transform: uppercase; }
.onboarding-card h1 { margin: 8px 0 8px; font: 900 clamp(28px, 4vw, 36px)/1.05 BigPoolDisplay, var(--font-heading); letter-spacing: -0.01em; }
.ob-lede { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.5; }
.onboarding-page .onboarding-form { margin-top: 22px; }
.onboarding-page .avatar-picker { grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 18px; border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; background: radial-gradient(80% 120% at 0% 50%, rgba(217,180,93,0.08), transparent 60%), rgba(255,255,255,0.025); }
.onboarding-page .avatar-picker strong { font: 800 15px var(--font-heading); }
.onboarding-page .avatar-preview { width: 112px; height: 112px; font-size: 30px; box-shadow: 0 0 0 3px #0b0f0c, 0 0 0 5px rgba(217,180,93,0.6), 0 0 28px rgba(217,180,93,0.25); }
.onboarding-page .avatar-upload { border-radius: 999px; }
.onboarding-page .select { border-radius: 12px; }
.onboarding-page [data-form-error]:empty { display: none; }
@media (max-width: 720px) {
  .onboarding-page { padding-top: 4px; }
  .onboarding-card { padding: 20px 16px 18px; border-radius: 20px; }
  .onboarding-card::before { left: 18px; right: 18px; }
  .onboarding-card h1 { font-size: 28px; }
  .onboarding-page .avatar-picker { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; padding: 18px 14px 16px; }
  .onboarding-page .avatar-preview { width: 104px; height: 104px; }
  .onboarding-page .avatar-picker p { margin: 4px 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-v2 *, .onboarding-page * { transition: none !important; }
  .auth-v2 .google-auth:hover, .auth-v2 .wallet-auth:hover, .auth-cta:hover, .onboarding-form > .btn:hover { transform: none; }
}

/* Guest claim sheet ("Keep your account") */
.modal:has(.claim-sheet) { width: min(440px, 100%); border-radius: 22px; border-color: rgba(217,180,93,0.22); background: radial-gradient(120% 60% at 0% 0%, rgba(104,211,145,0.12), transparent 60%), linear-gradient(180deg, #121814, #0b0f0c); }
.modal:has(.claim-sheet) .modal-header { position: absolute; right: 0; top: 0; padding: 14px; border: 0; }
.modal:has(.claim-sheet) .modal-header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.modal:has(.claim-sheet) .modal-header .icon-button { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.modal:has(.claim-sheet) .modal-body { position: relative; padding: 24px 22px 18px; }
.modal:has(.claim-sheet) { position: relative; }
.claim-sheet { display: grid; gap: 16px; }
.claim-hero { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.claim-hero .avatar { width: 52px; height: 52px; flex: none; font-size: 20px; box-shadow: 0 0 0 2px #0b0f0c, 0 0 0 4px rgba(217,180,93,0.7); }
.claim-eyebrow { display: block; color: var(--gold); font: 800 10px var(--font-heading); letter-spacing: 1.6px; text-transform: uppercase; }
.claim-hero h3 { margin: 3px 0 0; font: 900 22px/1.1 BigPoolDisplay, var(--font-heading); letter-spacing: 0.2px; }
.claim-lead { margin: 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.55; }
.claim-keeps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.claim-keeps li { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); text-align: center; }
.claim-keeps b { color: var(--green-bright); font: 900 17px BigPoolDisplay, var(--font-heading); font-variant-numeric: tabular-nums; }
.claim-keeps li:first-child b { color: var(--gold); }
.claim-keeps span { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; }
.claim-form { gap: 12px; }
.claim-form .field { gap: 6px; color: var(--muted); font: 800 10.5px var(--font-heading); letter-spacing: 1.3px; text-transform: uppercase; }
.claim-form .input { min-height: 50px; border-radius: 14px; background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.09); font: 600 16px var(--font-body, inherit); letter-spacing: 0; text-transform: none; color: var(--text); }
.claim-form .input:focus { border-color: rgba(104,211,145,0.6); box-shadow: 0 0 0 3px rgba(104,211,145,0.15); }
.claim-password { position: relative; display: block; }
.claim-password .input { width: 100%; padding-right: 70px; }
.claim-reveal { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--text-soft); font: 800 12px var(--font-heading); cursor: pointer; }
.claim-submit { min-height: 52px; margin-top: 4px; border-radius: 14px; font-size: 16px; background: linear-gradient(180deg, #86e6a9, var(--green)); box-shadow: 0 14px 30px -14px rgba(104,211,145,0.9), inset 0 1px 0 rgba(255,255,255,0.4); }
.claim-fine { margin: -2px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.claim-later { justify-self: center; min-height: 40px; padding: 0 16px; border: 0; background: none; color: var(--muted); font: 700 13px var(--font-heading); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.claim-later:hover { color: var(--text); }
.modal:has(.claim-sheet) .modal-footer:empty { display: none; }
@media (max-width: 720px) {
  .modal:has(.claim-sheet) { border-radius: 22px 22px 18px 18px; }
  .modal:has(.claim-sheet) .modal-body { padding: 22px 18px 14px; }
}