/* 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.68);
  --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:var(--app-vh);overflow-x:hidden}

.login-app-page{position:relative;min-height:var(--app-vh);min-height:100svh;overflow-x:hidden;overflow-y:visible}

/* 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.65);font-size:0.66rem;font-weight:600}
.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:var(--app-vh);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}
.login-token-fallback{display:block;width:100%;height:100%;object-fit:contain}

/* ── 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;
  min-height:44px;text-decoration:none;
}
.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__inner--maintenance{padding-bottom:1.5rem}
.auth-card__maintenance-message{white-space:pre-wrap}
.auth-tabs__maintenance{display:flex;flex:1;align-items:center;justify-content:center;gap:0.45rem;cursor:default}

.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%;min-height:44px;padding:0.65rem 3.2rem 0.65rem 2.6rem;
  background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.16);border-radius:8px;
  color:var(--text);font-size:0.8rem;transition:border-color 0.3s,box-shadow 0.3s,background 0.3s;font-family:'Inter',sans-serif;
}
.input-icon-wrap input::placeholder{color:rgba(255,255,255,0.52)}
.input-icon-wrap input:focus-visible{outline:2px solid rgba(212,168,83,0.9);outline-offset:2px;border-color:rgba(212,168,83,0.65);box-shadow:0 0 0 3px rgba(200,150,62,0.14);background:rgba(255,255,255,0.06)}
.input-group input:not(.input-icon-wrap input){padding:0.65rem 1rem}

.login-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.password-toggle{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;min-width:48px;height:100%;padding:0 0.65rem;background:transparent;border:0;color:rgba(241,245,249,0.72);font:600 0.68rem 'Inter',sans-serif;cursor:pointer;border-radius:0 8px 8px 0}
.password-toggle:hover{color:var(--gold-light);background:rgba(255,255,255,0.04)}
.password-toggle:focus-visible{outline:2px solid var(--gold-light);outline-offset:-4px}

/* Remember me */
.login-options{display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-bottom:0.35rem;font-size:0.7rem}
.login-options__session{color:var(--text-muted)}
.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{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-light);text-decoration:none;font-size:0.7rem;transition:color 0.3s}
.login-options a:hover{opacity:0.7}
.login-options a:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:3px}

/* Security check — explicit loading, success and recovery states */
.login-security{display:flex;min-height:92px;flex-direction:column;align-items:center;justify-content:center;margin:0.15rem 0 0.75rem;padding:0.4rem;border:1px solid rgba(255,255,255,0.08);border-radius:8px;background:rgba(0,0,0,0.16)}
.login-security__widget{display:flex;min-height:0;align-items:center;justify-content:center;max-width:100%}
.login-security__status{max-width:320px;margin:0.35rem auto 0;color:var(--text-muted);font-size:0.72rem;line-height:1.45;text-align:center;text-wrap:pretty}
.login-security--verified{border-color:rgba(16,185,129,0.24);background:rgba(16,185,129,0.04)}
.login-security--verified .login-security__status{color:#6ee7b7}
.login-security--error{border-color:rgba(248,113,113,0.35);background:rgba(239,68,68,0.07)}
.login-security--error .login-security__status{color:#fca5a5}
.login-security__retry{min-height:44px;margin-top:0.45rem;padding:0.55rem 1rem;background:rgba(239,68,68,0.12);border:1px solid rgba(248,113,113,0.5);border-radius:6px;color:#fecaca;font:600 0.75rem 'Inter',sans-serif;cursor:pointer}
.login-security__retry:hover{background:rgba(239,68,68,0.2);border-color:#fca5a5}
.login-security__retry:focus-visible{outline:2px solid #fca5a5;outline-offset:2px}

/* Button — metallic gold gradient */
.btn-primary{
  display:flex;align-items:center;justify-content:center;gap:0.45rem;
  width:100%;min-height:44px;padding:0.7rem;background:var(--grad-gold);color:#0a0800;
  font-weight:600;font-size:0.84rem;border:none;border-radius:8px;cursor:pointer;
  transition:transform 0.3s,box-shadow 0.3s,opacity 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:not(:disabled):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-primary:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-primary[aria-busy="true"]{cursor:progress}
.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.09);border:1px solid rgba(248,113,113,0.35);border-radius:6px;color:#fca5a5;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;justify-content:flex-start;min-height:100svh;padding:4.5rem 1rem max(2rem,env(safe-area-inset-bottom));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(120px, 28vmin, 190px) !important;height:clamp(120px, 28vmin, 190px) !important;margin:0 auto 0.25rem !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-layout{padding:4.25rem 0.75rem max(1.5rem,env(safe-area-inset-bottom))}
  .login-3d-token-wrapper{display:none !important}
  .login-hero-mobile{margin:0.25rem 0 0.65rem}
  .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}
  .login-security{min-height:84px;margin-bottom:0.6rem;padding:0.3rem}
  .login-security__status{font-size:0.7rem}
  .login-app-page>button[aria-label*="TokenLords anthem"]{top:3.7rem !important;right:0.75rem !important;bottom:auto !important;min-width:44px;height:44px !important}
  .login-app-page>button[aria-label*="TokenLords anthem"] span{display:none}
}
@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(max-width:1024px) and (max-height:800px){.login-3d-token-wrapper{display:none !important}.login-hero-mobile{margin-top:0.25rem}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.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)}

/* ── SEO hub footer ───────────────────────────────────────────────────────
   Links from the home page to the four landing-page hubs. Deliberately quiet:
   small, muted, bottom of the page. Quiet is fine; hidden is not — a link a
   user cannot see but a crawler can is a spam violation, so this stays in the
   normal flow with real contrast on hover. */
.login-seo-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  padding: 1.25rem 1rem 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.login-seo-footer a {
  color: rgba(226, 232, 240, 0.42);
  text-decoration: none;
  transition: color 0.15s ease;
}
.login-seo-footer a:hover,
.login-seo-footer a:focus-visible {
  color: #f7a00f;
  text-decoration: underline;
}