/* =====================================================================
   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:var(--cur-mao,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:var(--cur-mao,pointer)}
.login-recente-tirar{flex:none;width:38px;border:0;background:none;color:#8d7c77;font-size:18px;line-height:1;cursor:var(--cur-mao,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:var(--cur-mao,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:var(--cur-mao,pointer)}
.login-esqueci{padding:4px 0;border:0;background:none;color:#c79a63;cursor:var(--cur-mao,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}

/* ENTRAR COM GOOGLE (28/09): só aparece quando o servidor tem o Google ligado (src/online/online.js).
   Claro com o G colorido, como o Google pede; mesma altura do ENTRAR para não desalinhar a coluna. */
.login-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;margin-top:8px;padding:0 14px;border:1px solid #dadce0;border-radius:3px;background:#fff;color:#1f1f1f;font-weight:700;font-size:13px;letter-spacing:1px;cursor:var(--cur-mao,pointer);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.login-google:hover{background:#f3f4f6}
.login-google:focus-visible{outline:2px solid #f2d19a;outline-offset:2px}
.login-google svg{flex:0 0 auto}
.login-google-ou{display:flex;align-items:center;gap:10px;margin-top:8px;color:#c79a63;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.login-google-ou::before,.login-google-ou::after{content:"";flex:1;height:1px;background:rgba(199,154,99,.35)}
.main-login-form .login-google,.main-login-form .login-google-ou{grid-column:1/-1;margin-top:0}
/* SÓ O "G" NO LOGIN (28/10, opção C do autor): "o branco estraga o clima da tela". Embaixo do
   "OU ENTRE COM" fica um círculo pequeno no estilo ESCURO oficial do Google (fundo #131314, borda
   #8E918F), com o G colorido intacto. O CRIAR CONTA COM GOOGLE do cadastro continua com o texto. */
.main-login-form #onlineGoogle{justify-self:center;width:34px;height:34px;min-height:0;padding:0;border:1px solid #8e918f;border-radius:50%;background:#131314;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.main-login-form #onlineGoogle:hover{background:#2a2a2d}
.main-login-form #onlineGoogle span{display:none}
/* DISCORD E FACEBOOK (28/10): círculos do mesmo tamanho do G, lado a lado na mesma linha, cada um
   com a cor oficial da marca. A linha só aparece se algum login de fora estiver ligado (online.js). */
.login-sociais{display:flex;justify-content:center;align-items:center;gap:12px;grid-column:1/-1}
.login-google.login-social{width:34px;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.45);overflow:hidden}
.login-google.login-social span{display:none}
.login-google.login-discord{background:#5865f2}
.login-google.login-discord:hover{background:#4752c4}
.login-google.login-facebook{background:#0866ff}
.login-google.login-facebook:hover{filter:brightness(1.1)}
#onlineSociaisCadastro{margin-top:8px}

/* A VITRINE DO CELULAR EM PÉ (19/10, opção A do autor; quem decide é src/ui/vitrine-celular.js).
   Fora do celular em pé ela nunca aparece: PC e celular deitado ficam como sempre foram. */
.menu-vitrine{display:none!important}
@media (max-width:620px) and (orientation:portrait){
  /* :not(.hidden): o display com !important vencia o .hidden e o menu ficava por cima do jogo (suíte, 19/10). */
  #mainMenu.com-vitrine:not(.hidden){display:flex!important;flex-direction:column;overflow-x:hidden!important;overflow-y:auto!important}
  #mainMenu.com-vitrine .main-menu-frame{flex:1 1 auto;align-self:stretch!important;display:flex!important;flex-direction:column;align-items:center;
    width:100%!important;margin:0!important;padding:max(14px,var(--sa-top,0px)) 18px calc(66px + var(--sa-bottom,0px))!important;background:transparent!important;border:0!important;box-shadow:none!important}
  #mainMenu.com-vitrine .main-menu-logo{width:min(170px,42vw,20vh)!important;margin:0 0 -4px!important}
  #mainMenu.com-vitrine .main-menu-kicker{margin:0 0 6px!important}
  #mainMenu.com-vitrine .main-login-form,#mainMenu.com-vitrine .main-account-status,#mainMenu.com-vitrine .main-menu-actions{display:none!important}
  #mainMenu.com-vitrine .menu-vitrine{display:flex!important;flex-direction:column;gap:10px;width:100%;max-width:400px;margin-top:auto}
  #mainMenu.com-vitrine .menu-vitrine button{min-height:50px;margin:0;font-weight:900;letter-spacing:2px;font-size:calc(14px * var(--text-scale,1));border-radius:3px}
  #mainMenu.com-vitrine .menu-vitrine .main-menu-secondary{background:rgba(10,8,10,.6)!important;border:1px solid rgba(201,154,74,.6)!important;color:#f1dfb8!important}
  .menu-vitrine-caixa{background:linear-gradient(180deg,rgba(8,6,8,.42),rgba(8,6,8,.82));border:1px solid rgba(201,154,74,.38);border-radius:4px;padding:12px 14px;text-align:left}
  .menu-vitrine-caixa b{display:block;margin-bottom:6px;color:#f3d48c;font-size:calc(15px * var(--text-scale,1));letter-spacing:.5px;line-height:1.3;text-shadow:0 2px 6px #000}
  .menu-vitrine-caixa ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}
  .menu-vitrine-caixa li{position:relative;padding-left:16px;color:#eadfca;font-size:calc(13px * var(--text-scale,1));line-height:1.3;text-shadow:0 1px 4px #000}
  .menu-vitrine-caixa li::before{content:"";position:absolute;left:2px;top:.45em;width:7px;height:7px;background:#d8a34a;transform:rotate(45deg)}
  #mainMenu.com-vitrine .main-menu-frame>small{font-size:10px!important;opacity:.78}
  #mainMenu.com-vitrine .main-menu-frame>small:first-of-type{margin-top:8px}
}