@import url("../../prototipo/css/hud-tokens.css");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&display=swap");
/* TEMA ANIME DA ENTRADA, versão MACIA, a mesma HUD do jogo
   Nasceu em 21/10/2026 como "anime sombrio" (tinta preta, raio de 4 a 6px).
   Em 22 e 23/10 o jogo ficou macio (tinta ameixa, cantos de 8 a 12px, sombra
   curta 0 3px 0, títulos em M PLUS Rounded, hover com escala leve e clique que
   afunda) e a entrada ficou para trás. Leonardo, 24/10/2026: "o /entrar
   inteiro do jogo está com HUD diferente do jogo" e "faça algo pra garantir
   que a alteração sempre reflete os dois". Desde então a paleta e as medidas
   vêm de prototipo/css/hud-tokens.css (importado acima), a mesma fonte do jogo.
   Vale para login, servidor, seleção, criação e Pacto.
   Vem depois de hud.css e só vale com html data-estilo (posto pelo script do
   topo do index.html: ?estilo=atual ou 0 volta ao visual antigo).
   Só pintura: posição, tamanho e animação de entrada ficam com hud.css.
   O logo (.marca h1) segue em Cinzel; texto corrido segue em Spectral.
   Cor de Casa identifica conteúdo, não cromo (--corCasa nunca é trocada).
   Desempenho: nada de blur, filter de brilho, backdrop-filter nem sombra com
   desfoque; transição só de transform. */

/* os tokens (cor, tinta, sombra, raio, fonte) NAO moram aqui: vêm de
   ../../prototipo/css/hud-tokens.css, a mesma fonte do jogo, importada na
   linha 1. Esta folha só usa var(--ac-*); cor solta reprova a régua
   testes/hud-mesmo-estilo.mjs. */

/* camadas de fundo: sem clarao, sem vinheta, sem fagulha */
html[data-estilo] body #vinheta,
html[data-estilo] body #fagulhas,
html[data-estilo] body #clarãoAcesso,
html[data-estilo] body #clarãoSelecao{display:none !important}
html[data-estilo] body .fundo-portal{filter:saturate(1.15) contrast(1.08) !important}
html[data-estilo] body.emServidor #palco{filter:brightness(.55) !important}

/* paineis: chapados, tinta de 2px, sombra dura */
html[data-estilo] body .painel,
html[data-estilo] body.emAcesso #telaAcesso,
html[data-estilo] body.emCriacao #painelNovo,
html[data-estilo] body #ficha,
html[data-estilo] body #telaServidor,
html[data-estilo] body #telaPersonagens .seletor-personagens,
html[data-estilo] body #telaPersonagens #ficha,
html[data-estilo] body #telaPacto .pacto-det,
html[data-estilo] body #telaPacto .pacto-lista,
html[data-estilo] body .conta-painel{
  border:2px solid var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-painel) !important;
  background:var(--ac-painel) !important;background-image:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:var(--ac-sombra) !important;
}
html[data-estilo] body .painel::before,
html[data-estilo] body.emAcesso #telaAcesso::before,
html[data-estilo] body.emCriacao #painelNovo::before,
html[data-estilo] body #ficha::before,
html[data-estilo] body #telaServidor::before,
html[data-estilo] body #telaPersonagens .seletor-personagens::before,
html[data-estilo] body #telaPacto .pacto-det::before,
html[data-estilo] body .painel::after,
html[data-estilo] body.emAcesso #telaAcesso::after,
html[data-estilo] body #telaServidor::after,
html[data-estilo] body #telaPersonagens #ficha::after,
html[data-estilo] body #telaPersonagens .seletor-personagens::after,
html[data-estilo] body .acesso-cabecalho::after,
html[data-estilo] body .novo-cabecalho::after,
html[data-estilo] body .srv-cab::after{
  display:none !important;content:none !important;
}

/* titulos: sombra dura, sem brilho, sem gradiente no texto */
html[data-estilo] body .acesso-cabecalho h2,
html[data-estilo] body .novo-cabecalho h2,
html[data-estilo] body #telaServidor h2,
html[data-estilo] body .pt-nome,
html[data-estilo] body .pdv-t,
html[data-estilo] body .pd-nome,
html[data-estilo] body .criacao-nome strong,
html[data-estilo] body .srv-mundo .srv-nome,
html[data-estilo] body .ap-valor{
  color:var(--ac-texto) !important;text-shadow:var(--ac-sombra-p) !important;
}
html[data-estilo] body .marca h1,
html[data-estilo] body #telaPersonagens .fnome{
  background:none !important;background-image:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:var(--ac-ouro) !important;color:var(--ac-ouro) !important;
  text-shadow:var(--ac-sombra) !important;filter:none !important;
}
html[data-estilo] body .marca .sub{display:inline-block;background:var(--ac-tinta) !important;border-radius:var(--ac-raio-bloco);padding:3px 8px;color:var(--ac-texto) !important;text-shadow:none !important}
html[data-estilo] body .acesso-selo,
html[data-estilo] body .novo-cabecalho svg{filter:none !important}
html[data-estilo] body #carregando{background:var(--ac-tinta) !important;background-image:none !important}
html[data-estilo] body #carregando::before{
  border:3px solid var(--ac-botao) !important;border-top-color:var(--ac-ouro) !important;box-shadow:none !important}

/* botoes */
html[data-estilo] body .btn{
  background:var(--ac-botao) !important;background-image:none !important;
  border:2px solid var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-bloco) !important;
  color:var(--ac-texto) !important;text-shadow:none !important;
  box-shadow:var(--ac-sombra) !important;
}
html[data-estilo] body .btn:hover:not(:disabled){
  background:var(--ac-botao2) !important;color:var(--ac-texto) !important;
  box-shadow:var(--ac-sombra) !important}
html[data-estilo] body .btn.forte,
html[data-estilo] body .acesso-cta,
html[data-estilo] body #formEntrar .forte,
html[data-estilo] body #telaPersonagens .sel-entrar,
html[data-estilo] body #btnServidorEntrar{
  background:var(--ac-ouro) !important;background-image:none !important;color:var(--ac-tinta) !important;
  border:2px solid var(--ac-tinta) !important;text-shadow:none !important;
  box-shadow:var(--ac-sombra) !important;
}
html[data-estilo] body .btn.forte:hover:not(:disabled),
html[data-estilo] body .acesso-cta:hover:not(:disabled),
html[data-estilo] body #formEntrar .forte:hover:not(:disabled),
html[data-estilo] body #telaPersonagens .sel-entrar:hover:not(:disabled),
html[data-estilo] body #btnServidorEntrar:hover:not(:disabled){
  background:var(--ac-ouro2) !important;color:var(--ac-tinta) !important;border-color:var(--ac-tinta) !important;
  box-shadow:var(--ac-sombra) !important}
html[data-estilo] body .btn.perigo{
  background:var(--ac-sangue) !important;color:var(--ac-texto) !important;border-color:var(--ac-tinta) !important}
html[data-estilo] body .btn.perigo:hover:not(:disabled){
  background:var(--ac-fechar2) !important;color:var(--ac-texto) !important;border-color:var(--ac-tinta) !important}
html[data-estilo] body .btn.selar{
  background:var(--ac-botao) !important;background-image:none !important;color:var(--ac-texto) !important;
  border:2px solid var(--ac-tinta) !important;border-radius:var(--ac-raio-painel) !important;
  box-shadow:var(--ac-sombra) !important}
html[data-estilo] body .btn.selar:not(:disabled){
  background:var(--ac-botao2) !important;border-color:var(--ac-tinta) !important;color:var(--ac-texto) !important;
  box-shadow:var(--ac-sombra) !important}
html[data-estilo] body .btn.selar .sel-preencher{
  background:var(--corCasa,var(--ac-sangue)) !important;background-image:none !important}
html[data-estilo] body .btn.selar .sel-txt{color:var(--ac-texto) !important;text-shadow:var(--ac-sombra-p) !important}

/* abas e campos */
html[data-estilo] body .abas{border-bottom-color:var(--ac-tinta) !important}
html[data-estilo] body .aba{
  background:var(--ac-painel2) !important;background-image:none !important;color:var(--ac-suave) !important;
  border-color:var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-bloco) var(--ac-raio-bloco) 0 0 !important;
  text-shadow:none !important;box-shadow:none !important}
html[data-estilo] body .aba:hover{background:var(--ac-botao2) !important;color:var(--ac-texto) !important}
html[data-estilo] body .aba.on{
  background:var(--ac-ouro) !important;background-image:none !important;color:var(--ac-tinta) !important;
  text-shadow:none !important;box-shadow:none !important}
html[data-estilo] body .campo-caixa{
  background:var(--ac-fundo) !important;background-image:none !important;
  border:2px solid var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-bloco) !important;
  box-shadow:inset 0 2px 0 var(--ac-sombra-cor) !important}
html[data-estilo] body .campo-caixa:focus-within{
  border-color:var(--ac-azul) !important;background:var(--ac-fundo) !important;
  box-shadow:inset 0 2px 0 var(--ac-sombra-cor) !important}
html[data-estilo] body .campo-caixa input,
html[data-estilo] body .campo-caixa input:focus{color:var(--ac-texto) !important}
html[data-estilo] body .acesso-link{text-shadow:none !important}
html[data-estilo] body .aviso{
  background:var(--ac-aviso) !important;background-image:none !important;color:var(--ac-texto) !important;
  border-color:var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-bloco) !important;
  box-shadow:inset 6px 0 0 var(--ac-sangue),var(--ac-sombra) !important}
html[data-estilo] body .conta-sep{background:var(--ac-tinta) !important;background-image:none !important;height:2px !important}
html[data-estilo] body .conta-secao{text-shadow:none !important}

/* servidor */
html[data-estilo] body .srv-mundo{
  background:var(--ac-painel2) !important;background-image:none !important;
  border:2px solid var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-painel) !important;
  box-shadow:var(--ac-sombra) !important}
html[data-estilo] body .srv-mundo::before,
html[data-estilo] body .srv-mundo.on::after{display:none !important;content:none !important}
html[data-estilo] body .srv-mundo:hover:not(:disabled){background:var(--ac-botao2) !important;border-color:var(--ac-tinta) !important}
html[data-estilo] body .srv-mundo.on{
  background:var(--ac-botao) !important;border-color:var(--ac-ouro) !important;
  box-shadow:var(--ac-sombra) !important}
html[data-estilo] body .srv-mundo.fechado{filter:none !important;opacity:.7}
html[data-estilo] body .srv-astro{
  background:var(--ac-fundo) !important;background-image:none !important;
  box-shadow:inset 0 0 0 2px var(--ac-tinta) !important;filter:none !important}
html[data-estilo] body .srv-astro::before,
html[data-estilo] body .srv-astro::after{animation:none !important;filter:none !important}
html[data-estilo] body .srv-mundo-na .srv-astro::before{
  inset:24px !important;border-radius:50%;background:var(--ac-azul) !important;background-image:none !important;
  border:3px solid var(--ac-tinta)}
html[data-estilo] body .srv-mundo-sa .srv-astro::before{
  inset:24px !important;border-radius:50%;background:var(--ac-pessego) !important;background-image:none !important;
  border:3px solid var(--ac-tinta)}
html[data-estilo] body .srv-mundo-na .srv-astro::after,
html[data-estilo] body .srv-mundo-sa .srv-astro::after{display:none !important}
html[data-estilo] body .srv-estado{background:var(--ac-fundo) !important;border:2px solid var(--ac-tinta) !important;border-radius:var(--ac-raio-bloco)}
html[data-estilo] body .srv-estado.aberto{color:var(--ac-verde) !important}
html[data-estilo] body .srv-estado.aberto::before{box-shadow:none !important;background:var(--ac-verde) !important}
html[data-estilo] body .srv-tag{
  background:var(--ac-ouro) !important;background-image:none !important;border:2px solid var(--ac-tinta);border-radius:var(--ac-raio-bloco)}
html[data-estilo] body .srv-subs-cab{border-bottom-color:var(--ac-tinta) !important}
html[data-estilo] body .srv-linha{
  background:var(--ac-painel2) !important;background-image:none !important;
  border-color:var(--ac-tinta) !important;border-radius:var(--ac-raio-bloco) !important;box-shadow:var(--ac-sombra-p)}
html[data-estilo] body .srv-linha:hover:not(:disabled){background:var(--ac-botao2) !important}
html[data-estilo] body .srv-linha.on{
  background:var(--ac-botao) !important;background-image:none !important;
  border-color:var(--ac-ouro) !important}
html[data-estilo] body .srv-linha.on .srv-nome::before{box-shadow:none !important;background:var(--ac-ouro) !important}
html[data-estilo] body .srv-lotacao i{background:var(--ac-tinta) !important}
html[data-estilo] body .srv-baixa i:nth-child(-n+1),
html[data-estilo] body .srv-media i:nth-child(-n+2),
html[data-estilo] body .srv-alta i:nth-child(-n+3),
html[data-estilo] body .srv-cheio i{background:currentColor !important;box-shadow:none !important}
html[data-estilo] body .srv-acoes{border-top-color:var(--ac-tinta) !important}

/* barra de topo e troca de servidor */
html[data-estilo] body .barra-topo{
  background:var(--ac-painel) !important;background-image:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border:2px solid var(--ac-tinta) !important;border-radius:var(--ac-raio-painel) !important;
  box-shadow:var(--ac-sombra) !important}
html[data-estilo] body .barra-topo b{color:var(--ac-texto) !important}
html[data-estilo] body .srv-troca{
  background:var(--ac-botao) !important;background-image:none !important;
  border:2px solid var(--ac-tinta) !important;border-radius:var(--ac-raio-bloco) !important;box-shadow:var(--ac-sombra-p) !important}
html[data-estilo] body .srv-troca::before{background:var(--ac-azul) !important;box-shadow:none !important}
html[data-estilo] body[data-mundo="sa"] .srv-troca::before{background:var(--ac-pessego) !important;box-shadow:none !important}
html[data-estilo] body .srv-troca:hover{background:var(--ac-botao2) !important;border-color:var(--ac-tinta) !important;box-shadow:var(--ac-sombra-p) !important}

/* selecao de personagem */
html[data-estilo] body #ficha .fx-titulo,
html[data-estilo] body .sel-cab{border-bottom-color:var(--ac-tinta) !important}
html[data-estilo] body #telaPersonagens .pjb{
  background:var(--ac-painel2) !important;background-image:none !important;
  border-color:var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-bloco) !important;
  box-shadow:inset 0 0 0 1px var(--ac-tinta),var(--ac-sombra-p) !important}
html[data-estilo] body #telaPersonagens .pjb:hover{background:var(--ac-botao2) !important;border-color:var(--ac-tinta) !important}
html[data-estilo] body #telaPersonagens .pjb.on{
  background:var(--ac-botao) !important;border-color:var(--ac-ouro) !important;
  box-shadow:inset 0 0 0 1px var(--ac-ouro),var(--ac-sombra) !important}
html[data-estilo] body #telaPersonagens .pjb::after{background:var(--ac-ouro) !important;box-shadow:none !important}
html[data-estilo] body .pjb-nivel{
  background:var(--ac-tinta) !important;background-image:none !important;border-color:var(--ac-ouro) !important;border-radius:var(--ac-raio-bloco) !important}
html[data-estilo] body #telaPersonagens .pjb.novo{
  background:var(--ac-fundo) !important;border:2px dashed var(--ac-fraco) !important}
html[data-estilo] body #telaPersonagens .sel-xp .fbarra{
  background:var(--ac-tinta) !important;box-shadow:none !important;border-radius:2px}
html[data-estilo] body #telaPersonagens .sel-xp .fbarra i{
  background:var(--ac-azul) !important;background-image:none !important;box-shadow:none !important}

/* criacao */
html[data-estilo] body .sexo-opcoes{
  background:var(--ac-fundo) !important;border:2px solid var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-bloco) !important}
html[data-estilo] body .sexo-opcoes input:checked+span{
  background:var(--ac-ouro) !important;background-image:none !important;color:var(--ac-tinta) !important;
  border-color:var(--ac-tinta) !important;text-shadow:none !important;box-shadow:var(--ac-sombra-p) !important}
html[data-estilo] body .ap-linha{border-bottom-color:var(--ac-tinta) !important}
html[data-estilo] body .ap-seta{
  background:var(--ac-botao) !important;border:2px solid var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-bloco) !important;
  color:var(--ac-ouro) !important;box-shadow:var(--ac-sombra-p) !important}
html[data-estilo] body .ap-seta:hover{
  background:var(--ac-botao2) !important;color:var(--ac-ouro2) !important;box-shadow:var(--ac-sombra-p) !important}
html[data-estilo] body .giro-bt{
  background:var(--ac-painel) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border:2px solid var(--ac-tinta) !important;border-image:none !important;border-radius:var(--ac-raio-painel) !important;
  box-shadow:var(--ac-sombra-p) !important}
html[data-estilo] body .giro-bt:hover{background:var(--ac-botao2) !important;box-shadow:var(--ac-sombra-p) !important}

/* Pacto */
html[data-estilo] body #telaPacto{background:none !important;background-image:none !important}
html[data-estilo] body #telaPacto .pl-rot{background:none !important;background-image:none !important;text-shadow:none !important}
html[data-estilo] body #telaPacto .casa-op{
  background:var(--ac-painel2) !important;background-image:none !important;
  border-image:none !important;border-radius:var(--ac-raio-bloco) !important;
  box-shadow:inset 0 0 0 2px var(--ac-tinta),var(--ac-sombra-p) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html[data-estilo] body #telaPacto .casa-op+.casa-op{border-top-color:transparent !important}
html[data-estilo] body #telaPacto .casa-op:hover{background:var(--ac-botao2) !important}
html[data-estilo] body #telaPacto .casa-op.sel{
  background:var(--ac-botao) !important;background-image:none !important;
  box-shadow:inset 0 0 0 2px var(--ac-tinta),inset 8px 0 0 var(--corCasa,var(--ac-ouro)),var(--ac-sombra) !important}
html[data-estilo] body .pd-cab{border-bottom-color:var(--ac-tinta) !important}
html[data-estilo] body .pd-eg{background:var(--ac-fundo) !important;background-image:none !important;border-color:var(--ac-tinta) !important;border-radius:var(--ac-raio-bloco) !important}
html[data-estilo] body .pd-eg.sel{background:var(--ac-painel2) !important;box-shadow:none !important}
html[data-estilo] body .pd-eg-ico{filter:none !important}
html[data-estilo] body .pacto-rodape{
  background:var(--ac-painel) !important;background-image:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-top-color:var(--ac-tinta) !important;border-image:none !important;box-shadow:none !important}

/* o jeito macio do jogo (o mesmo de prototipo/css/tema-anime.css): títulos em
   M PLUS Rounded, botão de canto redondo, hover que cresce um pouco e clique
   que afunda. Só transform muda de um quadro para o outro. */
html[data-estilo] body .acesso-cabecalho h2,
html[data-estilo] body .novo-cabecalho h2,
html[data-estilo] body #telaServidor h2,
html[data-estilo] body .pt-nome,
html[data-estilo] body .pdv-t,
html[data-estilo] body .pd-nome,
html[data-estilo] body .criacao-nome strong,
html[data-estilo] body .srv-mundo .srv-nome,
html[data-estilo] body .barra-topo b,
html[data-estilo] body #telaPersonagens .fnome{
  font-family:var(--ac-fonte) !important;font-weight:800 !important;letter-spacing:.02em !important}
html[data-estilo] body .btn,
html[data-estilo] body .ap-seta,
html[data-estilo] body .srv-troca,
html[data-estilo] body .giro-bt{
  border-radius:var(--ac-raio-botao) !important;transition:var(--ac-trans) !important}
html[data-estilo] body .btn:hover:not(:disabled),
html[data-estilo] body .ap-seta:hover,
html[data-estilo] body .srv-troca:hover,
html[data-estilo] body .giro-bt:hover{
  transform:scale(1.04) !important;box-shadow:var(--ac-sombra-p) !important}
html[data-estilo] body .btn:active:not(:disabled),
html[data-estilo] body .ap-seta:active,
html[data-estilo] body .srv-troca:active,
html[data-estilo] body .giro-bt:active{
  transform:translateY(2px) scale(1) !important;box-shadow:none !important}
html[data-estilo] body .btn.forte,
html[data-estilo] body .acesso-cta,
html[data-estilo] body #formEntrar .forte,
html[data-estilo] body #telaPersonagens .sel-entrar,
html[data-estilo] body #btnServidorEntrar,
html[data-estilo] body .btn.selar{font-family:var(--ac-fonte) !important;font-weight:800 !important}
@media (prefers-reduced-motion:reduce){
  html[data-estilo] body :is(.btn,.ap-seta,.srv-troca,.giro-bt){transition:none !important}
  html[data-estilo] body :is(.btn,.ap-seta,.srv-troca,.giro-bt):is(:hover,:active){transform:none !important}
}

/* 22/10/2026 (entrar-video-22-10): o vídeo anime em loop por cima da imagem
   de reserva, dentro da mesma folha (herda o filtro e a respiração). */
html[data-estilo] .fundo-portal .fundo-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none}
html[data-estilo] .fundo-portal .fundo-video.tocando{opacity:1}
/* 22/10/2026, Leonardo: "no login não faz sentido mais o personagem de costa e a ancora ali, deixa
   somente o video". Com o vídeo do login tocando, o palco 3D, o céu vivo e as brasas somem; se o
   vídeo não tocar, fica tudo como antes. Na seleção eles voltam. */
html[data-estilo] #palco,html[data-estilo] #ceuVivo,html[data-estilo] #brasasVivas{transition:opacity .9s ease,filter .6s}
html[data-estilo] body.emAcesso:has(.fundo-acesso.ativo .fundo-video.tocando) :is(#palco,#ceuVivo,#brasasVivas){opacity:0 !important}