/* =============================================================================
   Crownquest — auth.css  (login + register)
   Loaded on top of app.css. The signature moment is the guild pick: each option
   is quiet until chosen, then lights with its own guild accent.
   ========================================================================== */
body.auth{ overflow:auto; }

.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 18px;
  background:radial-gradient(ellipse at 50% 22%, #241d16 0%, var(--stone-950) 70%);
}

.auth-card{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, var(--stone-900), var(--stone-950));
  border:1px solid var(--stone-700); border-radius:12px;
  padding:30px 28px 24px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}

.auth-brand{
  font-family:'Cinzel',serif; font-weight:700; font-size:26px; letter-spacing:.05em;
  text-align:center; color:var(--parchment);
}
.auth-brand span{ color:var(--gold); }
.auth-tagline{
  margin:6px 0 20px; text-align:center;
  font-size:12.5px; color:var(--parchment-dim); letter-spacing:.02em;
}

.auth-alert{
  background:rgba(140,47,47,.16); border:1px solid #8c2f2f; color:#f0c9c0;
  border-radius:7px; padding:9px 12px; font-size:12.5px; margin-bottom:16px;
}

.auth-form{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field > span{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--parchment-dim);
}
.field > span em{ text-transform:none; letter-spacing:0; font-style:normal; color:var(--stone-700); color:#6b6152; }
.field input{
  background:var(--stone-800); border:1px solid var(--stone-700); border-radius:6px;
  color:var(--parchment); font-family:'Inter',sans-serif; font-size:14px;
  padding:10px 12px; transition:border-color .15s ease;
}
.field input:focus{ outline:none; border-color:var(--gold); }
.field .err{ color:var(--ember,#d9622c); font-size:11.5px; }

/* ---- guild pick ---- */
.guild-pick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.guild-option{
  position:relative; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--stone-700); border-radius:8px; padding:12px 12px 12px 16px;
  background:var(--stone-800); overflow:hidden;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.guild-option__emblem{
  width:34px; height:34px; flex:0 0 auto; display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.guild-option::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); opacity:.5;
}
.guild-option:hover{ border-color:var(--accent); transform:translateY(-1px); }
.guild-option input{ position:absolute; opacity:0; pointer-events:none; }
.guild-option__name{
  display:block; font-family:'Cinzel',serif; font-weight:600; font-size:15px; color:var(--parchment);
}
.guild-option__motto{ display:block; font-size:11px; color:var(--parchment-dim); margin-top:2px; }
.guild-option:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, var(--stone-800));
  box-shadow:inset 0 0 0 1px var(--accent);
}
.guild-option:has(input:checked)::before{ opacity:1; }
.guild-option:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

.auth-btn{
  margin-top:4px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--gold); color:var(--stone-950); border:none; border-radius:7px;
  padding:12px; cursor:pointer; transition:background .15s ease;
}
.auth-btn:hover{ background:#e8c355; }
.auth-btn:focus-visible{ outline:2px solid var(--parchment); outline-offset:2px; }

.auth-foot{ margin:18px 0 0; text-align:center; font-size:12.5px; color:var(--parchment-dim); }
.auth-foot a{ color:var(--gold); text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; }

/* fallback for browsers without :has() — options still usable, just no lit state */
@supports not (selector(:has(*))){
  .guild-option input:checked ~ .guild-option__body{ }
}