/* =====================================================================
   LOGIN — e-mails recentes, "Lembrar login", mostrar senha (27/09)
   Comportamento em src/ui/login-lembrar.js. Só acrescenta peças ao
   formulário que já existia (style.css): o desenho dele não muda.
   ===================================================================== */

/* Cada campo com seu botão (▾ ou olho) dentro da mesma caixa: o botão fica
   centrado na altura do campo em qualquer tamanho de letra (16 px no toque). */
.login-campo{position:relative;min-width:0}
.login-caixa{position:relative;display:block;min-width:0}
#mainLoginForm .login-caixa>input{padding-right:42px!important}
.login-campo-botao{position:absolute;top:0;right:0;bottom:0;width:40px;display:grid;place-items:center;padding:0;border:0;border-radius:0 3px 3px 0;background:transparent;color:#a8927a;cursor:pointer}
.login-campo-botao[hidden]{display:none}
.login-campo-botao:hover,.login-campo-botao.ligado,.login-campo-botao[aria-expanded="true"]{color:#f2d19a}
.login-campo-botao:focus-visible{outline:2px solid #c79a63;outline-offset:-3px}

/* A lista dos 3 últimos e-mails: logo abaixo do campo, por cima do resto. */
.login-recentes{position:absolute;left:0;min-width:100%;width:max-content;max-width:min(440px,calc(100vw - 32px));box-sizing:border-box;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;border:1px solid rgba(199,154,99,.55);border-radius:4px;background:#110d10;box-shadow:0 14px 34px rgba(0,0,0,.72)}
.login-recentes[hidden]{display:none}
.login-recente{display:flex;align-items:stretch;border-radius:3px}
.login-recente.ativo,.login-recente:hover{background:rgba(199,154,99,.16)}
.login-recente-usar{flex:1;min-width:0;min-height:38px;padding:8px 10px;border:0;background:none;color:#f2ece9;font:inherit;font-size:13px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.login-recente-tirar{flex:none;width:38px;border:0;background:none;color:#8d7c77;font-size:18px;line-height:1;cursor:pointer;border-radius:3px}
.login-recente-tirar:hover{color:#ffb4a2;background:rgba(255,120,90,.12)}

/* "Lembrar login" à esquerda e "Esqueci minha senha" à direita, na mesma linha. */
.login-extras{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 8px;min-height:28px}
.main-login-form .login-lembrar{display:inline-flex!important;align-items:center;gap:8px;cursor:pointer;color:#d3c3ab;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:none}
.main-login-form .login-lembrar input{width:16px;height:16px;margin:0;padding:0!important;accent-color:#c79a63;cursor:pointer}
.login-esqueci{padding:4px 0;border:0;background:none;color:#c79a63;cursor:pointer;font-size:12px;letter-spacing:.3px;text-decoration:underline}
.login-esqueci:hover{color:#f2d19a}

/* Toque: alvos de pelo menos 44 px e a lista com letra de 16 px. */
@media (pointer:coarse){
  .login-campo-botao{width:46px}
  #mainLoginForm .login-caixa>input{padding-right:48px!important}
  .login-recente-usar{min-height:44px;font-size:16px}
  .login-recente-tirar{width:46px}
  .main-login-form .login-lembrar{min-height:44px;font-size:13px}
  .main-login-form .login-lembrar input{width:20px;height:20px}
  .login-esqueci{min-height:44px;font-size:13px;letter-spacing:0}
}

/* O texto sob o ENTRAR tinha 9 px: ilegível no celular e no desktop pequeno. */
#mainAccountStatus{font-size:calc(11px * var(--text-scale, 1))!important;line-height:1.45}

/* Celular em pé: o quadro tinha 48 px de margem de cada lado (numa tela de
   390 px sobravam 260 px para o formulário, o "Esqueci minha senha" caía para
   uma linha sozinha e o SOM E OPÇÕES nascia embaixo das bandeiras). A logo
   também encolhe pela altura da tela, para o formulário subir. */
@media (max-width:620px){
  #mainMenu .main-menu-frame{padding-left:max(14px,4vw)!important;padding-right:max(14px,4vw)!important}
  #mainMenu .main-menu-logo{width:min(260px,62vw,27vh)!important}
  #mainMenu .main-menu-kicker{letter-spacing:.3em!important;text-wrap:balance}
  /* Bandeiras e Discord ficam fixos na tela (Fase 167); aqui ganham um rodapé
     escuro de largura inteira: o que rola passa POR BAIXO dele, em vez de a
     barra parecer um bloco solto por cima do SOM E OPÇÕES. */
  #mainMenu::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:4;height:calc(56px + var(--sa-bottom,0px));background:linear-gradient(to top,rgba(7,5,6,.96) 62%,rgba(7,5,6,0));pointer-events:none}
}

/* Conectado (online.js ajustarMenu põe .conectado): o formulário fica só com o JOGAR. Sem isto o
   "Lembrar login" ficava sozinho acima do botão, sem e-mail nem senha na tela (site, ?v=319). */
.main-login-form.conectado .login-extras,.main-login-form.conectado .login-campo{display:none!important}