/* ═══ PREMIUM AUTH SCREEN ═══ */
#authScreen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:16px;background:var(--bg)!important;position:relative;overflow:hidden;
}
/* Animated background glows */
#authScreen::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%,rgba(124,111,255,.22),transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 100%,rgba(100,80,220,.14),transparent 55%),
    radial-gradient(ellipse 45% 40% at 5% 80%,rgba(74,222,128,.06),transparent 50%);
  pointer-events:none;z-index:0;
  animation:authBgPulse 8s ease-in-out infinite alternate;
}
@keyframes authBgPulse{
  from{opacity:.8}to{opacity:1}
}
/* Floating skull particles */
#authScreen::after{
  content:'💀';position:absolute;top:12%;right:8%;font-size:1.1rem;
  opacity:.06;animation:authFloat 6s ease-in-out infinite;pointer-events:none;z-index:0;
}
@keyframes authFloat{
  0%,100%{transform:translateY(0) rotate(-10deg)}
  50%{transform:translateY(-14px) rotate(10deg)}
}

/* ── Auth Box ── */
.auth-box{
  background:rgba(14,10,30,.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(124,111,255,.28);
  border-radius:28px;
  padding:32px 24px 26px;
  width:100%;max-width:400px;
  box-shadow:
    0 40px 100px rgba(0,0,0,.7),
    0 0 0 1px rgba(124,111,255,.12) inset,
    0 0 60px rgba(124,111,255,.08) inset;
  position:relative;z-index:1;
  animation:authBoxIn .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes authBoxIn{
  from{opacity:0;transform:translateY(22px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ── Logo / Hero ── */
.auth-logo{text-align:center;margin-bottom:24px}
.auth-logo-img-wrap{
  width:88px;height:88px;margin:0 auto 14px;
  border-radius:22px;overflow:hidden;
  border:2px solid rgba(124,111,255,.45);
  box-shadow:
    0 0 0 4px rgba(124,111,255,.1),
    0 0 32px rgba(124,111,255,.4),
    0 0 64px rgba(124,111,255,.18);
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(124,111,255,.1),0 0 32px rgba(124,111,255,.4),0 0 64px rgba(124,111,255,.18)}
  50%{box-shadow:0 0 0 6px rgba(124,111,255,.18),0 0 40px rgba(124,111,255,.55),0 0 80px rgba(124,111,255,.25)}
}
.auth-logo-img-wrap img{width:100%;height:100%;object-fit:cover}
.auth-logo h1{
  font-size:1.65rem;font-weight:900;letter-spacing:3px;
  font-family:'Rajdhani',sans-serif;
  background:linear-gradient(135deg,#c4b8ff,#7c6fff,#5eead4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin:0 0 6px;
}
.auth-tagline{
  color:rgba(255,255,255,.38);
  font-size:.75rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;
  margin:0;
}

/* ── Google CTA (PRIMARY) ── */
.auth-google-cta{
  width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  padding:15px 18px;
  background:linear-gradient(135deg,rgba(66,133,244,.18),rgba(66,133,244,.08));
  border:1.5px solid rgba(66,133,244,.45);
  border-radius:16px;
  color:#fff;font-size:.95rem;font-weight:800;
  cursor:pointer;
  transition:all .28s cubic-bezier(.4,0,.2,1);
  letter-spacing:.4px;
  box-shadow:0 4px 20px rgba(66,133,244,.2),0 0 0 0 rgba(66,133,244,.3);
  position:relative;overflow:hidden;
  font-family:'Rajdhani',sans-serif;
  margin-bottom:4px;
}
.auth-google-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(66,133,244,.15),transparent);
  opacity:0;transition:opacity .25s;
}
.auth-google-cta:hover::before{opacity:1}
.auth-google-cta:active{transform:scale(.97);box-shadow:0 2px 10px rgba(66,133,244,.3)}
.auth-google-cta svg{flex-shrink:0;width:20px;height:20px}
.auth-google-cta-label{display:flex;flex-direction:column;line-height:1.1}
.auth-google-cta-label span:first-child{font-size:1rem;font-weight:900}
.auth-google-cta-label span:last-child{font-size:.6rem;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:1px;text-transform:uppercase;font-family:sans-serif}

/* ── Divider ── */
.auth-or-divider{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 16px;
  font-size:.66rem;color:rgba(255,255,255,.22);letter-spacing:2.5px;font-weight:700;
}
.auth-or-divider::before,.auth-or-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,111,255,.2),transparent);
}

/* ── Tab switcher ── */
.atabs{
  display:flex;gap:5px;margin-bottom:16px;
  background:rgba(255,255,255,.03);border-radius:13px;padding:4px;
  border:1px solid rgba(255,255,255,.06);
}
.atab{
  flex:1;padding:8px;border:none;background:transparent;
  color:rgba(255,255,255,.35);border-radius:9px;cursor:pointer;
  font-weight:700;font-size:.8rem;transition:all .22s;letter-spacing:.3px;
}
.atab.active{
  background:linear-gradient(135deg,rgba(124,111,255,.35),rgba(90,77,224,.3));
  color:#c4b8ff;
  box-shadow:0 2px 12px rgba(124,111,255,.25);
  border:1px solid rgba(124,111,255,.3);
}

/* ── Form groups ── */
.fg{margin-bottom:12px}
.fg label{
  display:block;font-size:.62rem;color:rgba(255,255,255,.38);
  margin-bottom:6px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
}
.fg input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(124,111,255,.18);
  border-radius:14px;
  padding:13px 16px;
  color:var(--text);font-size:.88rem;
  outline:none;transition:all .25s;
  -webkit-appearance:none;
  box-sizing:border-box;
}
.fg input::placeholder{color:rgba(255,255,255,.2)}
.fg input:focus{
  border-color:rgba(124,111,255,.55);
  background:rgba(124,111,255,.07);
  box-shadow:0 0 0 3px rgba(124,111,255,.1);
}

/* ── Premium Login Button (SECONDARY) ── */
.auth-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,rgba(124,111,255,.2),rgba(90,77,224,.15));
  border:1.5px solid rgba(124,111,255,.35);
  border-radius:14px;color:#c4b8ff;
  font-weight:800;font-size:.92rem;
  cursor:pointer;margin-top:4px;
  transition:all .25s;letter-spacing:.5px;
  font-family:'Rajdhani',sans-serif;
  box-sizing:border-box;
}
.auth-btn:hover{background:linear-gradient(135deg,rgba(124,111,255,.3),rgba(90,77,224,.25));box-shadow:0 4px 16px rgba(124,111,255,.25)}
.auth-btn:active{opacity:.85;transform:scale(.98)}

/* ── Auth Links ── */
.auth-links{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:14px;
}
.auth-link{
  background:none;border:none;
  color:rgba(255,255,255,.3);font-size:.68rem;
  cursor:pointer;padding:4px 2px;
  transition:color .2s;font-weight:600;letter-spacing:.3px;
  text-decoration:none;display:inline-block;
}
.auth-link:hover{color:rgba(196,184,255,.7)}
.auth-link-dot{color:rgba(255,255,255,.12);font-size:.5rem}
.auth-tip{font-size:.65rem;color:rgba(255,255,255,.2);text-align:center;margin-top:10px;letter-spacing:.4px}

/* ═══ LAYOUT ═══ */
.hidden{display:none!important}
#mainApp{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;position:relative}

/* HEADER */
.app-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);gap:6px}
.hdr-l{display:flex;align-items:center;gap:7px;flex-shrink:0}
.hdr-r{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:flex-end;min-width:0;overflow:hidden}
.hdr-skull{font-size:1.3rem}
.hdr-title{font-size:.95rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hdr-r{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.hdr-user{font-size:.72rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:3px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-rank{background:rgba(124,111,255,.15);border:1px solid rgba(124,111,255,.3);color:#a99fff;font-size:.68rem;font-weight:700;padding:3px 7px;border-radius:7px;white-space:nowrap}
.hdr-logout{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.2);color:#ff8a8a;font-size:.65rem;padding:4px 8px;border-radius:7px;cursor:pointer;white-space:nowrap}
/* PAGES */
.pages{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;height:0;scroll-behavior:smooth}
.page{padding:14px;animation:pgFade .22s cubic-bezier(.4,0,.2,1) both;will-change:opacity,transform}
@keyframes pgFade{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.page-hdr{font-size:1.1rem;font-weight:800;margin-bottom:14px}
.sec-title{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}

/* BOTTOM NAV */