/* Identidade das telas de entrada (login, cadastro, verificação, treinador e inicial).
   Tudo com escopo em #boot.entrada-nova para não alterar o resto do jogo. Os tokens abaixo
   espelham game/identidade.css (um teste confere que os valores continuam iguais). */
#boot.entrada-nova {
  --fundo: #0d0f1a;
  --painel: #1a1d33;
  --painel-2: #242844;
  --borda: #2a2e4a;
  --texto: #f3ecd2;
  --texto-suave: #b9b5a0;
  --acao-a: #d9360f;
  --acao-b: #e8600c;
  --vida: #e0485a;
  --sistema: #2fd8f0;
  --bg-input: var(--fundo);
  /* Arte provisória do fundo: camadas de gradiente da paleta, a ser trocada pela ilustração original. */
  --auth-arte: radial-gradient(110% 80% at 78% 8%, #2a2650, #0d0f1a 62%),
    radial-gradient(60% 50% at 18% 92%, #3a1a2a88, transparent 70%);
  background: var(--fundo);
  color: var(--texto);
}
#boot.entrada-nova .tela-form:after {
  background: linear-gradient(180deg, #0d0f1a33, #0d0f1a66 40%, #0d0f1ae6);
}
#boot.entrada-nova .painel-auth {
  --bisel-cor: linear-gradient(135deg, #ff7a1a, #2a2e4a 45%, #2fd8f0);
}
#boot.entrada-nova .painel-auth > * {
  background: var(--painel);
  color: var(--texto);
}
#boot.entrada-nova .marca-auth em {
  color: var(--texto-suave);
}
#boot.entrada-nova .marca-auth em span {
  color: var(--acao-b);
}
#boot.entrada-nova .campo-etiqueta {
  color: var(--texto-suave);
}
#boot.entrada-nova input {
  color: var(--texto);
}
#boot.entrada-nova input:focus-visible {
  outline: 2px solid var(--sistema);
  outline-offset: 1px;
}
#boot.entrada-nova .primario {
  background: linear-gradient(135deg, var(--acao-a), var(--acao-b));
  border: 0;
  color: #fff;
  box-shadow: 0 6px 22px #ff7a1a40;
}
#boot.entrada-nova .primario:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 10px 28px #ff7a1a66;
}
#boot.entrada-nova .primario:disabled {
  opacity: 0.5;
}
#boot.entrada-nova .link {
  color: var(--sistema);
}
#boot.entrada-nova .aviso {
  color: var(--vida);
}
#boot.entrada-nova .passos {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  font: 700 11px Orbitron, sans-serif;
  letter-spacing: 0.14em;
  color: var(--sistema);
}
#boot.entrada-nova .passos-bolas {
  display: flex;
  gap: 6px;
  align-items: center;
}
#boot.entrada-nova .passos-bolas i {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--borda);
  transition: width 0.2s;
}
#boot.entrada-nova .passos-bolas i.feito {
  background: var(--texto-suave);
}
#boot.entrada-nova .passos-bolas i.atual {
  width: 22px;
  background: var(--sistema);
  box-shadow: 0 0 10px var(--sistema);
}
#boot.entrada-nova .secao {
  font: 700 10px Orbitron, sans-serif;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
  border-left: 3px solid var(--sistema);
  padding-left: 8px;
}
#boot.entrada-nova .nome-estado {
  font-size: 12px;
  margin-top: -8px;
  color: var(--texto-suave);
}
#boot.entrada-nova .nome-estado.ok {
  color: #5ac47a;
}
#boot.entrada-nova .nome-estado.erro {
  color: var(--vida);
}
#boot.entrada-nova .microtexto {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--texto-suave);
}
#boot.entrada-nova .cartoes-par,
#boot.entrada-nova .cartoes-trio {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
#boot.entrada-nova .cartoes-trio {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 520px) {
  #boot.entrada-nova .cartoes-trio {
    grid-template-columns: 1fr;
  }
}
#boot.entrada-nova .cartao-grande {
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: start;
  padding: 14px 8px;
  border-radius: 14px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--texto);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
#boot.entrada-nova .cartao-grande:hover {
  border-color: var(--texto-suave);
}
#boot.entrada-nova .cartao-grande:focus-visible {
  outline: 2px solid var(--sistema);
  outline-offset: 2px;
}
#boot.entrada-nova .cartao-grande.on {
  border-color: var(--sistema);
  background: var(--painel-2);
  box-shadow:
    0 0 0 1px var(--sistema),
    0 0 22px #2fd8f055;
}
#boot.entrada-nova .cartao-grande.on b {
  color: var(--sistema);
}
#boot.entrada-nova .retrato-redondo {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  background: var(--painel);
  border: 3px solid var(--borda);
}
#boot.entrada-nova .cartao-grande.on .retrato-redondo {
  border-color: var(--sistema);
}
#boot.entrada-nova .pilulas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
#boot.entrada-nova .tipo-pilula {
  --tipo: #7a7f99;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  background: var(--tipo);
  color: #fff;
  font: 700 10px Orbitron, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #0008;
}
#boot.entrada-nova .tipo-pilula img {
  image-rendering: pixelated;
}
#boot.entrada-nova .tipo-pilula[data-tipo='GRASS'] {
  --tipo: #3f9b4f;
}
#boot.entrada-nova .tipo-pilula[data-tipo='POISON'] {
  --tipo: #8a47b0;
}
#boot.entrada-nova .tipo-pilula[data-tipo='FIRE'] {
  --tipo: #d4672a;
}
#boot.entrada-nova .tipo-pilula[data-tipo='WATER'] {
  --tipo: #3d78c4;
}
#boot.entrada-nova .tipo-pilula[data-tipo='ELECTRIC'] {
  --tipo: #b8901a;
}
#boot.entrada-nova .tipo-pilula[data-tipo='FLYING'] {
  --tipo: #6a7fc0;
}
#boot.entrada-nova .tipo-pilula[data-tipo='BUG'] {
  --tipo: #7d9a1f;
}
#boot.entrada-nova .tipo-pilula[data-tipo='PSYCHIC'] {
  --tipo: #c8457a;
}
#boot.entrada-nova .tipo-pilula[data-tipo='GROUND'] {
  --tipo: #a07a3a;
}
#boot.entrada-nova .tipo-pilula[data-tipo='ROCK'] {
  --tipo: #8a7a50;
}
#boot.entrada-nova .tipo-pilula[data-tipo='ICE'] {
  --tipo: #3e9fb0;
}
#boot.entrada-nova .tipo-pilula[data-tipo='FIGHTING'] {
  --tipo: #b03a3a;
}
#boot.entrada-nova .tipo-pilula[data-tipo='GHOST'] {
  --tipo: #5a4a8a;
}
#boot.entrada-nova .tipo-pilula[data-tipo='DRAGON'] {
  --tipo: #4a55c0;
}
#boot.entrada-nova .tipo-pilula[data-tipo='DARK'] {
  --tipo: #4a4458;
}
#boot.entrada-nova .tipo-pilula[data-tipo='STEEL'] {
  --tipo: #6a8a9a;
}
#boot.entrada-nova .tipo-pilula[data-tipo='FAIRY'] {
  --tipo: #c06aa8;
}
#boot.entrada-nova .etiqueta-genero {
  padding: 2px 10px;
  border-radius: 999px;
  font: 700 10px Orbitron, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #3d78c4;
}
#boot.entrada-nova .etiqueta-genero[data-genero='female'] {
  background: #b0508f;
}
@media (prefers-reduced-motion: reduce) {
  #boot.entrada-nova .cartao-grande,
  #boot.entrada-nova .passos-bolas i {
    transition: none;
  }
}

/* Animação do inicial escolhido, pelo tipo principal: água em ondas, fogo em brasas, planta em folhas.
   Discreta, mas visível; some quando o sistema pede menos movimento (bloco no fim). */
#boot.entrada-nova .cartao-grande {
  position: relative;
  isolation: isolate;
}
#boot.entrada-nova .cartao-grande.on[data-aura]::before,
#boot.entrada-nova .cartao-grande.on[data-aura]::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  box-sizing: border-box;
}
/* água: ondas que se abrem em volta do cartão e somem, mais um brilho azul */
#boot.entrada-nova .cartao-grande.on[data-aura='WATER'] {
  --aura-cor: #5fb4ff;
  box-shadow:
    0 0 0 1px var(--sistema),
    0 0 24px #4aa3ff77;
}
#boot.entrada-nova .cartao-grande.on[data-aura='WATER']::before,
#boot.entrada-nova .cartao-grande.on[data-aura='WATER']::after {
  inset: -3px;
  border-radius: 17px;
  border: 2px solid var(--aura-cor);
  opacity: 0;
  animation: aura-onda 3s ease-out infinite;
}
#boot.entrada-nova .cartao-grande.on[data-aura='WATER']::after {
  animation-delay: 1.5s;
}
@keyframes aura-onda {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.14, 1.22);
    opacity: 0;
  }
}
/* fogo: o brilho oscila como chama e brasas sobem pelo cartão */
#boot.entrada-nova .cartao-grande.on[data-aura='FIRE'] {
  --aura-cor: #ff8a3d;
  animation: aura-chama 2.2s ease-in-out infinite;
  overflow: hidden;
}
#boot.entrada-nova .cartao-grande.on[data-aura='FIRE']::before {
  inset: 0;
  background:
    radial-gradient(circle 3px at 14% 100%, #ffe0b8, #ff8a3dcc 55%, transparent),
    radial-gradient(circle 2.5px at 33% 100%, #ffd0a0, #ff7a1acc 55%, transparent),
    radial-gradient(circle 3px at 52% 100%, #ffe0b8, #ff8a3dcc 55%, transparent),
    radial-gradient(circle 2.5px at 71% 100%, #ffd0a0, #ff7a1acc 55%, transparent),
    radial-gradient(circle 3px at 88% 100%, #ffe0b8, #ff8a3dcc 55%, transparent);
  animation: aura-fagulha 2.4s ease-in infinite;
}
@keyframes aura-chama {
  0%,
  100% {
    box-shadow:
      0 0 0 1px var(--sistema),
      0 0 18px #ff8a3d55;
  }
  35% {
    box-shadow:
      0 0 0 1px var(--sistema),
      0 0 32px #ff8a3daa;
  }
  70% {
    box-shadow:
      0 0 0 1px var(--sistema),
      0 0 24px #ff8a3d77;
  }
}
@keyframes aura-fagulha {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-170px);
    opacity: 0;
  }
}
/* planta: brilho verde que respira e folhas que sobem balançando */
#boot.entrada-nova .cartao-grande.on[data-aura='GRASS'] {
  --aura-cor: #5bd16a;
  animation: aura-folhagem 3.6s ease-in-out infinite;
  overflow: hidden;
}
#boot.entrada-nova .cartao-grande.on[data-aura='GRASS']::before {
  inset: 0;
  background:
    radial-gradient(ellipse 6px 3px at 16% 100%, #b7f2bd, #5bd16acc 60%, transparent),
    radial-gradient(ellipse 6px 3px at 38% 100%, #9be8a3, #4cc65dcc 60%, transparent),
    radial-gradient(ellipse 6px 3px at 60% 100%, #b7f2bd, #5bd16acc 60%, transparent),
    radial-gradient(ellipse 6px 3px at 84% 100%, #9be8a3, #4cc65dcc 60%, transparent);
  animation: aura-folha 4.2s ease-in-out infinite;
}
@keyframes aura-folhagem {
  0%,
  100% {
    box-shadow:
      0 0 0 1px var(--sistema),
      0 0 18px #5bd16a44;
  }
  50% {
    box-shadow:
      0 0 0 1px var(--sistema),
      0 0 30px #5bd16a99;
  }
}
@keyframes aura-folha {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    transform: translate(10px, -60px);
  }
  70% {
    transform: translate(-8px, -115px);
  }
  100% {
    transform: translate(6px, -170px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #boot.entrada-nova .cartao-grande,
  #boot.entrada-nova .cartao-grande::before,
  #boot.entrada-nova .cartao-grande::after {
    animation: none;
  }
}

/* seletor de data: tema escuro e ícone do calendário visível */
#boot.entrada-nova input[type='date'] {
  color-scheme: dark;
  cursor: pointer;
}
#boot.entrada-nova input[type='date']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
  filter: invert(0.85) sepia(1) saturate(4) hue-rotate(160deg);
}