#login-bg {
  position: fixed; inset: 0; z-index: 0;
  /* Gradientes semi-transparentes sobre o background do body (Summer 2026).
     Antes o último gradiente era opaco (#1a1e24 -> #0d1014) e cobria o
     background do body, deixando a login screen sem o wallpaper. */
  background:
    radial-gradient(ellipse at 30% 40%, rgba(30,45,60,.35) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(25,40,30,.25) 0%, transparent 55%),
    radial-gradient(ellipse at center, rgba(10,14,20,.25) 0%, rgba(6,8,12,.55) 100%);
}
#client-version-label {
  position: fixed; right: 12px; bottom: 12px; z-index: 3;
  background: rgba(0,0,0,.60); color: #fff;
  font-size: 10px; padding: 5px 10px; border-radius: 4px;
  opacity: 0; transition: opacity 1.5s ease; max-width: 260px; pointer-events: none;
}
#client-version-label.show { opacity: 1; }
.bg-grid {
  position: fixed; inset: 0; z-index: 1; opacity: .06;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
#bg-particles { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.bg-particle {
  position: absolute; border-radius: 50%;
  animation: bgFloat linear infinite; opacity: 0;
}
.bg-particle.fire {
  background: radial-gradient(circle, rgba(255,180,40,.55) 0%, transparent 70%);
  box-shadow: 0 0 12px rgba(255,140,20,.35), 0 0 30px rgba(255,100,10,.18);
  width: 4px; height: 4px;
}
.bg-particle.arcane {
  background: radial-gradient(circle, rgba(100,160,255,.50) 0%, transparent 70%);
  box-shadow: 0 0 10px rgba(80,140,240,.30), 0 0 24px rgba(50,100,220,.16);
  width: 3px; height: 3px;
}
@keyframes bgFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: .8; }
  20%  { opacity: .5; }
  100% { transform: translateY(-110vh) translateX(25px); opacity: 0; }
}
#login-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 80%);
  pointer-events: none;
}
#login { position: relative; z-index: 10; }
/* Modal de seleção de personagens: deixa o background aparecer atrás.
   O .modal-bg padrão tem rgba(0,0,0,.82) que cobre o wallpaper; na tela
   de login usamos uma classe mais transparente. */
.modal-bg.login-modal {
  background: rgba(0,0,0,.45);
}