/* auth.css — VoxPairWorld login/register styling (fantasy palette, matches the game) */
:root{
  --night:#0e1a2b; --mist:#1b2e44; --amber:#ffb347; --glow:#7ad7f0;
  --fox:#ff6a13; --success:#58cc02; --violet:#9b5de5;
  --text:#e8f1f8; --muted:rgba(122,215,240,.65); --border:rgba(122,215,240,.25);
  --font-display:"Fredoka","Nunito",system-ui,sans-serif;
  --font-body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-body); color:var(--text);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(155,93,229,.25), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(122,215,240,.18), transparent 55%),
    var(--night);
  min-height:100%; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.card{
  width:100%; max-width:420px; background:linear-gradient(180deg, rgba(27,46,68,.95), rgba(14,26,43,.95));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 28px; box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 40px rgba(122,215,240,.08);
  animation:rise .5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:6px}
.brand .fox{font-size:40px; filter:drop-shadow(0 0 12px rgba(255,106,19,.5))}
h1{font-family:var(--font-display); font-weight:600; font-size:26px; margin:0; text-align:center; color:var(--amber)}
.tagline{text-align:center; color:var(--muted); margin:4px 0 22px; font-size:14px}
label{display:block; font-size:13px; color:var(--glow); margin:14px 0 6px; font-weight:600}
input[type=email],input[type=password]{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--border);
  background:rgba(14,26,43,.7); color:var(--text); font-size:15px; font-family:var(--font-body);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus{border-color:var(--glow); box-shadow:0 0 0 3px rgba(122,215,240,.18)}
.btn{
  width:100%; margin-top:22px; padding:14px; border:0; border-radius:12px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:16px; color:#20140a;
  background:linear-gradient(180deg, #ffc266, var(--amber));
  box-shadow:0 8px 20px rgba(255,179,71,.25); transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,179,71,.35)}
.btn:active{transform:translateY(0)}
.alt{margin-top:18px; text-align:center; font-size:14px; color:var(--muted)}
.alt a{color:var(--glow); text-decoration:none; font-weight:600}
.alt a:hover{text-decoration:underline}
.flash{
  margin:0 0 16px; padding:11px 14px; border-radius:10px; font-size:14px;
  background:rgba(255,92,92,.12); border:1px solid rgba(255,92,92,.4); color:#ffd0d0;
}
.flash.ok{
  background:rgba(88,204,2,.12); border:1px solid rgba(88,204,2,.4); color:#dff5b8;
}
.hint{font-size:12px; color:var(--muted); margin-top:6px}
.lang-switch{display:flex; justify-content:center; gap:6px; margin-bottom:16px; font-size:13px}
.lang-link{color:var(--glow); text-decoration:none; font-weight:700; padding:2px 4px; letter-spacing:0.5px}
.lang-link.active{color:var(--amber); text-decoration:underline; text-underline-offset:3px}
.lang-link:hover{color:var(--amber)}
.lang-sep{color:var(--text)}
.brand-footer{text-align:center; margin-top:18px; font-size:12px}
.brand-footer a{color:var(--glow); text-decoration:none; font-weight:600}
.brand-footer a:hover{color:var(--amber); text-decoration:underline}
:focus-visible{outline:2px solid var(--glow); outline-offset:2px}