/* De a poco · Fase 3: mundo del compañero, avisos de desbloqueo y animación
   de crecimiento. El camino y el diario están en css/camino.css. */

/* Aviso chico de desbloqueo */
.unlock-toast {
  position: fixed;
  left: 50%;
  /* Encima del botón fijo "Ayuda" (ver .big-cta y #app.has-fixed-cta en
     css/base.css): siempre aparece en el inicio, que tiene ese botón. */
  bottom: calc(100px + var(--space-2) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: calc(100% - 2 * var(--space-4));
  max-width: calc(430px - 2 * var(--space-4));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--tarjeta);
  color: var(--texto);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.unlock-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
.unlock-toast p {
  margin: 0;
}
.unlock-toast-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

/* Animación de crecimiento */
.growth-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: rgba(15, 22, 34, 0.74);
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: var(--space-5);
}
.growth-overlay.is-shown {
  opacity: 1;
}

.growth-stage {
  position: relative;
  width: 200px;
}
.growth-stage .companion-view {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}
.growth-halo {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 140, 0.55) 0%, rgba(255, 211, 140, 0) 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.growth-stage.growth-shaking .growth-halo,
.growth-stage.growth-revealed .growth-halo {
  opacity: 1;
}
.growth-stage.growth-shaking {
  animation: growth-shake 0.5s ease-in-out infinite;
}
.growth-overlay.growth-flashing::after {
  content: '';
  position: fixed;
  inset: 0;
  background: #fff;
  animation: growth-flash 0.3s ease-out;
}
.growth-stage.growth-revealed {
  animation: growth-bounce 0.5s ease-out;
}
.growth-stage.growth-sparkling::before,
.growth-stage.growth-sparkling::after {
  content: '✦';
  position: absolute;
  color: var(--ayuda);
  font-size: 1.4rem;
  animation: growth-sparkle 1.1s ease-out;
}
.growth-stage.growth-sparkling::before {
  top: -4%;
  left: -10%;
}
.growth-stage.growth-sparkling::after {
  bottom: 8%;
  right: -12%;
  animation-delay: 0.15s;
}

@keyframes growth-shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(2deg);
  }
}
@keyframes growth-flash {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes growth-bounce {
  0% {
    transform: scale(0.85);
  }
  55% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes growth-sparkle {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform: scale(1) rotate(20deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.6) rotate(40deg);
  }
}

.growth-text {
  text-align: center;
  color: #fff;
  max-width: 320px;
  width: 100%;
}
.growth-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.growth-subtitle {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-4);
}

/* Barra de crecimiento del inicio: ahora es un botón (abre el camino) */
.growth-bar-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  text-align: inherit;
  cursor: pointer;
}