/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* FUNDO */
body{
  font-family:Segoe UI, sans-serif;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(135deg, #0f172a, #1e1b4b, #3b82f6, #06b6d4);
  color:#fff;
  overflow:hidden;
}

/* ===== HEADER LOGO ===== */
.login-header{
  position:absolute;
  top:30px;
  width:100%;
  display:flex;
  justify-content:center;
  z-index:2;
}

.logo-login{
  width:200px;
  border-radius:50%;

  filter: drop-shadow(0px 0 10px #00ffee);

  animation:logoNeon 4s linear infinite;
}

/* animação neon */
@keyframes logoNeon{
  0%{filter: drop-shadow(0 0 6px #00ffee);}
  25%{filter: drop-shadow(0 0 10px #ff00cc);}
  50%{filter: drop-shadow(0 0 12px #ffd700);}
  75%{filter: drop-shadow(0 0 10px #7cff00);}
  100%{filter: drop-shadow(0 0 6px #00ffee);}
}

/* ===== CONTAINER LOGIN ===== */
.login-container{
  width:360px;
  max-width:90%;
  padding:35px 30px;
  border-radius:18px;

  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:center;

  background:linear-gradient(135deg,#050510,#0a0f2a);
  border:1px solid #1b2a55;

  box-shadow:
    0 0 25px rgba(0,255,238,.2),
    inset 0 0 20px rgba(0,0,0,.6);

  z-index:2;
}

/* TÍTULO */
.login-container h2{
  font-size:26px;
  font-weight:800;

  background:linear-gradient(90deg,#00ffee,#ff00cc,#ffd700);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  margin-bottom:10px;
}

/* INPUTS */
.login-container input{
  padding:13px;
  border-radius:10px;
  border:1px solid #1f2a55;

  background:#0f0f2e;
  color:#fff;

  outline:none;
  transition:.25s;
}

.login-container input::placeholder{
  color:#8aa0ff;
}

/* glow ao focar */
.login-container input:focus{
  border:1px solid #00ffee;
  box-shadow:0 0 12px rgba(0,255,238,.6);
  transform:scale(1.02);
}

/* BOTÃO */
.login-container button{
  padding:13px;
  border:none;
  border-radius:10px;

  font-weight:800;
  letter-spacing:1px;

  cursor:pointer;

  background:linear-gradient(90deg,#00ffee,#ff00cc);
  color:#050510;

  transition:.25s;
}

/* hover botão */
.login-container button:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px #00ffee;
}

/* clique botão */
.login-container button:active{
  transform:scale(0.97);
}

/* MENSAGEM */
#mensagemGame{
  margin-top:10px;
  font-size:14px;
  font-weight:600;
  min-height:20px;
}

/* SUCESSO */
.sucesso{
  color:#00ff88;
  text-shadow:0 0 8px #00ff88;
}

/* ERRO */
.erro{
  color:#ff4d4d;
  text-shadow:0 0 8px #ff4d4d;
}

/* CANVAS FUNDO */
#starsBg{
  position:fixed;
  inset:0;
  z-index:0;
  background:#050510;
}

/* RESPONSIVO */
@media (max-width:500px){
  .login-container{
    padding:25px 20px;
  }

  .logo-login{
    width:100px;
  }
}