body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: url("https://assets.codepen.io/11990995/dark-forest-02.jpg")
    center/cover no-repeat;
  font-family: "Cinzel", serif;
}

/* TITLE */
.title {
  position: fixed;
  top: 100px;
  width: 100%;
  text-align: center;
  font-size: 48px;
  color: #d6e8ff;
  text-shadow: 0 0 12px #6fb8ff;
  letter-spacing: 1px;
  z-index: 30;
}

/* MUSIC BUTTON */
.music-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  font-size: 20px;
  cursor: pointer;
  color: white;
  z-index: 40;
}
.portal-wrapper {
  position: fixed;
  top: 70%; /* Center vertically */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  z-index: 10;
}

#snowCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* ABOVE background, BELOW portal & pudgy */
}

@keyframes fall {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(100px);
  }
}

/* Portal outer ring */
.portal {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(120, 180, 255, 0.65);
  box-shadow: 0 0 25px rgba(140, 210, 255, 0.8),
    0 0 55px rgba(90, 140, 255, 0.6);
  animation: spin 18s linear infinite;
}

/* Portal inner world */
.portal-inner {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: url("https://assets.codepen.io/11990995/definition_of_altophobia_-_the_fear_of_heights-dailyphobia%281%29.jpg")
    center/cover no-repeat;
  filter: brightness(1.3) saturate(1.2) blur(0.5px);
  box-shadow: inset 0 0 25px rgba(150, 200, 255, 0.75);
}

/* PORTAL SPIN */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* PUDGY WALKING TOWARD VIEWER */
.pudgy {
  position: fixed;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%) scale(0.4);
  opacity: 0;
  z-index: 20;
  animation: walkTowards 10s ease-in-out infinite;
}

@keyframes walkTowards {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(60px) scale(0.4);
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(0) scale(0.9);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(40px) scale(1.1);
  }
}

/* SNOW ONLY IN FOREST */
.snow {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background-image: radial-gradient(white 1px, transparent 1px),
    radial-gradient(white 2px, transparent 2px),
    radial-gradient(white 1px, transparent 1px);
  background-size: 4px 4px, 6px 6px, 3px 3px;
  animation: snowfall 12s linear infinite;
  opacity: 0.7;
}

@keyframes snowfall {
  from {
    transform: translateY(-40px);
  }
  to {
    transform: translateY(40px);
  }
}

/* ----- MOBILE FIX FOR PORTAL + PUDGY ----- */
@media (max-height: 700px), (max-width: 600px) {
  .portal-wrapper {
    top: 60%; /* lower the whole portal */
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
  }

  .pudgy {
    bottom: -80px; /* lift pudgy so he doesn't disappear */
    transform: translateX(-50%) scale(0.32);
  }

  .title {
    top: 10px;
    font-size: 18px;
  }
}