/*
 * Fundo animado global — fixed atrás do app (exceto registration-fullbleed no layout).
 * Camadas: base + aurora + 3 glows + noise + 8 cartas. pointer-events: none.
 * Animações: transform + opacity (cartas/aurora/glow); background-position no noise (leve).
 */

.lobby-background--viewport {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Base bem escura + vinheta + acentos contidos + textura global do lobby */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.34) 40%, rgba(0, 0, 0, 0.7) 100%),
    radial-gradient(ellipse 92% 72% at 50% 100%, rgba(0, 1, 1, 0.98) 0%, transparent 54%),
    radial-gradient(ellipse 82% 58% at 50% 0%, rgba(0, 2, 2, 0.97) 0%, transparent 48%),
    radial-gradient(circle at 18% 22%, rgba(145, 255, 0, 0.14), transparent 30%),
    radial-gradient(circle at 85% 78%, rgba(0, 255, 200, 0.1), transparent 32%),
    radial-gradient(circle at 52% 48%, rgba(120, 255, 140, 0.06), transparent 40%),
    linear-gradient(180deg, #000201 0%, #010503 34%, #020705 68%, #000101 100%),
    var(--lobby-page-bg-image, none);
  background-size: cover, cover, cover, cover, cover, cover, cover, cover;
  background-position: center, center, center, center, center, center, center;
  background-repeat: no-repeat;
}

.lobby-background__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 18%, rgba(190, 255, 60, 0.14), transparent 28%),
    radial-gradient(circle at 72% 82%, rgba(0, 255, 210, 0.11), transparent 30%);
  filter: blur(12px);
  opacity: 1;
  animation: lobby-bg-base-breathe 14s ease-in-out infinite;
}

.lobby-background__aurora {
  position: absolute;
  inset: -20% -35%;
  background: linear-gradient(
    118deg,
    transparent 0%,
    rgba(0, 255, 200, 0.07) 28%,
    rgba(166, 217, 15, 0.14) 48%,
    rgba(3, 243, 235, 0.08) 62%,
    transparent 82%
  );
  opacity: 0.48;
  mix-blend-mode: screen;
  animation: lobby-bg-aurora-shift 16s ease-in-out infinite;
  will-change: transform, opacity;
}

.lobby-background__glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(42px);
  opacity: 0.48;
  animation: lobby-bg-pulse-glow 7s ease-in-out infinite;
  will-change: transform, opacity;
}

.lobby-background__glow--1 {
  width: min(320px, 55vw);
  height: min(320px, 55vw);
  left: -12%;
  top: 18%;
  background: rgba(90, 120, 32, 0.32);
}

.lobby-background__glow--2 {
  width: min(380px, 62vw);
  height: min(380px, 62vw);
  right: -18%;
  bottom: 8%;
  background: rgba(0, 80, 68, 0.28);
  animation-delay: 1.8s;
  animation-duration: 8.5s;
}

.lobby-background__glow--3 {
  width: min(260px, 48vw);
  height: min(260px, 48vw);
  left: 38%;
  bottom: 32%;
  background: rgba(16, 40, 26, 0.42);
  animation-delay: 3.4s;
  animation-duration: 9.5s;
}

.lobby-background__noise {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: radial-gradient(rgba(140, 200, 155, 0.32) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: 0 0;
  mask-image: radial-gradient(circle at 50% 42%, black 32%, transparent 92%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, black 32%, transparent 92%);
  animation: lobby-bg-noise-drift 24s linear infinite;
}

.lobby-background__cards {
  position: absolute;
  inset: 0;
}

.lobby-background__card {
  position: absolute;
  width: clamp(78px, 17vw, 112px);
  height: auto;
  opacity: 0.34;
  filter: drop-shadow(0 0 12px rgba(70, 130, 60, 0.18));
  transform-origin: center;
  will-change: transform, opacity;
  user-select: none;
  animation: lobby-bg-card-drift var(--lb-dur, 11s) ease-in-out infinite;
  animation-delay: var(--lb-delay, 0s);
}

/*
 * Copas e ouros: SVGs vêm em vermelho — forçar silhueta preta (mesma opacidade da animação lobby-bg-card-drift).
 * `brightness(0)` após escala de cinza = preto; sombra neutra para não “reacender” vermelho.
 */
.lobby-background__cards .lobby-background__card[src*="hearts"],
.lobby-background__cards .lobby-background__card[src*="diamonds"] {
  filter: grayscale(1) brightness(0) drop-shadow(0 0 10px rgba(0, 0, 0, 0.22));
}

.lobby-background__cards .lobby-background__card:nth-child(1) {
  left: 3%;
  top: 14%;
}

.lobby-background__cards .lobby-background__card:nth-child(2) {
  right: 4%;
  top: 10%;
}

.lobby-background__cards .lobby-background__card:nth-child(3) {
  left: 8%;
  top: 46%;
}

.lobby-background__cards .lobby-background__card:nth-child(4) {
  right: 6%;
  top: 38%;
}

.lobby-background__cards .lobby-background__card:nth-child(5) {
  left: 2%;
  bottom: 22%;
}

.lobby-background__cards .lobby-background__card:nth-child(6) {
  right: 3%;
  bottom: 28%;
}

.lobby-background__cards .lobby-background__card:nth-child(7) {
  left: 36%;
  top: 8%;
}

.lobby-background__cards .lobby-background__card:nth-child(8) {
  right: 28%;
  bottom: 12%;
}

/* Conteúdo do app acima do fundo (fixed z-0) */
html:not(.registration-fullbleed) turbo-frame#body {
  position: relative;
  z-index: 1;
}

@keyframes lobby-bg-base-breathe {
  0%,
  100% {
    opacity: 0.76;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0.86;
    transform: scale3d(1.03, 1.03, 1);
  }
}

@keyframes lobby-bg-aurora-shift {
  0%,
  100% {
    transform: translate3d(-6%, 3%, 0) rotate(-3deg);
    opacity: 0.34;
  }
  50% {
    transform: translate3d(12%, -6%, 0) rotate(2deg);
    opacity: 0.6;
  }
}

@keyframes lobby-bg-pulse-glow {
  0%,
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 0.4;
  }
  50% {
    transform: scale3d(1.14, 1.14, 1);
    opacity: 0.62;
  }
}

@keyframes lobby-bg-noise-drift {
  0% {
    background-position: 0 0;
    opacity: 0.18;
  }
  50% {
    background-position: 18px 12px;
    opacity: 0.28;
  }
  100% {
    background-position: 0 0;
    opacity: 0.18;
  }
}

@keyframes lobby-bg-card-drift {
  0%,
  100% {
    transform: translate3d(-14px, 10px, 0) rotate(-20deg) scale3d(0.96, 0.96, 1);
    opacity: 0.26;
  }
  32% {
    transform: translate3d(42px, -52px, 0) rotate(10deg) scale3d(1.12, 1.12, 1);
    opacity: 0.44;
  }
  64% {
    transform: translate3d(-28px, -18px, 0) rotate(-8deg) scale3d(1.04, 1.04, 1);
    opacity: 0.36;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-background__base,
  .lobby-background__aurora,
  .lobby-background__glow,
  .lobby-background__noise,
  .lobby-background__card {
    animation: none !important;
  }

  .lobby-background__aurora {
    opacity: 0.4;
  }

  .lobby-background__glow {
    opacity: 0.44;
  }
}