/* Overall page styling */
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #e0f7fa, #b2ebf2);
  font-family: sans-serif;
  overflow: hidden; /* prevent scrollbars from appearing */
}

/* Scene container covers the full viewport */
#scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Water stream container: holds animated droplets */
/* The water originates from the top‑left of the screen and flows down toward the wheel. */
#water-container {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 120%;
  overflow: hidden;
  pointer-events: none;
}

/* Each droplet is styled via JS; base style here */
/* Each water drop: elongated shape with light blue colour */
.water-drop {
  position: absolute;
  /* Slightly smaller, brighter droplets for better contrast against the background */
  width: 8px;
  height: 20px;
  background: rgba(0, 191, 255, 0.85);
  border-radius: 50%;
}

/* Wheel container positioned so that water drips fall onto the paddles. */
#wheel-container {
  position: absolute;
  top: 55%;
  left: 65%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Icon container for spawning emojis */
#icon-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Individual icon style (emoji) */
.spawn-icon {
  position: absolute;
  font-size: 24px;
  will-change: transform, opacity;
  pointer-events: none;
}