/* auth.css — tela de login/registro (js/ui/screens/authScreen.js). Formulário dentro de .panel, centralizado. */

/* C21 (análise crítica 2026-09-22): aqui havia `background: #10101a`, um retângulo OPACO sobre os 640×360 inteiros —
   ele tapava a cena `lobby`, que já desenha a praça `bg/town_plaza` com o véu das telas que não são o lobby
   (`game/scenes/lobbyScene.js`, DIM_RGBA = rgba(14,12,24,·67)). A primeira tela do jogo era uma caixa no vazio.
   Agora a praça aparece atrás e sobra só um degradê vertical: escurece as bordas (onde ficam o telhado e a fogueira,
   de maior contraste) e clareia no meio, atrás da caixa. Se o WebGL não subir, `#game` é preto e o degradê é o fundo. */
.screen-auth {
  background: linear-gradient(180deg, rgba(10, 9, 18, 0.72) 0%, rgba(10, 9, 18, 0.24) 38%, rgba(10, 9, 18, 0.24) 62%, rgba(10, 9, 18, 0.82) 100%);
}

.auth-box {
  width: calc(200 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
}

/* o letreiro da marca (`ui/brand/logo_word.png`, 128×54 de arte — art-pipeline.md §3.9) em 1× do `--px`, centrado: a mesma
   peça da tela de carregamento. O nome vai no `aria-label` (authScreen.js) */
.auth-logo {
  align-self: center;
  width: calc(128 * var(--px));
  height: calc(54 * var(--px));
  background: var(--ui-logo_word, url(../assets/ui/brand/logo_word.png)) no-repeat center / 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin-bottom: calc(2 * var(--px));
}

.auth-tabs {
  display: flex;
  gap: calc(2 * var(--px));
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--px));
}

.field {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--px));
}
.field-label { color: var(--c-text-dim); }

/* `.input` MUDOU DE CASA: agora é `base.css` (B188/B108, auditoria de UX de 2026-09-23). Ele nasceu aqui, na folha do
   login, e por isso as janelas do jogo — que carregam `base.css` e não precisam saber que `auth.css` existe — foram
   inventando `.friends-input`, `.clan-input` e `.lo-name`: quatro estilos, alturas de 24/26/28/32 px. */

.field-error {
  min-height: calc(8 * var(--px));
  color: var(--c-danger);
}

.auth-error {
  min-height: calc(8 * var(--px));
  color: var(--c-danger);
  text-align: center;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  margin-top: calc(2 * var(--px));
}

/* Enviando: apaga, mas o botão recebe o ponteiro e diz "Aguardando o servidor…" (`screens/authScreen.js`). */
.auth-form.is-busy { opacity: 0.6; }

.auth-footer {
  text-align: center;
  color: var(--c-text-dim);
}