/* Overall page styling */
body {
  margin: 0;
  padding: 0;
  /* Use the updated painted scene as a full‑screen background. The image depicts
     a rustic stone watermill with a flowing river, chestnut and olive trees,
     wheat and beehives, plus a charming wooden sign bearing the name of the mill. */
  background: url('background_new.png') no-repeat center center fixed;
  background-size: cover;
  font-family: sans-serif;
  overflow: hidden; /* prevent scrollbars from appearing */
}

/* Title overlay removed. The painted background now includes the
   "U mulinu di Ponticelli" sign, so an additional overlay is unnecessary. */

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

/* Remove the dedicated water container. Water drops will be appended directly
   to the scene and animated along a diagonal path from the upper left. */
/* No #water-container rules needed */

/* 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 over the painted wheel in the background.
   Adjust the top/left offsets to align the SVG with the illustration. */
#wheel-container {
  position: absolute;
  /* Position the SVG wheel over the painted wheel in the new artwork.
     In the updated scene the mill wheel is located on the right half of
     the composition at mid‑height. These offsets position the animated
     wheel near the wheel depicted in the painting. Adjust as needed. */
  /* Fine‑tune offsets so that the animated wheel sits directly over the painted
     wheel in the background. The values below were chosen by visual testing. */
  top: 53%;
  left: 60%;
  width: 240px;
  height: 240px;
  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;
}