/* =====================================================
   MUNDOS — LOBBY  ·  "El Umbral"
   Un portal de huellas hacia el mundo compartido.
   Todo lo especial vive aquí, scopeado a .mundo-lobby,
   así el resto del sitio (.home-hero__*, .bubble,
   .site-header, etc.) no se toca.
   ===================================================== */

.mundo-lobby {
  /* Paleta propia de este mundo: noche + brasa */
  --umbral-noche: #17111F;
  --umbral-medianoche: #2E1C3E;
  --umbral-brasa: #E8804A;
  --umbral-brasa-clara: #FFCB8E;
  --umbral-niebla: #EFE5D8;
  --umbral-niebla-tenue: #B8ACA0;

  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-xl) var(--space-md);
  background:
    radial-gradient(ellipse 60% 50% at 50% 36%, rgba(232, 128, 74, 0.18), transparent 70%),
    linear-gradient(180deg, var(--umbral-noche) 0%, var(--umbral-medianoche) 65%, var(--umbral-noche) 100%);
  isolation: isolate;
}

/* Las manchas de acuarela del hero general no pertenecen a este mundo */
.mundo-lobby .bubble { display: none; }

/* Cielo nocturno: unas cuantas estrellas fijas */
.mundo-lobby::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--umbral-niebla) 0, transparent 100%),
    radial-gradient(1px 1px at 82% 15%, var(--umbral-niebla) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 78%, var(--umbral-niebla) 0, transparent 100%),
    radial-gradient(1px 1px at 22% 68%, var(--umbral-niebla) 0, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, var(--umbral-niebla) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 12%, var(--umbral-niebla) 0, transparent 100%),
    radial-gradient(1px 1px at 55% 85%, var(--umbral-niebla) 0, transparent 100%);
  opacity: 0.35;
  pointer-events: none;
}

.mundo-lobby__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
}

.mundo-lobby__eyebrow {
  display: block;
  font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--umbral-brasa-clara);
  opacity: 0.85;
  margin-bottom: var(--space-sm);
}

.mundo-lobby__title {
  font-family: 'Cormorant Garamond', var(--font-display), serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--umbral-niebla);
  text-shadow: 0 0 40px rgba(232, 128, 74, 0.35);
  margin-bottom: var(--space-sm);
}

.mundo-lobby__subtitle {
  font-family: var(--font-body);
  color: var(--umbral-niebla-tenue);
  font-size: 1.05rem;
  max-width: 460px;
  margin: 0 auto var(--space-lg);
}

/* ---------- el portal ---------- */

.mundo-lobby__portal {
  position: relative;
  width: min(260px, 60vw);
  aspect-ratio: 1;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mundo-lobby__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(232, 128, 74, 0.4);
  animation: umbral-pulso 3.6s ease-out infinite;
}
.mundo-lobby__ring:nth-child(2) { animation-delay: 1.2s; }
.mundo-lobby__ring:nth-child(3) { animation-delay: 2.4s; }

@keyframes umbral-pulso {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.mundo-lobby__core {
  position: relative;
  z-index: 1;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--umbral-brasa-clara), var(--umbral-brasa) 55%, transparent 78%);
}

/* El botón principal vive dentro del portal */
.mundo-lobby__cta {
  position: absolute;
  z-index: 2;
  padding: 0.9rem 1.7rem;
  border: none;
  border-radius: 999px;
  background: var(--umbral-noche);
  color: var(--umbral-brasa-clara);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(232, 128, 74, 0.5), 0 0 30px rgba(232, 128, 74, 0.25);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.mundo-lobby__cta:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 0 1px var(--umbral-brasa), 0 0 46px rgba(232, 128, 74, 0.45);
}
.mundo-lobby__cta:focus-visible {
  outline: 2px solid var(--umbral-brasa-clara);
  outline-offset: 3px;
}

/* ---------- huellas: el camino hacia el portal ---------- */

.mundo-lobby__huellas {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.mundo-lobby__huella {
  position: absolute;
  width: 9px;
  height: 14px;
  background: var(--umbral-brasa);
  border-radius: 50%;
  opacity: 0;
  animation: umbral-huella-in 0.6s ease-out forwards;
}
/* pasos alternados, subiendo hacia el portal */
.mundo-lobby__huella:nth-child(1) { left: -26px; bottom: 8px;  transform: rotate(-8deg); animation-delay: 0.10s; }
.mundo-lobby__huella:nth-child(2) { left: 14px;  bottom: 34px; transform: rotate(6deg);  animation-delay: 0.35s; }
.mundo-lobby__huella:nth-child(3) { left: -20px; bottom: 60px; transform: rotate(-4deg); animation-delay: 0.60s; }
.mundo-lobby__huella:nth-child(4) { left: 10px;  bottom: 86px; transform: rotate(5deg);  animation-delay: 0.85s; }

@keyframes umbral-huella-in {
  from { opacity: 0; transform: translateY(6px) scale(0.8); }
  to   { opacity: 0.55; transform: translateY(0) scale(1); }
}

/* ---------- estado: auth / bienvenida ---------- */

.mundo-lobby__auth,
.mundo-lobby__welcome {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed rgba(232, 128, 74, 0.4);
  border-radius: 14px;
  background: rgba(46, 28, 62, 0.4);
  backdrop-filter: blur(6px);
}

.mundo-lobby__auth-text,
.mundo-lobby__welcome-text {
  color: var(--umbral-niebla-tenue);
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}

.mundo-lobby__apodo {
  color: var(--umbral-brasa-clara);
  font-weight: 700;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

.mundo-lobby__welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Los enlaces de acceso/registro heredan .home-hero__cta pero se adaptan a la noche */
.mundo-lobby .home-hero__cta--primary {
  background: var(--umbral-brasa);
  color: var(--umbral-noche);
}
.mundo-lobby .home-hero__cta--secondary {
  color: var(--umbral-niebla);
  border-color: rgba(239, 229, 216, 0.3);
}
.mundo-lobby .home-hero__cta--secondary:hover {
  background: rgba(239, 229, 216, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .mundo-lobby__ring,
  .mundo-lobby__huella { animation: none; opacity: 0.5; }
}

@media (max-width: 480px) {
  .mundo-lobby__huellas { display: none; } /* en móvil el portal queda limpio, sin camino */
}

/* ---------- botón secundario: seleccionar personaje ---------- */

.mundo-lobby__personaje-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.4rem auto var(--space-lg);
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(232, 128, 74, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--umbral-niebla-tenue);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mundo-lobby__personaje-btn:hover {
  color: var(--umbral-brasa-clara);
  border-color: var(--umbral-brasa);
  background: rgba(232, 128, 74, 0.08);
}

.mundo-lobby__personaje-btn:focus-visible {
  outline: 2px solid var(--umbral-brasa-clara);
  outline-offset: 3px;
}