/* shared styles for login/register pages */
:root {
  --bg-0: #05070d;
  --bg-1: #0a0f1c;
  --bg-2: #111a2e;
  --line: rgba(180, 200, 255, 0.12);
  --text: #e6ecf5;
  --text-dim: #94a0b8;
  --text-mute: #5d6a83;
  --gold: #f5c452;
  --gold-deep: #c89329;
  --cyan: #4dd6ff;
  --green: #6cff8a;
  --sith: #e23a3a;
  --rep: #4dabff;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:"Rajdhani","Segoe UI",sans-serif;
  background:var(--bg-0);
  color:var(--text);
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}

.stars{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 80%, #cfe5ff 50%, transparent 100%),
    radial-gradient(2px 2px at 40% 70%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 90%, #ffe6a8 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 40%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 95% 60%, #c4d8ff 50%, transparent 100%),
    radial-gradient(circle at 80% 20%, rgba(77,171,255,.08), transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(226,58,58,.06), transparent 40%),
    var(--bg-0);
  background-size:600px 600px,600px 600px,800px 800px,700px 700px,900px 900px,500px 500px,800px 800px,100% 100%,100% 100%;
  animation: stars-drift 90s linear infinite alternate;
}

/* ============================================================
   PAGE ENTRANCE MOTION — holo-materializing sequence
============================================================ */
@keyframes stars-drift{
  from{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  to  {background-position:80px 40px,-60px 60px,40px -30px,30px 50px,-70px 20px,20px -40px,-40px -20px,0 0,0 0,0 0}
}
@keyframes auth-fade-down{
  from{opacity:0;transform:translateY(-14px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes auth-fade-up{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes auth-card-in{
  0%  {opacity:0;transform:translateY(28px) scale(.96);filter:blur(8px)}
  55% {filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes auth-corner-pop{
  0%  {opacity:0;width:2px;height:2px}
  60% {opacity:1;width:18px;height:18px}
  100%{opacity:1;width:14px;height:14px}
}
@keyframes auth-stagger{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes auth-scan{
  0%  {transform:translateY(-110%);opacity:0}
  20% {opacity:.9}
  100%{transform:translateY(110%);opacity:0}
}

.auth-nav{animation:auth-fade-down .6s ease-out both}
.auth-foot{animation:auth-fade-up .6s ease-out .9s both}

.card{
  animation:auth-card-in .8s cubic-bezier(.2,.7,.2,1) .1s both;
}
/* one-shot holo scan line crossing the card on entrance */
.card .scan{
  position:absolute;left:0;right:0;top:0;height:40%;
  background:linear-gradient(180deg,transparent,rgba(245,196,82,.18) 50%,transparent);
  pointer-events:none;z-index:1;
  animation:auth-scan 1.2s ease-out .5s 1 both;
}

.card::before, .card::after{
  animation:auth-corner-pop .5s cubic-bezier(.2,1.4,.4,1) .85s both;
}

.card-eyebrow,
.card h1,
.card .lead,
.card form,
.card .foot-link{
  animation:auth-stagger .5s ease-out both;
}
.card-eyebrow{animation-delay:.30s}
.card h1     {animation-delay:.40s}
.card .lead  {animation-delay:.50s}
.card form   {animation-delay:.60s}
.card .foot-link            {animation-delay:.85s}
.card .foot-link + .foot-link{animation-delay:.95s}

/* form-internal cascade for richer flow on register */
.card form .field,
.card form .btn{
  animation:auth-stagger .45s ease-out both;
}
.card form .field            {animation-delay:.70s}
.card form .field + .field   {animation-delay:.78s}
.card form .field + .field + .field{animation-delay:.86s}
.card form .field + .field + .field + .field{animation-delay:.94s}
.card form .field + .field + .field + .field + .field{animation-delay:1.02s}
.card form .field + .field + .field + .field + .field + .field{animation-delay:1.10s}
.card form .btn{animation-delay:1.18s}

@media (prefers-reduced-motion: reduce){
  .stars,
  .auth-nav, .auth-foot,
  .card, .card::before, .card::after,
  .card-eyebrow, .card h1, .card .lead, .card form, .card .foot-link,
  .card form .field, .card form .btn,
  .card .scan{
    animation:none !important;
  }
}

.auth-nav{
  padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:rgba(5,7,13,.6);backdrop-filter:blur(14px);
}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-brand img{width:34px;height:34px;object-fit:contain}
.auth-brand .txt{font-family:"Orbitron",sans-serif;font-weight:700;font-size:13px;letter-spacing:2.4px;line-height:1}
.auth-brand .txt small{display:block;font-family:"JetBrains Mono",monospace;font-weight:400;font-size:8px;letter-spacing:1.6px;color:var(--gold);margin-top:5px;opacity:.85}
.auth-nav a.back{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:2px;
  color:var(--text-dim);text-transform:uppercase;
}
.auth-nav a.back:hover{color:var(--gold)}

.auth-main{
  display:grid;
  place-items:center;
  padding:48px 24px;
  position:relative;
}
.auth-main::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(77,171,255,.08), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(245,196,82,.06), transparent 60%);
}

.card{
  width:100%;max-width:480px;
  background:linear-gradient(180deg, rgba(20,30,50,.7), rgba(10,15,28,.85));
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  padding:48px 40px;
  position:relative;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.card::before, .card::after{
  content:"";position:absolute;width:14px;height:14px;
  border-color:var(--gold);border-style:solid;
}
.card::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.card::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

.card-eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:4px;
  color:var(--gold);text-transform:uppercase;margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.card-eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}
.card h1{
  font-family:"Orbitron",sans-serif;font-weight:800;font-size:32px;
  letter-spacing:-.5px;margin:0 0 10px;line-height:1.05;
}
.card .lead{
  color:var(--text-dim);margin:0 0 32px;font-size:15px;
}

.field{margin-bottom:18px}
.field label{
  display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:2.5px;color:var(--text-mute);text-transform:uppercase;
  margin-bottom:8px;
}
.field input, .field select{
  width:100%;padding:13px 16px;background:rgba(5,7,13,.6);
  border:1px solid var(--line);color:var(--text);
  font-family:"Rajdhani",sans-serif;font-size:15px;
  transition:border-color .2s, background .2s;
  border-radius:2px;outline:none;
}
.field input:focus, .field select:focus{
  border-color:rgba(245,196,82,.6);background:rgba(15,20,38,.8);
}
.field input::placeholder{color:var(--text-mute)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;font-family:"Rajdhani",sans-serif;font-weight:700;
  font-size:14px;letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;border:none;width:100%;
  border-radius:0;
  transition:transform .2s, background .2s;
}
.btn-primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#1a1408;box-shadow:0 0 28px rgba(245,196,82,.22);
}
.btn-primary:hover{background:linear-gradient(135deg,#ffd76e,var(--gold))}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

.auth-divider{
  display:flex;align-items:center;gap:14px;margin:22px 0;
  color:var(--text-dim);font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
}
.auth-divider::before,
.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.btn-discord{
  background:#5865f2;color:#fff;text-decoration:none;
  box-shadow:0 0 28px rgba(88,101,242,.25);
}

.legal-note{
  margin:16px 0 0;text-align:center;
  font-size:12.5px;color:var(--text-mute);
}
.legal-note a{color:var(--gold)}
.legal-note a:hover{text-decoration:underline}
.btn-discord:hover{background:#6a76ff;transform:translateY(-1px)}
.btn-discord svg{width:20px;height:20px;flex:none;fill:currentColor}

.alert{
  padding:12px 16px;background:rgba(226,58,58,.1);
  border-left:2px solid var(--sith);color:#ffb4b4;
  font-size:13px;margin-bottom:20px;
  font-family:"JetBrains Mono",monospace;letter-spacing:.5px;
}
.alert.success{background:rgba(108,255,138,.08);border-color:var(--green);color:#c5ffd0}

/* ============================================================
   Password strength indicator
============================================================ */
.password-strength{
  margin-top:8px;display:none;align-items:center;gap:12px;
}
.password-strength-bar{
  flex:1;height:4px;background:rgba(180,200,255,.12);overflow:hidden;border-radius:2px;
}
.password-strength-fill{
  height:100%;width:0;transition:width .25s ease, background .25s ease;
}
.password-strength-fill[data-level="weak"]  {width:33%; background:var(--sith)}
.password-strength-fill[data-level="medium"]{width:66%; background:var(--gold)}
.password-strength-fill[data-level="strong"]{width:100%;background:var(--green)}

.password-strength-label{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:1.5px;
  color:var(--text-mute);text-transform:uppercase;min-width:60px;text-align:right;
  transition:color .25s ease;
}
.password-strength-label[data-level="weak"]  {color:var(--sith)}
.password-strength-label[data-level="medium"]{color:var(--gold)}
.password-strength-label[data-level="strong"]{color:var(--green)}

.password-hint{
  margin-top:6px;font-family:"JetBrains Mono",monospace;font-size:10px;
  color:var(--text-mute);letter-spacing:.8px;line-height:1.5;
}
.password-mismatch{
  margin-top:6px;font-family:"JetBrains Mono",monospace;font-size:10px;
  color:var(--sith);letter-spacing:.8px;display:none;
}
.password-mismatch.show{display:block}

.foot-link{
  margin-top:28px;padding-top:22px;border-top:1px dashed var(--line);
  text-align:center;font-size:14px;color:var(--text-dim);
}
.foot-link a{color:var(--gold);font-weight:600}
.foot-link a:hover{text-decoration:underline}

.faction-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.faction-opt{
  padding:18px 14px;border:1px solid var(--line);background:rgba(5,7,13,.4);
  cursor:pointer;text-align:center;transition:all .2s;
  font-family:"Orbitron",sans-serif;font-size:12px;letter-spacing:2px;
  color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:10px;
}
.faction-opt img{
  width:52px;height:52px;object-fit:contain;
  filter:grayscale(.6) brightness(.7);transition:filter .2s,transform .2s;
}
.faction-opt:hover{color:var(--text)}
.faction-opt:hover img{filter:grayscale(.2) brightness(.9);transform:scale(1.04)}
.faction-opt.sel.republic{border-color:var(--rep);background:rgba(77,171,255,.1);color:var(--rep)}
.faction-opt.sel.republic img{filter:none;filter:drop-shadow(0 0 12px rgba(77,171,255,.5))}
.faction-opt.sel.empire{border-color:var(--sith);background:rgba(226,58,58,.1);color:var(--sith)}
.faction-opt.sel.empire img{filter:none;filter:drop-shadow(0 0 12px rgba(226,58,58,.5))}

.class-pick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.class-opt{
  padding:8px;border:1px solid var(--line);cursor:pointer;
  background:rgba(5,7,13,.4);transition:all .2s;display:grid;
  place-items:center;
}
.class-opt img{width:36px;height:36px;opacity:.55;transition:opacity .2s}
.class-opt:hover img{opacity:.85}
.class-opt.sel{border-color:var(--gold);background:rgba(245,196,82,.08)}
.class-opt.sel img{opacity:1}

.role-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.role-opt{
  position:relative;padding:14px 10px 12px;border:1px solid var(--line);
  background:rgba(5,7,13,.4);cursor:pointer;text-align:center;
  transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.role-opt img{width:42px;height:42px;opacity:.55;transition:opacity .2s,filter .2s;filter:saturate(.6)}
.role-opt .lbl{
  font-family:"Orbitron",sans-serif;font-size:11px;letter-spacing:2px;
  color:var(--text-dim);font-weight:600;
}
.role-opt:hover img{opacity:.85;filter:saturate(1)}
.role-opt:hover .lbl{color:var(--text)}
.role-opt.sel img{opacity:1;filter:saturate(1.2) drop-shadow(0 0 8px currentColor)}
.role-opt.sel.dps{border-color:#ff8a3a;background:rgba(255,138,58,.08);color:#ff8a3a}
.role-opt.sel.dps .lbl{color:#ff8a3a}
.role-opt.sel.heal{border-color:#a8ff8a;background:rgba(168,255,138,.08);color:#a8ff8a}
.role-opt.sel.heal .lbl{color:#a8ff8a}
.role-opt.sel.tank{border-color:#8ab4ff;background:rgba(138,180,255,.08);color:#8ab4ff}
.role-opt.sel.tank .lbl{color:#8ab4ff}
.role-opt .check{
  position:absolute;top:6px;right:6px;width:14px;height:14px;border-radius:50%;
  border:1px solid var(--line);background:rgba(5,7,13,.6);display:grid;place-items:center;
  font-size:9px;color:transparent;
}
.role-opt.sel .check{background:currentColor;border-color:currentColor;color:#0a0f1c}
.role-opt.sel .check::before{content:"✓";color:#0a0f1c;font-weight:700}
.role-hint{
  font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--text-mute);
  letter-spacing:1px;margin-top:8px;
}

.auth-foot{
  padding:24px 32px;border-top:1px dashed var(--line);
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--text-mute);
  letter-spacing:1px;text-align:center;
}

@media (max-width:520px){
  .card{padding:36px 24px}
  .card h1{font-size:26px}
  .field-row{grid-template-columns:1fr}
  .class-pick{grid-template-columns:repeat(4,1fr)}
}