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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #06061a;
  display: flex;
  width: 100%; height: 100dvh;
}

/* ── LEFT — Poster image ── */
.poster {
  flex: 0 0 48%;
  position: relative;
  overflow: hidden;
  height: 100dvh;
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}

/* Right-edge blend into dark panel */
.poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 52%,
    rgba(6, 6, 26, 0.65) 80%,
    #06061a 100%
  );
  pointer-events: none;
}

/* Bottom fade */
.poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 72%,
    rgba(6, 6, 26, 0.45) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── RIGHT — Auth panel ── */
.auth-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  position: relative;
  background: #06061a;
  height: 100dvh;
  overflow: hidden;
}

/* Portrait phones: the two-panel layout is landscape-shaped, so scaling
   it down to fit a narrow screen makes everything tiny. Instead just
   show the login/signup side at its natural, readable size. */
@media (orientation: portrait) {
  .poster { display: none; }
  .auth-side { flex: 1 1 100%; }
}

/* wrapper so tagline + card move together */
.auth-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin-top: clamp(-118px, calc(-14vh + 62px), -18px);
  position: relative;
  z-index: 1;
  overflow: visible;
  align-self: center;
}

/* Protaag logo — two masks intersected: left/right edges + bottom edge */
.logo-img {
  width: 100%;
  margin-left: 0;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  margin-bottom: 4px;
  -webkit-mask-image:
    linear-gradient(to right, black 0%, black 88%, transparent 100%),
    linear-gradient(to bottom, black 0%, black 78%, rgba(0,0,0,0.4) 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, black 0%, black 88%, transparent 100%),
    linear-gradient(to bottom, black 0%, black 78%, rgba(0,0,0,0.4) 90%, transparent 100%);
  mask-composite: intersect;
}

.tagline {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5c518;
  text-shadow: 0 0 24px rgba(245, 197, 24, 0.45), 0 2px 8px rgba(0,0,0,0.5);
  margin-bottom: 14px;
  margin-top: -15px;
  text-align: center;
}

.auth-side::before {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
  top: -40px; right: -40px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}
.auth-side::after {
  content: '';
  position: absolute;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(180, 120, 30, 0.1) 0%, transparent 70%);
  bottom: 20px; left: 10%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}

/* Glass card — fixed height so it never resizes between panels */
.glass-card {
  width: 100%;
  height: 535px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
}

/* Both panels fill the card; login centers its content vertically */
.form-panel { display: none; flex-direction: column; justify-content: center; flex: 1; }
.form-panel.active { display: flex; }

.form-panel h2 {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.form-subtitle {
  color: rgba(255, 255, 255, 0.32);
  font-size: 12px;
  margin-bottom: 14px;
  line-height: 1.4;
}

.field { margin-bottom: 10px; }

.field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field input:focus {
  border-color: rgba(139, 92, 246, 0.65);
  background: rgba(109, 40, 217, 0.09);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.14);
}
.field input::placeholder { color: rgba(255, 255, 255, 0.16); }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 12px;
}
.checkbox-row input[type="checkbox"] {
  width: 14px; height: 14px;
  margin-top: 1px;
  accent-color: #7c3aed;
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox-row label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  line-height: 1.5;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(109, 40, 217, 0.48);
}
.submit-btn:hover {
  opacity: 0.9;
  box-shadow: 0 6px 24px rgba(109, 40, 217, 0.62);
}
.submit-btn:active { transform: scale(0.99); }
.submit-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.submit-btn.success {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 4px 18px rgba(22,163,74,0.5);
  opacity: 1;
}

.msg {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 500;
  min-height: 14px;
  text-align: center;
}

.oauth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: -11px 0 12px;
  color: rgba(255,255,255,0.28);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.oauth-divider::before, .oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.oauth-buttons { display: flex; gap: 10px; }
.oauth-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  height: 42px;
  border-radius: 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s, border-color 0.2s;
}
.oauth-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.oauth-btn svg { width: 18px; height: 18px; }
.oauth-btn.apple svg { color: #fff; }
.oauth-btn.discord svg { color: #949cf7; }
.oauth-btn.facebook svg { color: #778bf0; }

.toggle-row {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
}
.toggle-row button {
  background: none;
  border: none;
  color: #a78bfa;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 3px;
  transition: color 0.2s;
}
.toggle-row button:hover { color: #c4b5fd; }

/* Forgot password modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: rgba(15,10,35,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  position: relative;
}
.modal h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.modal .modal-sub { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 22px; line-height: 1.5; }
.modal-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  color: rgba(255,255,255,0.3);
  font-size: 22px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: rgba(255,255,255,0.7); }

/* ── Age Verification Modal ── */
#age-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 300; align-items: center; justify-content: center;
}
#age-modal-overlay.open { display: flex; }
#verify-sent-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 300; align-items: center; justify-content: center;
}
#verify-sent-overlay.open { display: flex; }
.age-modal {
  background: rgba(12,8,30,0.98);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 22px; padding: 38px 30px 30px;
  width: 100%; max-width: 340px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(0,0,0,0.75);
  animation: ageIn .18s ease;
}
@keyframes ageIn { from { opacity:0; transform: scale(.93); } to { opacity:1; transform: scale(1); } }
.age-icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(251,191,36,.13); border: 2px solid rgba(251,191,36,.42);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-size: 26px; font-weight: 900; color: #fbbf24;
  font-family: Georgia, serif;
}
.age-modal-title {
  font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.age-modal-sub {
  font-size: 12.5px; color: rgba(255,255,255,.42); line-height: 1.6; margin-bottom: 26px;
}
.age-dob-row { display: flex; gap: 8px; margin-bottom: 18px; }
.age-dob-row select {
  flex: 1; min-width: 0; padding: 10px 6px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.05);
  color: #fff; font-size: 13px; font-family: inherit; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.age-dob-row select:focus {
  border-color: rgba(139,92,246,.65); background: rgba(109,40,217,.09);
  box-shadow: 0 0 0 3px rgba(109,40,217,.14);
}
/* The <select> itself inherits the app's dark theme fine, but browsers render its open
   <option> list as a native OS widget that ignores the select's own background -- without
   this, the options fall back to a plain white dropdown while still inheriting the page's
   white text color, making the selected month/day/year unreadable (white on white). Same
   fix already used for the profile Region dropdown (.pf-select option in home.css). */
.age-dob-row select option { background: #12121e; color: rgba(255,255,255,.85); }
.age-cert-row { text-align: left; margin: 0 0 16px; }
.age-cert-bold { font-weight: 700; color: rgba(255,255,255,.5); }
.age-submit-btn {
  width: 100%; padding: 12px; border-radius: 11px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; background: rgba(139,92,246,.22);
  border: 1px solid rgba(139,92,246,.4); color: #c4b5fd;
  transition: background .2s, border-color .2s, color .2s, transform .1s;
}
.age-submit-btn:active { transform: scale(.97); }
.age-submit-btn:hover  { background: rgba(139,92,246,.38); }
.age-submit-btn:disabled { opacity: .5; cursor: default; }
.age-submit-btn.go { background: rgba(139,92,246,.5); border-color: rgba(139,92,246,.8); color: #fff; }

/* ── Signup validation popup ── */
#validate-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 300; align-items: center; justify-content: center;
}
#validate-modal-overlay.open { display: flex; }
.validate-modal {
  background: rgba(12,8,30,0.98);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px; padding: 32px 28px 26px;
  width: 100%; max-width: 340px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(0,0,0,0.75);
  animation: ageIn .18s ease;
}
.validate-warn-icon {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(251,191,36,.12); border: 2px solid rgba(251,191,36,.38);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px; font-weight: 900; color: #fbbf24; font-family: Georgia, serif;
}
.validate-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.validate-list {
  list-style: none; text-align: left;
  display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px;
}
.validate-item {
  font-size: 12.5px; color: rgba(255,255,255,.62);
  display: flex; align-items: flex-start; gap: 9px; line-height: 1.45;
}
.validate-item::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #f87171; flex-shrink: 0; margin-top: 3px;
}
.validate-ok {
  width: 100%; padding: 11px; border-radius: 10px; border: none;
  background: rgba(139,92,246,.22); color: #c4b5fd;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.validate-ok:hover { background: rgba(139,92,246,.38); }

/* ── Under-age farewell screen ── */
#underage-screen {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 20px 10px; width: 100%; max-width: 400px;
}
#underage-screen.show { display: flex; }
.underage-icon { font-size: 52px; margin-bottom: 18px; }
.underage-title { font-size: 22px; font-weight: 800; color: #fbbf24; margin-bottom: 12px; }
.underage-body {
  font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.7; max-width: 300px;
}

/* Universal close-button visibility glow — see static/home.html for the
   matching rule. Vibrant red fill + inset glow, clipped entirely inside the
   button's own surface (never bleeds past its edges). */
.modal-close {
  background: rgba(239,68,68,.16) !important;
  box-shadow: inset 0 0 3px rgba(255,255,255,.35), inset 0 0 13px rgba(239,68,68,.92);
  color: #f87171 !important;
  padding: .28em .48em !important;
  border-radius: 50%;
  line-height: 1;
}
.modal-close:hover {
  background: rgba(239,68,68,.26) !important;
  color: #fff !important;
}


/* ── Converted from inline style="" attributes ── */
#signup-panel { position: relative; top: -10px; }
#signup-panel h2 { margin-bottom: 18px; }
#signup-panel h2 .signup-free { color: #facc15; font-weight: 800; }
.hp-offscreen { position: absolute; left: -9999px; top: -9999px; }
#login-panel .cf-turnstile { margin-top: 14px; }
/* 2026-08-11: signup's widget moved to be the 4th item in the oauth-buttons
   row (after Google/Discord/Facebook). Equal flex:1 with the icon buttons was
   tried first and rejected -- Turnstile's real content (checkbox + text) needs
   ~300px to render without clipping (confirmed directly: even giving it the
   FULL row's 252px still clips, a hard Cloudflare-side minimum, not a spacing
   choice), so an exact-size match to the 42px icon buttons was never
   achievable. Icon buttons pinned to a fixed 42px square instead (flex: 0 0
   42px, no longer sharing flex:1 among all 4 items); the widget takes flex:1
   -- all the row's remaining width (~96px on a 390px-wide phone) -- enough to
   show the actual checkbox, even though the trailing label text still clips.
   Confirmed acceptable as-is. Everything still stays within the row/card,
   nothing overflows off-screen. More specific than the old "#signup-panel
   .cf-turnstile { margin-top: 14px }" rule (3 ancestor parts vs. 2), so this
   wins regardless of source order without !important. */
#signup-panel .oauth-buttons .oauth-btn { flex: 0 0 42px; }
/* display:flex + align-items:center (2026-08-11, 2nd pass) -- a fixed
   margin-top: -5px on the child was a guess that undershot: Cloudflare's
   content measured 69px tall inside this 42px clip window, so -5px only hid
   5px off the top and left 22px hidden at the bottom, reading as
   low/off-center next to the perfectly-centered 42px icon buttons. Flexbox
   centering crops evenly from both edges automatically (~13.5px each here)
   regardless of the content's actual height, so it stays centered even if
   Cloudflare's rendered size shifts between states (checkbox vs. spinner vs.
   success) instead of relying on one measured magic number. */
#signup-panel .oauth-buttons .cf-turnstile {
  flex: 1;
  height: 42px;
  min-width: 0; /* allow it to shrink below Turnstile's natural content width if the row is tight, rather than forcing an overflow */
  margin: 0;
  display: flex;
  align-items: center;
}
/* 2026-08-10: `size: 'flexible'` (see index.js's turnstile.render() calls) is
   supposed to make Cloudflare's widget match its container's width on its own,
   and mostly does -- but a real device screenshot showed content still
   rendering wider than the container and spilling out past the card's right
   edge, even after capping `.cf-turnstile iframe` specifically with
   `max-width: 100% !important`. Turnstile appears to swap between different
   internal DOM shapes depending on state (the "Verifying..." spinner vs. the
   "Success!" checkmark may not both literally be an <iframe> at the point
   they're painted), so a selector aimed at one specific tag isn't reliable
   here. Switched to a real backstop instead of guessing at Cloudflare's DOM:
   clip the container itself, so nothing rendered inside it -- iframe, div,
   whatever shape it takes -- can ever visually extend past the card's edge,
   regardless of what element it turns out to be. */
.cf-turnstile {
  max-width: 100%;
  overflow: hidden;
  margin-left: -2px; /* was -4px, nudged another 2px right per follow-up request */
}
.cf-turnstile * { max-width: 100% !important; }
#signup-panel .toggle-row { margin-top: 10px; }
.forgot-pw-row { text-align: right; margin-top: 6px; }
.forgot-pw-btn { background: none; border: none; color: #a78bfa; font-size: 12px; cursor: pointer; padding: 0; letter-spacing: 0.01em; }
#login-btn { margin-top: 16px; }
#forgot-btn { margin-top: 18px; }
#age-oauth-name-field { display: none; }
.age-icon-success { background: rgba(167,139,250,.13); border-color: rgba(167,139,250,.42); color: #a78bfa; }
.inline-check-icon { vertical-align: middle; margin-right: 6px; }
.resend-link { color: #a78bfa; text-decoration: underline; }