/* ====================================================================
   GameMind — auth surface
   One stylesheet for login, signup, verify-email, forgot-password and
   reset-password. Those five pages each carried their own near-copy of
   this design, which had drifted apart: .field was 16px on login and
   15px on signup, .sub 26px against 24px. Everything shared now lives
   here, on the token scales; the pages keep only what is genuinely
   theirs.

   Loaded after theme.css so it wins the cascade. Layout follows the
   patterns 21st's auth cards converge on: a narrow column, a two-step
   gap rhythm, and the field's action link sharing a baseline with its
   label rather than being exiled to the footer.
   ==================================================================== */

/* The hard offset shadow is the brand signature and stays in light mode,
   but #050505 against a white card reads as a misaligned border rather
   than a shadow. Same gesture, ink matched to the ground. */
:root[data-theme="light"]{
  --shadow-ink:rgba(15,23,42,.22);
}

/* --- page ---------------------------------------------------------- */
body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100svh;
  padding:var(--space-5);
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb,var(--yellow) 9%,transparent), transparent 46%),
    var(--bg);
  color:var(--text);
}

/* --- card ---------------------------------------------------------- */
/* Narrower than it was: 440px made a two-field form look like a page. */
.card{
  width:100%;
  max-width:384px;
  padding:var(--space-6);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#141414,#0f0f0f);
  box-shadow:var(--shadow-hard-lg), 0 24px 64px rgba(0,0,0,.4);
  animation:authIn var(--dur-slow) var(--ease) both;
}
@keyframes authIn{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}

/* --- brand --------------------------------------------------------- */
/* Two treatments exist across the five pages -- a lockup with the name
   on login/signup, a bare mark on the rest. Both are kept, but they now
   share one rhythm and one rule beneath them. */
.auth-brand{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding-bottom:var(--space-4);
  margin-bottom:var(--space-5);
  border-bottom:1px solid var(--border);
}
.brand-lockup{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.brand-lockup img{display:block;width:38px;height:38px;object-fit:contain}
.brand-name{
  color:#f4f1e8;
  font-size:var(--fs-sm);
  font-weight:var(--fw-black);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.brand-kicker{
  margin-top:2px;
  color:var(--muted);
  font-size:var(--fs-3xs);
  font-weight:var(--fw-bold);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.logo{margin-bottom:var(--space-5)}
.logo img{display:block;width:64px;height:64px;object-fit:contain}

/* --- headings ------------------------------------------------------ */
h1{
  margin-bottom:var(--space-2);
  font-size:var(--fs-3xl);
  font-weight:var(--fw-black);
  line-height:1.05;
  letter-spacing:-.01em;
}
.sub{
  margin-bottom:var(--space-6);
  color:var(--muted);
  font-size:var(--fs-sm);
  line-height:1.5;
}

/* --- fields -------------------------------------------------------- */
/* Two-step rhythm: 16px inside a field, 24px between them. */
.field{margin-bottom:var(--space-4)}
.field+.field{margin-top:var(--space-5)}
label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-2);
  color:var(--muted);
  font-size:var(--fs-3xs);
  font-weight:var(--fw-black);
  letter-spacing:.14em;
  text-transform:uppercase;
}
/* The field's own action, on the label's baseline. */
.label-action{
  color:var(--muted);
  font-size:var(--fs-3xs);
  font-weight:var(--fw-bold);
  letter-spacing:.06em;
  text-transform:none;
  text-decoration:none;
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease);
}
.label-action:hover{color:var(--yellow);text-decoration:underline}

input{
  width:100%;
  padding:var(--space-3) var(--space-4);
  border:1px solid #2e2e2e;
  border-radius:var(--r-sm);
  background:#0b0b0b;
  color:var(--text);
  font-size:var(--fs-md);
  font-weight:var(--fw-semibold);
  outline:none;
  transition:border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
input::placeholder{color:#5a5a5a}
input:focus{
  background:#0f0f0f;
  border-color:var(--yellow);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 16%,transparent);
}
.hint{
  margin-top:var(--space-2);
  color:var(--muted);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-semibold);
  line-height:1.45;
}

/* --- actions ------------------------------------------------------- */
.btn{
  position:relative;
  overflow:hidden;
  width:100%;
  margin-top:var(--space-5);
  padding:var(--space-3) var(--space-4);
  min-height:44px;
  border:1px solid color-mix(in srgb,var(--yellow) 70%,#fff);
  border-radius:var(--r-sm);
  background:var(--yellow);
  color:#090a07;
  font-size:var(--fs-2xs);
  font-weight:var(--fw-black);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:var(--shadow-hard-sm);
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease);
}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-hard-lg)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
/* The same sweep the landing page's primary action uses. */
.btn::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:40%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);
  transition:left var(--dur-slow) var(--ease);
}
.btn:hover:not(:disabled)::after{left:120%}
.btn.secondary{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
  box-shadow:none;
}
.btn.secondary:hover:not(:disabled){border-color:var(--muted);box-shadow:none}

/* --- messages ------------------------------------------------------ */
.error,.success{
  /* Shown by each page's script via inline style.display. Without this the
     empty box renders as a bare coloured bar on every page load. */
  display:none;
  margin-bottom:var(--space-4);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  line-height:1.5;
}
.error{
  border:1px solid color-mix(in srgb,var(--error) 34%,transparent);
  background:color-mix(in srgb,var(--error) 11%,transparent);
  color:var(--error);
}
.success{
  border:1px solid color-mix(in srgb,var(--green) 34%,transparent);
  background:color-mix(in srgb,var(--green) 11%,transparent);
  color:var(--green);
}

/* --- footer -------------------------------------------------------- */
.footer{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-3);
  justify-content:center;
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:var(--fs-sm);
  text-align:center;
}
.footer a{
  color:var(--yellow);
  font-weight:var(--fw-bold);
  text-decoration:none;
  text-underline-offset:3px;
}
.footer a:hover{text-decoration:underline}

/* A class that sets display beats the UA stylesheet's [hidden] rule, so
   .footer{display:flex} would keep a hidden footer visible. */
[hidden]{display:none!important}

/* --- focus --------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}

/* --- responsive ---------------------------------------------------- */
@media(max-width:520px){
  body{align-items:flex-start;padding:var(--space-8) var(--space-4) var(--space-5)}
  .card{max-width:100%;padding:var(--space-5);border-radius:var(--r-md)}
  h1{font-size:var(--fs-2xl)}
}
@media(orientation:landscape) and (max-height:520px){
  body{align-items:flex-start;padding-block:var(--space-7) var(--space-5)}
}
@media(prefers-reduced-motion:reduce){
  .card{animation:none}
  .btn::after{display:none}
}