/* TokenLordsRPG — AAA Dark Fantasy Login */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@400;500;600;700;800&display=swap');

:root {
  --bg-deep: #000000;
  --gold: #c8963e;
  --gold-light: #d4a853;
  --orange: #b8860b;
  --text: #f1f5f9;
  --text-muted: rgba(241,245,249,0.35);
  --border: rgba(255,255,255,0.05);
  --grad-gold: linear-gradient(135deg, #d4a853 0%, #b8860b 50%, #8b6914 100%);
  --card-bg: rgba(12,14,20,0.25);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg-deep);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden}

.login-app-page{position:relative;min-height:100vh;overflow:hidden}

/* Nav */
.login-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 2.5rem;background:linear-gradient(180deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 100%)}
.login-nav__logo{height:30px;width:auto;filter:drop-shadow(0 0 6px rgba(200,150,62,0.25))}
.login-nav__center{display:flex;align-items:center;gap:2rem}
.login-nav__link{color:rgba(241,245,249,0.4);text-decoration:none;font-size:0.66rem;font-weight:600;letter-spacing:0.1em;transition:color 0.3s}
.login-nav__link:hover{color:var(--gold)}
.login-nav__right{display:flex;align-items:center;gap:1.2rem}
.login-nav__lang{color:rgba(241,245,249,0.3);font-size:0.66rem;font-weight:600;cursor:pointer}
.login-nav__cta{display:inline-flex;align-items:center;padding:0.4rem 1.3rem;background:var(--grad-gold);color:#0a0800;font-weight:700;font-size:0.72rem;text-decoration:none;border-radius:4px;letter-spacing:0.05em;box-shadow:0 3px 15px rgba(184,134,11,0.25);transition:all 0.3s}
.login-nav__cta:hover{transform:translateY(-1px);box-shadow:0 5px 22px rgba(184,134,11,0.4)}

/* Layout */
.login-layout{position:relative;z-index:10;display:grid;grid-template-columns:1fr minmax(380px, 35vw);min-height:100vh;align-items:end;padding:clamp(3rem, 6vh, 5rem) clamp(1rem, 3vw, 4rem) clamp(1rem, 2vh, 2rem);gap:clamp(1rem, 2vw, 3rem);background:transparent}
.login-layout__left{display:flex;align-items:flex-end;background:transparent}
.login-layout__right{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:transparent}

/* Hero */
.login-hero{padding-left:0.5rem;padding-bottom:0.25rem}
.login-hero__title{font-family:'Orbitron',sans-serif;font-size:clamp(1.1rem,2.5vw,3rem);font-weight:800;line-height:1.25;color:var(--text);text-shadow:0 0 25px rgba(200,150,62,0.12);margin-bottom:0.8rem}
.login-hero__gold{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.25em}
.login-hero__desc{font-size:clamp(0.65rem,0.9vw,0.95rem);color:var(--text-muted);max-width:clamp(280px,28vw,500px);line-height:1.7;margin-bottom:1rem}
.login-hero__trailer{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 1.1rem;background:transparent;border:1px solid rgba(200,150,62,0.3);border-radius:6px;color:var(--gold);font-size:clamp(0.6rem,0.75vw,0.75rem);font-weight:600;cursor:pointer;transition:all 0.3s;font-family:'Inter',sans-serif;letter-spacing:0.04em;text-decoration:none}
.login-hero__trailer:hover{background:rgba(200,150,62,0.06);border-color:var(--gold)}

.login-features{display:flex;gap:1.4rem;margin-top:1.5rem;flex-wrap:wrap}
.login-features__item{display:flex;align-items:center;gap:0.5rem;color:rgba(241,245,249,0.3)}
.login-features__item svg{flex-shrink:0;opacity:0.5}
.login-features__label{font-size:0.66rem;font-weight:500;letter-spacing:0.02em}

/* ── Auth Card — smoky frosted glass over video ── */
.auth-card{
  width:100%;max-width:clamp(380px, 30vw, 520px);
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(255,255,255,0.025);
  border-radius:18px;
  backdrop-filter:blur(32px) brightness(0.96);
  -webkit-backdrop-filter:blur(32px) brightness(0.96);
  box-shadow:0 25px 60px rgba(0,0,0,0.35),0 0 30px rgba(200,150,62,0.03);
  overflow:hidden;
  will-change:transform;
  transform:translateZ(0);
  contain:content;
}

/* ── Tabs — centered, icons, divider line ── */
.auth-tabs{
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:1.6rem 1.8rem 0;border-bottom:1px solid rgba(255,255,255,0.03);
}
.auth-tabs .tab{
  display:flex;align-items:center;gap:0.45rem;
  padding:0 1.2rem 0.7rem;background:transparent;border:none;
  color:rgba(241,245,249,0.25);font-weight:500;font-size:0.76rem;cursor:pointer;
  transition:color 0.3s;font-family:'Inter',sans-serif;letter-spacing:0.04em;
  position:relative;
}
.auth-tabs .tab::after{
  content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:1.5px;
  background:transparent;transition:background 0.3s;border-radius:1px;
}
.auth-tabs .tab.active{color:rgba(241,245,249,0.85)}
.auth-tabs .tab.active::after{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tab-divider{width:1px;height:20px;background:rgba(255,255,255,0.04);flex-shrink:0}

.auth-card__inner{padding:1.8rem 2rem 0}

.auth-card__header{text-align:center;margin-bottom:1.4rem}
.auth-card__crown{display:block;margin:0 auto 0.3rem;color:var(--gold);opacity:0.6;width:22px;height:22px}
.auth-card__title{font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:0.08rem}
.auth-card__subtitle{font-size:0.7rem;color:var(--text-muted)}

/* Inputs — with icons, thinner */
.input-group{margin-bottom:0.8rem}
.input-icon-wrap{position:relative}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:rgba(241,245,249,0.2);pointer-events:none;transition:color 0.3s;z-index:1}
.input-icon-wrap input{
  width:100%;padding:0.65rem 1rem 0.65rem 2.6rem;
  background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.04);border-radius:8px;
  color:var(--text);font-size:0.8rem;transition:all 0.3s;font-family:'Inter',sans-serif;
}
.input-icon-wrap input::placeholder{color:rgba(255,255,255,0.18)}
.input-icon-wrap input:focus{outline:none;border-color:rgba(200,150,62,0.2);box-shadow:0 0 0 2px rgba(200,150,62,0.04);background:rgba(255,255,255,0.025)}
.input-group input:not(.input-icon-wrap input){padding:0.65rem 1rem}

/* Remember me */
.login-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;font-size:0.7rem}
.remember-me{display:flex;align-items:center;gap:0.45rem;color:var(--text-muted);cursor:pointer}
.remember-me__check{position:relative;width:16px;height:16px;flex-shrink:0}
.remember-me__check input{position:absolute;opacity:0;cursor:pointer;width:100%;height:100%}
.remember-me__check svg{position:absolute;inset:0;width:100%;height:100%;border:1px solid rgba(255,255,255,0.1);border-radius:3px;padding:1px;transition:all 0.2s;color:transparent}
.remember-me__check input:checked+svg{background:var(--gold);border-color:var(--gold);color:#0a0800}
.login-options a{color:var(--gold);text-decoration:none;font-size:0.7rem;transition:opacity 0.3s}
.login-options a:hover{opacity:0.7}

/* Button — metallic gold gradient */
.btn-primary{
  display:flex;align-items:center;justify-content:center;gap:0.45rem;
  width:100%;padding:0.7rem;background:var(--grad-gold);color:#0a0800;
  font-weight:600;font-size:0.84rem;border:none;border-radius:8px;cursor:pointer;
  transition:all 0.3s;font-family:'Inter',sans-serif;letter-spacing:0.02em;
  box-shadow:0 4px 18px rgba(184,134,11,0.2);
  position:relative;overflow:hidden;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(184,134,11,0.3)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.btn-icon{width:16px;height:16px;transition:transform 0.3s}
.btn-primary:hover .btn-icon{transform:translateX(2px)}
.btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);animation:shine 4s infinite}
@keyframes shine{0%{left:-100%}50%,100%{left:100%}}

/* OAuth divider */
.oauth-divider{display:flex;align-items:center;gap:1rem;margin:0.8rem 0 0.7rem}
.oauth-divider::before,.oauth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.04)}
.oauth-divider span{font-size:0.62rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em}

/* Social — small glass squares */
.oauth-buttons{display:flex;justify-content:center;gap:0.55rem}
.btn-oauth{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;
  color:rgba(241,245,249,0.4);cursor:pointer;transition:all 0.3s;
}
.btn-oauth:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:var(--text)}
.btn-oauth:disabled{opacity:0.25;cursor:not-allowed;pointer-events:none;filter:grayscale(0.5)}
.btn-oauth--metamask{border-color:rgba(200,150,62,0.2);color:var(--gold)}
.btn-oauth--metamask:hover{background:rgba(200,150,62,0.08);border-color:var(--gold)}

/* Card footer */
.auth-card__footer{display:flex;justify-content:center;align-items:center;gap:0.25rem;padding:0.7rem;border-top:1px solid rgba(255,255,255,0.04);margin-top:0.2rem;font-size:0.7rem;color:var(--text-muted)}
.auth-card__footer a{color:var(--gold);text-decoration:none;font-weight:500;transition:opacity 0.3s}
.auth-card__footer a:hover{opacity:0.7}

/* Messages */
.error{padding:0.6rem;background:rgba(239,68,68,0.04);border:1px solid rgba(239,68,68,0.12);border-radius:6px;color:#ef4444;font-size:0.72rem;margin-top:0.5rem;text-align:center}
.error:empty{display:none}
.success-message{padding:0.6rem;background:rgba(16,185,129,0.04);border:1px solid rgba(16,185,129,0.12);border-radius:6px;color:#10b981;font-size:0.72rem;margin-top:0.5rem;text-align:center}
.success-message:empty{display:none}
.terms-hint{font-size:0.66rem;color:var(--text-muted);text-align:center;margin-top:0.4rem}
.terms-hint a{color:var(--gold);text-decoration:none}

.scanlines{position:fixed;inset:0;pointer-events:none;z-index:1000;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.01) 2px,rgba(0,0,0,0.01) 4px);opacity:0.25}

/* ── Mobile Hero — compact branding for small screens ── */
.login-hero-mobile{display:none;text-align:center;position:relative;z-index:5;margin-bottom:1.2rem}
.login-hero-mobile__title{font-family:'Orbitron',sans-serif;font-size:clamp(1rem, 5vw, 1.6rem);font-weight:800;line-height:1.2;color:var(--text);text-shadow:0 0 20px rgba(200,150,62,0.12);margin-bottom:0.3rem}
.login-hero-mobile__gold{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-hero-mobile__desc{font-size:0.7rem;color:var(--text-muted);max-width:280px;margin:0 auto;line-height:1.5}

/* Responsive */
@media(max-width:1024px){
  .auth-card{will-change:auto;contain:none}
  .login-layout{display:flex;flex-direction:column;align-items:center;padding:clamp(2.5rem, 6vh, 4rem) 1rem 2rem;gap:0}
  .login-layout__left{display:none}
  .login-layout__right{max-width:100%;margin:0 auto;width:100%;align-items:center}
  .login-hero-mobile{display:block}
  .login-3d-token-wrapper{position:relative !important;left:auto !important;bottom:auto !important;top:auto !important;transform:none !important;width:clamp(200px, 50vmin, 340px) !important;height:clamp(200px, 50vmin, 340px) !important;margin:0 auto 0.5rem !important;z-index:15 !important}
  .login-layout{z-index:10}
  .login-nav__center{display:none}
  .login-nav{padding:0.9rem 1.2rem}
  .auth-card__inner{padding:1.2rem 1.25rem 0}
  /* Prevent mobile-global.css from overriding icon-wrapped input padding */
  .input-icon-wrap input[type="email"],
  .input-icon-wrap input[type="password"] {
    padding-left: 2.8rem !important;
  }
}
@media(max-width:640px){
  .login-nav__logo{height:24px}
  .login-nav{padding:0.7rem 0.9rem}
  .login-nav__cta{padding:0.35rem 0.9rem;font-size:0.65rem}
  .login-hero-mobile{margin-bottom:0.8rem}
  .auth-card{border-radius:14px}
  .auth-tabs{padding:1.2rem 1rem 0}
  .auth-card__inner{padding:1rem 1rem 0}
  .auth-card__title{font-size:0.95rem}
  .auth-card__subtitle{font-size:0.66rem}
  .input-icon{left:12px;width:15px;height:15px}
  .input-icon-wrap input{font-size:0.85rem;padding:0.7rem 0.9rem 0.7rem 2.5rem}
  .input-icon-wrap input[type="email"],
  .input-icon-wrap input[type="password"] {
    padding-left: 2.7rem !important;
  }
  .btn-primary{font-size:0.8rem;padding:0.72rem}
  .auth-tabs .tab{font-size:0.72rem;padding:0 0.8rem 0.55rem}
  .login-features{gap:0.6rem}
  .login-features__label{font-size:0.6rem}
  .oauth-buttons{gap:0.5rem}
  .btn-oauth{width:34px;height:34px}
}
@media(max-width:480px){.login-features{gap:0.5rem}}
@media(max-width:380px){
  .auth-card{max-width:100%;border-radius:10px}
  .auth-tabs{padding:1rem 0.6rem 0}
  .auth-card__inner{padding:0.8rem 0.75rem 0}
  .login-hero-mobile{margin-bottom:0.5rem}
  .login-hero-mobile__title{font-size:0.95rem}
  .login-hero-mobile__desc{font-size:0.65rem;max-width:240px}
  .input-icon{left:10px;width:14px;height:14px}
  .input-icon-wrap input{font-size:0.82rem;padding:0.65rem 0.7rem 0.65rem 2.2rem}
  .input-icon-wrap input[type="email"],
  .input-icon-wrap input[type="password"] {
    padding-left: 2.4rem !important;
  }
  .auth-tabs .tab{padding:0 0.5rem 0.5rem;font-size:0.68rem}
  .btn-primary{font-size:0.76rem;padding:0.65rem}
}

@media(prefers-reduced-motion:reduce){.btn-shine{animation:none}.scanlines{opacity:0.06}}

/* ── Custom Scrollbar — gold accent on black ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.6)}
::-webkit-scrollbar-thumb{background:rgba(200,150,62,0.25);border-radius:3px;transition:background 0.3s}
::-webkit-scrollbar-thumb:hover{background:rgba(200,150,62,0.45)}
::-webkit-scrollbar-corner{background:transparent}
html{scrollbar-width:thin;scrollbar-color:rgba(200,150,62,0.25) rgba(0,0,0,0.6)}