/* ====== TrueGamer Neon Arcade Login ====== */
:root{
  --tg-bg: #0d0d0d;      /* fondo oscuro del sitio */
  --tg-card: #111217;    /* tarjeta */
  --tg-text: #e7e7f7;
  --tg-neon: #9b5cff;    /* morado */
  --tg-neon2: #ff2fb0;   /* fucsia */
  --tg-accent: #00eaff;  /* cian */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.auth-body,
body {
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 80% at 50% 30%, #121222 0%, var(--tg-bg) 60%);
  color: var(--tg-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
}

/* ====== Wrapper centrado ====== */
.auth-wrapper {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

/* ====== Tarjeta (auth-card y login-card) ====== */
.auth-card, .login-card {
  width: min(92vw, 440px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    var(--tg-card);
  border-radius: 18px;
  padding: 2rem;
  text-align: center;
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  /* brillo base */
  box-shadow:
    0 0 12px rgba(155,92,255,.35),
    0 0 26px rgba(255,47,176,.22);
}

/* Borde neón animado alrededor de la tarjeta */
.auth-card::before, .login-card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--tg-neon), var(--tg-neon2), var(--tg-accent), var(--tg-neon));
  filter: blur(10px);
  opacity:.55;
  z-index:-1;
  animation: glow 6s linear infinite;
}
@keyframes glow{
  0%{ filter: blur(10px) hue-rotate(0deg); }
  100%{ filter: blur(10px) hue-rotate(360deg); }
}

/* ====== Encabezado ====== */
.auth-header{ margin-bottom:1rem; }
.auth-title{
  margin:0 0 .25rem;
  font-size: clamp(1.7rem, 3.5vw, 2.2rem);
  font-weight: 900;
  color: var(--tg-accent);
  text-shadow: 0 0 10px var(--tg-accent), 0 0 18px var(--tg-neon2);
}
.auth-subtitle{
  margin:0;
  color:#cfcfe8;
  font-weight:600;
}

/* ====== Formulario ====== */
.auth-form{
  display:grid;
  gap: 1rem;
}

/* Controles (text, email, password) */
.form-control label{
  display:block;
  text-align:left;
  font-weight:700;
  margin-bottom:.4rem;
  color:#d8d8ef;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"]{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#1a1b25;
  color:var(--tg-text);
  font-size:1rem;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.auth-card input::placeholder,
.login-card input::placeholder{ color:#a8a8bf; }
.auth-card input:focus,
.login-card input:focus{
  border-color: var(--tg-neon);
  box-shadow:
    0 0 0 3px rgba(155,92,255,.25),
    inset 0 0 10px rgba(255,47,176,.15);
}

/* Botón principal */
.btn, .btn-primary,
.auth-card button, .login-card button{
  width:100%;
  padding:14px 16px;
  border:0;
  border-radius:14px;
  font-weight:900;
  font-size:1rem;
  letter-spacing:.3px;
  color:#0b0b0f;
  background: linear-gradient(90deg, var(--tg-neon), var(--tg-neon2), var(--tg-accent));
  background-size: 200% 100%;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, background-position .6s ease;
  box-shadow: 0 0 10px var(--tg-neon), 0 0 22px var(--tg-neon2);
}
.btn:hover, .btn-primary:hover,
.auth-card button:hover, .login-card button:hover{
  filter: brightness(1.08);
  background-position: 100% 0;
  box-shadow: 0 0 12px var(--tg-neon), 0 0 26px var(--tg-neon2), 0 0 30px var(--tg-accent);
}
.btn:active, .btn-primary:active,
.auth-card button:active, .login-card button:active{
  transform: translateY(1px) scale(.995);
}

/* Mensajes / errores */
.auth-alert, .login-note{
  margin-top:.9rem;
  padding:.85rem 1rem;
  border-radius:12px;
  font-size:.95rem;
  line-height:1.35;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color:#e7e7f7;
  text-align:left;
  box-shadow: inset 0 0 12px rgba(155,92,255,.15);
}
.auth-alert-error, .login-note--error{
  background: rgba(255,47,176,.10);
  border-color: rgba(255,47,176,.45);
  box-shadow: 0 0 12px rgba(255,47,176,.25), inset 0 0 12px rgba(255,47,176,.18);
}

/* Links inferiores */
.auth-links, .login-cta{
  margin-top:.8rem;
  color:#cfcfe8;
  text-align:center;
}
.auth-links .sep{ margin:0 .5rem; opacity:.6; }
a.link{
  color: var(--tg-neon2);
  text-decoration: none;
  font-weight: 800;
}
a.link:hover{
  color: var(--tg-accent);
  text-shadow: 0 0 8px var(--tg-accent);
}

/* Footer */
.auth-footer{
  margin-top:1.25rem;
  font-size:.9rem;
  color:#bcbcdc;
}

/* Accesibilidad teclado */
a:focus-visible, button:focus-visible,
input:focus-visible{
  outline:2px solid var(--tg-accent);
  outline-offset:3px;
  border-radius:12px;
}

/* Responsive */
@media (max-width: 480px){
  .auth-card, .login-card{
    width:min(94vw, 520px);
    padding:1.6rem;
    border-radius:18px;
  }
  .auth-title{ font-size: clamp(1.8rem, 6vw, 2.2rem); }
  .auth-card input, .login-card input{ padding:16px 16px; font-size:1.05rem; }
  .auth-card button, .login-card button{ padding:16px 18px; font-size:1.05rem; border-radius:14px; }
}

.auth-logo {
  display: block;
  margin: 0 auto 1rem;
  max-width: 180px;
  height: auto;
  filter: drop-shadow(0 0 6px var(--tg-neon))
          drop-shadow(0 0 12px var(--tg-neon2));
  animation: logoGlow 4s ease-in-out infinite alternate;
}

@keyframes logoGlow {
  0%   { filter: drop-shadow(0 0 6px var(--tg-neon)) drop-shadow(0 0 12px var(--tg-neon2)); }
  100% { filter: drop-shadow(0 0 12px var(--tg-accent)) drop-shadow(0 0 24px var(--tg-neon2)); }
}