.valley-screen {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.valley-screen__hint {
  margin: -8px 0 14px;
  text-align: center;
  font-size: 1.1rem;
}

.valley {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-large);
  background:
    radial-gradient(ellipse at 70% 92%, #4fc3f7 0 16%, transparent 17%),
    linear-gradient(#b3e5fc 0 30%, #aed581 30% 100%);
  box-shadow: var(--shadow-card);
}

.valley__spot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 260px;
  padding: 10px 8px 12px;
  overflow: hidden;
  border: 4px solid transparent;
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.55);
  font: inherit;
  color: inherit;
}

.valley__spot--active {
  border-color: var(--color-gold);
  background: rgba(255, 253, 231, 0.85);
}

.valley__spot--locked {
  justify-content: center;
}

.valley__silhouette {
  max-width: 160px;
  filter: brightness(0) opacity(0.2);
}

.valley__question {
  position: absolute;
  top: 40%;
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.35);
}

.valley__spot--egg .dino {
  max-width: 150px;
  animation: care-pulse 1.4s ease-in-out infinite;
}

.valley__hint {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.valley__walker {
  width: 100%;
  max-width: 170px;
  animation: valley-walk 8s ease-in-out infinite;
}

.valley__walker--stroll {
  animation-name: valley-stroll;
}

.valley__walker--hop {
  animation-name: valley-hop;
}

.valley__walker--graze {
  animation-name: valley-graze;
}

.valley__walker--fly {
  animation-name: valley-fly;
}

.valley__walker--glide {
  animation-name: valley-glide;
}

.valley__name {
  font-size: 1.3rem;
  font-weight: 700;
}

.valley__info {
  color: var(--color-muted);
}

.valley__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.valley__star {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
}

.valley__active {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-gold);
  font-size: 0.9rem;
  font-weight: 700;
}

.valley .care-bars {
  min-width: 0;
  width: 80%;
}

.valley--celebrating .dino {
  animation: dino-cheer 0.8s ease-out 4;
}

@keyframes valley-walk {
  0%, 100% {
    transform: translateX(-12%) scaleX(1);
  }

  45% {
    transform: translateX(12%) scaleX(1);
  }

  50% {
    transform: translateX(12%) scaleX(-1);
  }

  95% {
    transform: translateX(-12%) scaleX(-1);
  }
}

@keyframes valley-stroll {
  0%, 100% {
    transform: translateX(-14%) scaleX(1);
  }

  20%, 30% {
    transform: translateX(0) scaleX(1);
  }

  33%, 40% {
    transform: translateX(0) scaleX(-1);
  }

  43% {
    transform: translateX(0) scaleX(1);
  }

  60% {
    transform: translateX(14%) scaleX(1);
  }

  64%, 70% {
    transform: translateX(14%) scaleX(-1);
  }

  95% {
    transform: translateX(-14%) scaleX(-1);
  }
}

@keyframes valley-hop {
  0%, 100% {
    transform: translate(-10%, 0) scaleX(1);
  }

  8% {
    transform: translate(-6%, -10%) scaleX(1);
  }

  16% {
    transform: translate(-2%, 0) scaleX(1);
  }

  24% {
    transform: translate(2%, -10%) scaleX(1);
  }

  32% {
    transform: translate(6%, 0) scaleX(1);
  }

  40%, 48% {
    transform: translate(10%, 0) scaleX(1);
  }

  50% {
    transform: translate(10%, 0) scaleX(-1);
  }

  62% {
    transform: translate(4%, -12%) scaleX(-1);
  }

  74% {
    transform: translate(-2%, 0) scaleX(-1);
  }

  86%, 98% {
    transform: translate(-10%, 0) scaleX(-1);
  }
}

@keyframes valley-graze {
  0%, 100% {
    transform: translateX(-4%) rotate(0) scaleX(1);
  }

  15%, 35% {
    transform: translateX(2%) rotate(4deg) scaleX(1);
  }

  45% {
    transform: translateX(4%) rotate(0) scaleX(1);
  }

  50%, 60% {
    transform: translateX(4%) rotate(0) scaleX(-1);
  }

  70%, 90% {
    transform: translateX(-2%) rotate(-4deg) scaleX(-1);
  }

  95% {
    transform: translateX(-4%) rotate(0) scaleX(-1);
  }
}

@keyframes valley-glide {
  0%, 100% {
    transform: translate(-14%, -6%) rotate(-4deg);
  }

  30% {
    transform: translate(6%, -16%) rotate(4deg);
  }

  50% {
    transform: translate(14%, 2%) rotate(6deg);
  }

  80% {
    transform: translate(-4%, 6%) rotate(-6deg);
  }
}

@keyframes valley-fly {
  0%, 100% {
    transform: translate(-12%, 0);
  }

  25% {
    transform: translate(0, -18%);
  }

  50% {
    transform: translate(12%, 0);
  }

  75% {
    transform: translate(0, 8%);
  }
}

@media (max-width: 800px) {
  .valley {
    grid-template-columns: repeat(2, 1fr);
  }
}