/* ═══════════════════════════════════════════════════════════════
   JweLa — login.css
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0d0d0f;
  --surface:  #141417;
  --surface2: #1c1c21;
  --border:   rgba(255,255,255,0.07);
  --gold:     #c9a84c;
  --gold2:    #e8c97a;
  --green:    #2ecc71;
  --red:      #e74c3c;
  --text:     #f0ead8;
  --dim:      rgba(255,255,255,0.35);
  --mono:     'DM Mono', monospace;
  --display:  'Playfair Display', serif;
  --body:     'Crimson Pro', serif;
}

html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--body); }

/* ── Canvas particles ── */
#particles-canvas { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* ── Stadium background ── */
.bg-stadium {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(20,50,20,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(255,240,180,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(255,240,180,0.04) 0%, transparent 50%),
    linear-gradient(160deg, #06060f 0%, #0c100c 50%, #080c08 100%);
}
.bg-overlay {
  position: fixed; inset: 0; z-index: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════════════════════ */
.auth-layout {
  position: relative; z-index: 1;
  display: flex; height: 100vh; overflow: hidden;
}

/* ── Brand panel (left, desktop only) ── */
.brand-panel {
  flex: 0 0 420px;
  background: linear-gradient(160deg, #0e1a0e 0%, #0a100a 100%);
  border-right: 1px solid rgba(201,168,76,0.12);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

/* Subtle grid pattern */
.brand-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.brand-inner { position: relative; z-index: 1; max-width: 320px; width: 100%; }

.brand-logo {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 3rem;
}
.brand-ball { font-size: 2.8rem; filter: drop-shadow(0 0 16px rgba(201,168,76,0.5)); }
.brand-name {
  font-family: 'Bebas Neue', var(--display), serif;
  font-size: 2rem; letter-spacing: 0.18em;
  color: var(--gold2);
  line-height: 1;
  text-shadow: 0 0 30px rgba(201,168,76,0.3);
}
.brand-tag {
  font-family: var(--mono);
  font-size: 0.55rem; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.25);
  margin-top: 3px;
}

.brand-features { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
.bf-item {
  display: flex; align-items: flex-start; gap: 1rem;
  opacity: 0.82;
}
.bf-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.bf-item strong {
  display: block; font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--gold2); margin-bottom: 2px;
}
.bf-item p { font-size: 0.82rem; color: var(--dim); line-height: 1.4; }

.brand-footer { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.18); }

/* ── Auth panel (right) ── */
.auth-panel {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}

/* ── Card ── */
.auth-card {
  width: 100%; max-width: 440px;
  background: rgba(20,20,23,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 2.2rem 2.4rem;
  backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.06),
    0 32px 64px rgba(0,0,0,0.6),
    0 0 80px rgba(201,168,76,0.04);
}

/* Mobile logo */
.mobile-logo {
  display: none;
  align-items: center; gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}
.mobile-logo-name {
  font-family: 'Bebas Neue', var(--display), serif;
  font-size: 1.4rem; letter-spacing: 0.15em;
  color: var(--gold2);
}

/* ── Tabs ── */
.auth-tabs {
  position: relative;
  display: flex;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 1.8rem;
}
.auth-tab {
  flex: 1; padding: 0.5rem;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.1em; color: var(--dim);
  border-radius: 8px; transition: color 0.2s;
  position: relative; z-index: 2;
}
.auth-tab.active { color: var(--gold2); }
.auth-tab-line {
  position: absolute; top: 3px; bottom: 3px; left: 0;
  width: 50%;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  transition: left 0.25s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 1;
}

/* ── Step titles ── */
.step-title {
  font-family: var(--display);
  font-size: 1.4rem; font-weight: 700;
  color: var(--text); margin-bottom: 0.3rem;
}
.step-sub { font-size: 0.85rem; color: var(--dim); margin-bottom: 1.6rem; line-height: 1.5; }
.step-sub strong { color: var(--gold2); }

/* ── Auth step animation ── */
.auth-step { display: none; }
.auth-step.active {
  display: block;
  animation: stepIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes stepIn {
  from { opacity:0; transform: translateX(18px); }
  to   { opacity:1; transform: translateX(0); }
}

/* ── Back button ── */
.back-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.1em; color: var(--dim);
  margin-bottom: 1rem; padding: 0;
  transition: color 0.15s;
}
.back-btn:hover { color: var(--gold2); }

/* ── Field rows ── */
.field-row { display: flex; gap: 0.8rem; }
.field-row .field-group { flex: 1; }

.field-group { margin-bottom: 1rem; }
.field-label {
  display: block; font-family: var(--mono);
  font-size: 0.52rem; letter-spacing: 0.12em;
  color: var(--dim); margin-bottom: 0.35rem;
}
.field-wrap {
  position: relative; display: flex; align-items: center;
}
.field-icon {
  position: absolute; left: 0.75rem;
  font-size: 0.8rem; pointer-events: none; z-index: 1;
}
.field-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 0.65rem 2.5rem 0.65rem 2.4rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-icon + .field-input { padding-left: 2.6rem; }
.field-input::placeholder { color: rgba(255,255,255,0.18); }
.field-input:focus {
  border-color: rgba(201,168,76,0.5);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
}
.field-eye {
  position: absolute; right: 0.75rem;
  background: none; border: none; cursor: pointer;
  font-size: 0.9rem; color: var(--dim);
  padding: 0; line-height: 1;
}

/* ── Password strength ── */
.pw-strength { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.pw-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.pw-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }
.pw-label { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; min-width: 42px; }

/* ── Remember / forgot row ── */
.remember-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem; gap: 0.5rem;
}
.checkbox-label {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-size: 0.8rem; color: var(--dim); user-select: none;
}
.checkbox-label input[type="checkbox"] { display: none; }
.checkbox-box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
}
.checkbox-label input:checked + .checkbox-box {
  background: rgba(201,168,76,0.2);
  border-color: var(--gold);
}
.checkbox-label input:checked + .checkbox-box::after {
  content: '✓'; font-size: 0.6rem; color: var(--gold2);
}

.link-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.06em; color: var(--gold);
  padding: 0; text-decoration: none;
  transition: color 0.15s;
}
.link-btn:hover { color: var(--gold2); }
.link-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Error box ── */
.error-box {
  display: none;
  background: rgba(231,76,60,0.1);
  border: 1px solid rgba(231,76,60,0.3);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.05em;
  color: #e74c3c;
  margin-bottom: 1rem;
}
.error-box.vis { display: block; animation: shake 0.4s ease; }
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

/* ── Auth button ── */
.auth-btn {
  width: 100%; padding: 0.78rem;
  border: none; border-radius: 10px;
  cursor: pointer; font-family: 'Bebas Neue', var(--display), serif;
  font-size: 0.9rem; letter-spacing: 0.12em;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: all 0.2s; margin-bottom: 0.6rem;
  position: relative;
}
.auth-btn.gold {
  background: linear-gradient(135deg, #c9a84c 0%, #e8c97a 50%, #c9a84c 100%);
  background-size: 200% 100%;
  color: #0d0d0f;
  box-shadow: 0 4px 20px rgba(201,168,76,0.3);
}
.auth-btn.gold:hover:not(:disabled) {
  background-position: right center;
  box-shadow: 0 4px 28px rgba(201,168,76,0.5);
  transform: translateY(-1px);
}
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.spinner {
  display: none; width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: #0d0d0f;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.terms-note { font-size: 0.72rem; color: var(--dim); text-align: center; line-height: 1.6; }
.terms-note a { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════
   OTP INPUT
════════════════════════════════════════════════════════════════ */
.otp-wrap {
  display: flex; gap: 0.5rem; justify-content: center;
  margin: 1.2rem 0;
}
.otp-box {
  width: 48px; height: 56px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 10px; text-align: center;
  font-family: var(--mono); font-size: 1.4rem; font-weight: 700;
  color: var(--text); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  caret-color: transparent;
}
.otp-box:focus {
  border-color: rgba(201,168,76,0.6);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
  transform: scale(1.04);
}
.otp-box.filled {
  border-color: rgba(201,168,76,0.4);
  background: rgba(201,168,76,0.08);
  color: var(--gold2);
}
.otp-box.error {
  border-color: rgba(231,76,60,0.7);
  background: rgba(231,76,60,0.08);
  animation: shake 0.4s ease;
}

/* ── Resend row ── */
.resend-row {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: 0.8rem;
}
.resend-label { font-size: 0.78rem; color: var(--dim); }
.resend-timer { font-family: var(--mono); font-size: 0.6rem; color: var(--dim); }

/* ════════════════════════════════════════════════════════════════
   SUCCESS SCREEN
════════════════════════════════════════════════════════════════ */
.success-screen {
  text-align: center; padding: 1.5rem 0;
  animation: stepIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.success-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.success-screen h2 {
  font-family: var(--display); font-size: 1.5rem;
  color: var(--gold2); margin-bottom: 0.5rem;
}
.success-screen p { font-size: 0.88rem; color: var(--dim); margin-bottom: 0.5rem; }
.balance-note {
  font-family: var(--mono); font-size: 0.62rem;
  color: var(--gold); letter-spacing: 0.06em;
  padding: 0.5rem 0.8rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px; margin: 0.8rem 0;
}
.redirect-bar {
  height: 3px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden; margin-top: 1.5rem;
}
.redirect-fill {
  height: 100%; width: 0; background: var(--gold);
  border-radius: 2px;
  animation: redirectFill 2s linear forwards;
}
@keyframes redirectFill { from{width:0} to{width:100%} }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .brand-panel { display: none; }
  .mobile-logo { display: flex; }
  .auth-layout { align-items: flex-start; }
  .auth-panel  {
    align-items: flex-start;
    padding: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .auth-card   { padding: 1.6rem; border-radius: 16px; margin-top: 1rem; }
  .otp-box     { width: 42px; height: 50px; font-size: 1.2rem; }

  /* 16px stops iOS Safari from auto-zooming on focus */
  .field-input { font-size: 16px; }

  /* Legibility floor for micro-labels */
  .field-label, .age-check-text, .error-box, .link-btn,
  .back-btn, .pw-label, .resend-timer { font-size: 11px; }

  /* Touch targets */
  .auth-tab { padding: 0.7rem 0.5rem; }
  .auth-btn { min-height: 46px; }
  .field-eye { padding: 0.5rem; right: 0.4rem; }
  .back-btn, .link-btn { padding: 0.4rem 0; }
}
@media (max-width: 400px) {
  .field-row { flex-direction: column; gap: 0; }
  .otp-box   { width: 38px; height: 46px; gap: 0.3rem; }
  .otp-wrap  { gap: 0.3rem; }
}

/* ── Age declaration checkbox ── */
.age-check-wrap {
  display: flex; align-items: flex-start; gap: 0.65rem;
  cursor: pointer; margin: 0.6rem 0 0.4rem;
  user-select: none;
}
.age-check-wrap input[type="checkbox"] { display: none; }
.age-check-box {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  border: 2px solid rgba(201,168,76,0.4); border-radius: 4px;
  background: rgba(201,168,76,0.05);
  transition: all 0.15s; position: relative;
}
.age-check-wrap input:checked + .age-check-box {
  background: #c9a84c; border-color: #c9a84c;
}
.age-check-wrap input:checked + .age-check-box::after {
  content: '✓'; position: absolute; top: -2px; left: 2px;
  color: #000; font-size: 0.7rem; font-weight: 900;
}
.age-check-text {
  font-family: var(--mono, monospace); font-size: 0.52rem;
  color: rgba(255,255,255,0.45); line-height: 1.6; letter-spacing: 0.04em;
}
.age-check-text strong { color: rgba(255,255,255,0.7); }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}