.snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1050;
}

.snowflake {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  animation-name: snowflake-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 10s; /* Adjust duration to taste */
  z-index: 10;
  opacity: 0.8; /* Default opacity */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); /* Subtle glow */
  will-change: transform, opacity;
}
.santa-hat-overlay {
  position: absolute;
  width: 55px;
  height: 55px;
  background-image: url("/resources/images/SantaHat.webp"); /* Use direct path for CSS background */
  background-size: contain;
  background-repeat: no-repeat;
  top: -15px;
  right: -15px;
  z-index: 1000;
}

@keyframes snowflake-fall {
  from {
    transform: translateY(-100%) rotate(0deg); /* Start off-screen */
  }
  to {
    transform: translateY(105vh) rotate(360deg); /* Fall completely out of view */
  }
}

html.in-game .santa-hat-overlay {
  display: none;
}

html.modal-active .santa-hat-overlay {
  display: none;
}

@media (max-width: 768px) {
  .snowflake {
    filter: none;
  }
}