/* Sign-in (src/panels/login.rs): one form for returning players and newcomers (an unknown name gets an account). */
#login {
  font: 16px/1.5 var(--face); color: var(--paper);
  position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: radial-gradient(90% 80% at 50% 42%, var(--haze), var(--veil) 75%);
  backdrop-filter: blur(5px) saturate(110%); -webkit-backdrop-filter: blur(5px) saturate(110%);
  form { width: min(100%, 400px); margin: auto; padding: 32px 30px 26px 32px; display: flex; flex-direction: column; gap: 22px; }
  header { display: flex; align-items: center; gap: 16px; }
  h1 { font-family: var(--face); margin: 0; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: 0.01em;
    color: var(--paper-bright); }
  .lede { margin: 4px 0 0; color: var(--muted); font-size: 15px; font-style: italic; }
  .fields { display: flex; flex-direction: column; gap: 18px; }
  .submit { margin-top: 2px; }
  &:not([data-state=error]) #login-message { text-align: center; }
  &[data-state=busy] #login-message { display: none; }  /* the button says it */
  .footnote {
    margin: 0; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 14.5px; line-height: 1.45; color: var(--muted);
    strong { color: var(--paper); font-weight: 600; }
  }
  @media (max-width: 440px) { & { padding: 12px; } form { padding: 26px 20px 22px; } h1 { font-size: 25px; } }
}