/* ============================================================
   NEONBET · Auth screen reskin — login / register
   (frontend-redesign-v2 · designer auth.css look)
   ------------------------------------------------------------
   SCOPED to #auth-screen. Restyles the EXISTING production auth
   markup (tabbed login/register overlay) to the designer card look
   on tokens. Every field id, .auth-tab/.auth-form hook, .form-error
   and the bindAuthForms wiring are untouched — Auth.login /
   Auth.register, email-or-username login, 18+ DOB check and JWT
   token storage all keep working. Loaded after style.css.
   No backend / API changes.
   ============================================================ */

/* ── BUG FIX (2026-08-13): one-finger scrolling was dead on mobile ──────────
   #auth-screen used to be an IN-FLOW box with only a `min-height`, while
   `css/style.css` (@media max-width:768px) additionally gave it
   `overflow-y: auto`. That combination produces a scroll container whose
   content exactly fills it — measured on production: scrollHeight 1445 ===
   clientHeight 1445, so `canScroll` was false. `overscroll-behavior-y: contain`
   below then did precisely what it is designed to do: it refused to chain that
   dead scroller's touch to the document (which COULD scroll, scrollHeight
   1444 > clientHeight 812). A one-finger drag therefore hit a scroll container
   with nothing to scroll and went nowhere, while programmatic scrolls and
   two-finger visual-viewport panning — neither of which uses the layout scroll
   chain — kept working. That asymmetry was the whole reported symptom.

   The overlay is now a REAL bounded scroller: a fixed `height` (not just
   `min-height`) so scrollHeight can exceed clientHeight, which also makes
   `overscroll-behavior-y: contain` meaningful and correct — it now stops the
   page behind from scrolling instead of the auth screen.

   NOTE ON CENTRING: `align-items: center` is deliberately NOT used here. A
   centred flex item that overflows a scroll container overflows in BOTH
   directions, and the top overflow is unreachable because scrollTop cannot go
   negative. Measured with `align-items:center` + `height:100dvh`: the card's
   top sat at -284px at scrollTop 0, permanently hiding the logo and the
   Sign In / Register tabs. `flex-start` + `margin:auto` on the container is the
   idiom that centres when it fits and scrolls cleanly when it does not — the
   same pattern `css/pages/wallet.css` already uses for every `.modal`. */
#auth-screen {
  height: 100vh;          /* fallback for engines without dvh */
  height: 100dvh;         /* tracks the dynamic viewport (browser UI) */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;          /* see NOTE ON CENTRING above */
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;               /* fallback */
  overflow-x: clip;                 /* clips without becoming an x scroll container */
  -webkit-overflow-scrolling: touch;
  /* Safe-area aware so the card clears the iPhone notch / home indicator.
     The bottom adds two insets, both published by js/viewport-inset.js:
       --nb-kb-inset       with an on-screen keyboard the visual viewport
                           shrinks but the layout viewport — and so 100dvh —
                           does not, so without this extra room the last fields
                           and the Register CTA sit behind the keyboard at
                           maximum scroll.
       --nb-obstruct-inset the cookie pill is fixed at z-index 120 and this
                           screen is a `.screen` at z-index 1, so the pill
                           floats over the CREATE ACCOUNT button (measured: 79%
                           covered, CTA not tappable). This buys the scroll
                           range to lift the CTA clear of it. The banner itself
                           is untouched and no consent choice is implied.
     Both default to 0px, so nothing changes once the keyboard closes / the
     notice is dismissed, and engines that never run the helper are unaffected. */
  padding:
    max(var(--space-8), env(safe-area-inset-top))
    max(var(--space-5), env(safe-area-inset-right))
    calc(max(var(--space-8), env(safe-area-inset-bottom)) + var(--nb-kb-inset, 0px))
    max(var(--space-5), env(safe-area-inset-left));
  overscroll-behavior-y: contain;   /* no scroll-chaining rubber-band */
  background:
    radial-gradient(900px 500px at 80% 8%,  rgba(255,46,147,0.18), transparent 60%),
    radial-gradient(700px 500px at 10% 92%, rgba(0,229,255,0.14), transparent 60%),
    radial-gradient(600px 400px at 60% 100%, rgba(139,92,255,0.16), transparent 60%),
    var(--bg-base);
}

/* Cookie-pill clearance, applied whenever the notice is showing.
   TRADE-OFF, measured, deliberate: padding inside a `margin:auto`-centred box
   also shifts that box, so while the pill is up a SHORT form that fits sits
   ~64px above true centre. This was first scoped to :has(#register-form.active)
   to keep login perfectly centred — but at 568x320 landscape the LOGIN form
   overflows too and its SIGN IN button then hit-tested to `cookie-banner`,
   i.e. unreachable. An untappable primary CTA outweighs an off-centre card, so
   the clearance is unconditional. It costs nothing once the player dismisses
   the notice: --nb-obstruct-inset drops to 0 and centring is exact again. */
#auth-screen {
  padding-bottom: calc(max(var(--space-8), env(safe-area-inset-bottom))
                       + var(--nb-kb-inset, 0px)
                       + var(--nb-obstruct-inset, 0px));
}

/* `margin: auto` (not `0 auto`) is load-bearing: the vertical autos centre the
   card while it fits the bounded scroller above, and collapse to 0 the moment
   it does not — so a tall register form scrolls from its true top instead of
   being clipped. Replaces `align-items: center` on the parent. */
#auth-screen .auth-container { width: 100%; max-width: 480px; margin: auto; }
#auth-screen .auth-container.reg-active { max-width: 520px; }

/* Exit control — returns a guest to the site (closeAuth() in app.js).
   position:fixed, because the tall register form scrolls the WINDOW: an
   absolutely-positioned control would scroll out of reach. Offsets use the same
   safe-area maxes as the overlay padding above, so it clears the iPhone notch
   and never sits under the browser chrome. 44x44 = full touch target; it is
   anchored to the viewport corner, above the centred card, so it cannot overlap
   the logo or the tabs. */
#auth-screen .auth-close-btn {
  position: fixed;
  top: max(var(--space-4), env(safe-area-inset-top));
  right: max(var(--space-4), env(safe-area-inset-right));
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
#auth-screen .auth-close-btn:hover {
  background: var(--bg-surface-2);
  border-color: var(--neon-cyan);
  color: var(--text-primary);
}
#auth-screen .auth-close-btn:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* Brand lockup */
#auth-screen .auth-logo { text-align: center; margin-bottom: var(--space-6); }
#auth-screen .auth-logo-text {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
#auth-screen .auth-logo-sub {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  opacity: 1;
}

/* Card */
#auth-screen .auth-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-elevated);
  backdrop-filter: none;
}
#auth-screen .auth-card::before { display: none; }   /* drop the neon accent line */

/* Segmented tabs */
#auth-screen .auth-tabs {
  display: flex; gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: var(--space-6);
}
#auth-screen .auth-tab {
  flex: 1; padding: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  transition: all var(--dur-fast) var(--ease-out);
}
#auth-screen .auth-tab.active {
  background: rgba(0,229,255,0.10);
  color: var(--neon-cyan);
  box-shadow: 0 0 0 1px var(--neon-cyan) inset;
}

/* Forms */
#auth-screen .auth-form { display: none; }
#auth-screen .auth-form.active { display: grid; gap: var(--space-4); animation: none; }
/* ROOT-CAUSE FIX: the register form is NOT an inner scroll container.
   It previously had `max-height: min(70vh,560px); overflow-y:auto`, but a vh cap
   ignores the software keyboard: on mobile the lower fields (phone → email →
   username → password → CREATE ACCOUNT) ended up behind the keyboard with no way
   to scroll to them. Now the form flows at its natural height and the whole
   #auth-screen scrolls with the window, so the keyboard can never trap a field
   and the browser's native scroll-into-view brings the focused input above it. */
#auth-screen #register-form,
#auth-screen #login-form { max-height: none; overflow: visible; }

#auth-screen .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { #auth-screen .form-row-2 { grid-template-columns: 1fr; } }
#auth-screen .form-group { margin-bottom: 0; }
#auth-screen .form-row-2 .form-group { margin-bottom: 0; }

/* !important mirrors the CP2077 input/label rules later in style.css */
#auth-screen .form-label {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important; font-weight: 500;
  color: var(--text-secondary) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 6px;
}
#auth-screen .form-input {
  width: 100%; height: 48px;
  padding: 0 var(--space-4);
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important; font-size: var(--text-base);
  letter-spacing: 0 !important;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
}
#auth-screen .form-input::placeholder { color: var(--text-muted) !important; }
#auth-screen .form-input:focus { border-color: var(--neon-cyan) !important; box-shadow: 0 0 0 3px rgba(0,229,255,0.10) !important; }
#auth-screen input[type="date"].form-input { color-scheme: dark; }

/* Submit */
#auth-screen .btn-auth {
  width: 100%; height: 52px;
  border-radius: var(--radius-md);
  font-family: var(--font-display) !important; font-weight: 400;
  font-size: var(--text-base) !important; letter-spacing: 0.06em !important; text-transform: uppercase;
  border-radius: var(--radius-md) !important;
  background: var(--grad-primary) !important; background-size: 200% 200% !important;
  color: var(--text-inverse);
  margin-top: var(--space-2);
  position: relative; overflow: visible;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-position var(--dur-base) var(--ease-out);
}
#auth-screen .btn-auth::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad-primary); filter: blur(18px); opacity: 0.30; z-index: -1; transform: none;
}
#auth-screen .btn-auth:hover { transform: translateY(-1px); box-shadow: var(--glow-magenta); background-position: 100% 100% !important; }
#auth-screen .btn-auth:active { transform: translateY(1px); }

/* Welcome-bonus note */
#auth-screen .auth-bonus {
  text-align: center; margin-top: var(--space-4);
  padding: var(--space-3);
  background: rgba(61,220,151,0.08);
  border: 1px solid rgba(61,220,151,0.20);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--success);
}
#auth-screen .auth-bonus strong { color: var(--success); }

/* Inline error (appended by showFieldError) */
#auth-screen .form-error {
  color: var(--danger);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  text-align: center;
}

/* When a field is scrolled into view (keyboard focus), leave breathing room so
   it never sits flush against the top edge / any UI. */
#auth-screen .form-input { scroll-margin-block: 20px; }

/* Mobile: force a ≥16px input font. The --text-base token floors at ~15px,
   which triggers iOS Safari's zoom-on-focus and a disorienting viewport shift
   while typing. 16px keeps the layout stable with the keyboard open. Touch
   targets (48px inputs / 52px submit) already meet the 44px minimum. */
@media (max-width: 768px) {
  #auth-screen .form-input { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   Registration offers (Mission 1) — appended, nothing above is changed.
   Scoped to #reg-offers / .reg-reward so no existing selector is affected.
═══════════════════════════════════════════════════════════ */
#reg-offers[hidden] { display: none !important; }

.reg-offers { margin: 0 0 18px; }
.reg-offers-set { border: 0; margin: 0; padding: 0; }
.reg-offers-legend {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--nb-text, #e6e9ef); margin-bottom: 8px; padding: 0;
}

.reg-offer {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  background: rgba(255,255,255,.04);
  transition: border-color .15s ease, background .15s ease;
}
.reg-offer:hover { border-color: rgba(255,255,255,.3); }
.reg-offer:focus-within { outline: 2px solid #8B5CFF; outline-offset: 2px; }
.reg-offer:has(input:checked) {
  border-color: #8B5CFF; background: rgba(139,92,255,.12);
}
/* Fallback for engines without :has() — JS is not required for correctness here,
   the radio itself still carries the state. */
.reg-offer input[type="radio"] {
  margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: #8B5CFF;
}
.reg-offer-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reg-offer-title { font-weight: 650; font-size: 14px; line-height: 1.3; }
.reg-offer-reward { font-size: 13px; color: #48E5C2; font-weight: 600; }
.reg-offer-meta { font-size: 12px; opacity: .68; }
.reg-offer-terms { font-size: 12px; opacity: .8; margin-top: 4px; line-height: 1.45; }
.reg-offer-more {
  align-self: flex-start; margin-top: 4px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: #8B5CFF; text-decoration: underline;
}

/* Post-registration reward banner */
.reg-reward {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 9000; max-width: min(92vw, 460px);
  border-radius: 14px; padding: 14px 16px;
  background: #171a21; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 40px rgba(0,0,0,.45); color: #e6e9ef;
}
.reg-reward.ready   { border-color: #48E5C2; }
.reg-reward.pending { border-color: #ffb020; }
.reg-reward.failed  { border-color: #ff5d5d; }
.reg-reward-inner { display: flex; flex-direction: column; gap: 8px; }
.reg-reward-title { font-size: 14px; line-height: 1.4; }
.reg-reward-game  { font-size: 12.5px; opacity: .75; }
.reg-reward-actions { display: flex; gap: 8px; margin-top: 2px; }

@media (max-width: 560px) {
  .reg-offer { padding: 10px 11px; }
  .reg-offer-title { font-size: 13.5px; }
  .reg-reward { left: 12px; right: 12px; transform: none; max-width: none; }
}