body {
  margin: 0;
  overflow: hidden; /* Hide scrollbars if content overflows */
  font-family: "Inter", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Full viewport height */
  background: linear-gradient(
    to bottom,
    #d9f0ff 0%,
    #eaf8ff 50%,
    #f0faff 100%
  ); /* Sky gradient */
  position: relative;
}

h1,
h2 {
  padding: 0;
  margin: 0 0 10px 0;
}

p {
  padding: 0;
  margin: 3px 0 0 0;
}

.scene-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Push content to the bottom */
  align-items: center;
}

.water-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60%; /* Water takes up 60% of the screen height */
  background: linear-gradient(
    to top,
    #36a2eb,
    #64b5f6
  ); /* Blue water gradient */
  z-index: 1;
  overflow: hidden;
}

/* Styles for the island image */
.center-island-image {
  position: absolute;
  top: 40%; /* Roughly the top of the water section */
  left: 50%;
  transform: translate(
    -50%,
    -50%
  ); /* Center horizontally and adjust vertically */
  width: 250px; /* Base width for the island image */
  height: auto;
  z-index: 2; /* Ensure it's above water */
  animation: float 3s ease-in-out infinite; /* Keep the floating animation */
  cursor: pointer; /* Indicate clickable */
}

/* Re-using the 'float' animation for vertical bounce */
@keyframes float {
  0% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
}

/* Styles for the floating bottles */
.floating-bottle {
  position: absolute;
  z-index: 1; /* Ensure bottles are above water but below island */
  height: auto; /* Height will scale proportionally with width */
  pointer-events: auto; /* Allow clicks on bottles */
  cursor: pointer; /* Indicate clickable */
  transform-origin: center center; /* Ensure scaling is from the center */
  opacity: 0;
  transition: opacity 0.8s ease;
}

.floating-bottle.loaded {
  opacity: 1;
}

/* Keyframes for varied floating movements */
@keyframes floatBottleRight {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) translateX(10px) rotate(2deg);
  }
  50% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  75% {
    transform: translateY(5px) translateX(10px) rotate(-2deg);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
}

@keyframes floatBottleLeft {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) translateX(-10px) rotate(-2deg);
  }
  50% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  75% {
    transform: translateY(5px) translateX(-10px) rotate(2deg);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
}

/* Dynamic Message Bubble Styles (for clicked bottles) */
.dynamic-message-bubble {
  position: absolute;
  background-color: white;
  padding: 10px 15px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  color: #333;
  width: 180px;
  text-align: center;
  z-index: 11; /* Ensure it's above everything else */
  opacity: 0; /* Start hidden */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transform: translateY(10px); /* Slight initial offset for animation */
  pointer-events: auto; /* ✅ Ensure interactions */
}


.dynamic-message-bubble-close {
  color: red;
  position: absolute;
  top: -15px;
  right: -15px;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
}

.dynamic-message-bubble.show {
  opacity: 1;
  transform: translateY(0px);
}

.dynamic-message-bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: white transparent transparent transparent;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

/* Styles for the clouds container */
.cloud-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  overflow: hidden;
  z-index: 0;
}

/* Styles for the floating clouds */
.floating-cloud {
  position: absolute;
  z-index: 0; /* Behind water and island */
  height: auto;
  pointer-events: none;
  /* Clouds will now use the 'float' animation for vertical bounce */
}

/* Island Popup Styles */
.island-popup {
  position: absolute;
  background-color: #fff;
  padding: 10px 15px; /* Smaller padding */
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  color: #1e293b;
  font-size: 0.9rem; /* Smaller font size */
  font-weight: 600;
  text-align: center;
  z-index: 11; /* Above other elements */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  pointer-events: none; /* Initially non-interactive */
  max-width: 220px; /* Added max-width for better control */
}

.island-popup.show {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: auto; /* Make interactive when shown */
}

.island-popup::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff; /* Arrow pointing up */
  bottom: -15px; /* Position below the popup */
  left: 50%;
  transform: translateX(-50%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .center-island-image {
    width: 200px; /* Adjust size for smaller screens */
    top: 45%; /* Adjust vertical position */
  }
  .dynamic-message-bubble {
    font-size: 12px;
    max-width: 150px;
  }
  .island-popup {
    font-size: 0.8rem; /* Further adjust for mobile */
    padding: 8px 12px; /* Further adjust for mobile */
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  .center-island-image {
    width: 170px; /* Further adjust size for very small screens */
    top: 50%; /* Adjust vertical position */
  }
  .island-popup {
    font-size: 0.8rem; /* Even smaller for tiny screens */
    padding: 10px; /* Even smaller for tiny screens */
    max-width: 150px;
  }
}

.modal-overlay {
  display: none;
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal-overlay.show {
  display: flex;
}

.modal-content {
  position: relative;
  background: white;
  padding: 20px;
  border-radius: 30px;
  max-width: 400px;
  width: 85%;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}


.modal-close {
  position: absolute;
  top: -20px;
  right: -15px;
  font-size: 25px;
  font-weight: bold;
  color: red;
  cursor: pointer;
  line-height: 1;
}

.modal-content textarea {
  outline: none;
  border: 2px solid #ffdca4;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  border-radius: 15px;
  box-sizing: border-box;
}

.modal-content textarea:focus,
.modal-content textarea:active {
  border: 2px solid #ffbb45;
}

.modal-content button {
  padding: 10px 20px;
  font-weight: bold;
  background-color: #ae7616;
  color: white;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}
.site-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding: 15px 0;
            background: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
            z-index: 10; /* Above water, below modal */
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9em;
        }
        .site-footer a {
            color: inherit;
            text-decoration: none;
            margin: 0 10px;
            transition: color 0.3s ease;
        }
        .site-footer a:hover {
            color: #fff;
            text-decoration: underline;
        }
    .site-footer {
                font-size: 0.8em;
                padding: 10px 0;
            }
            .site-footer a {
                margin: 0 5px;
            }
        
        .refresh-button-link {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 5;
    cursor: pointer; /* Indicate it's clickable */
    /* No width/height here, let the image class handle it */
}

.refresh-button-icon {
    width: 10vw; /* Responsive width */
    max-width: 50px; /* Max width for larger screens */
    height: auto; /* Maintain aspect ratio */
    opacity: 0.8;
    border-radius: 20%; /* Curved corners */
    transition: transform 0.3s ease-out; /* Smooth transition for rotation */
}

.refresh-button-icon:hover {
    transform: rotate(360deg); /* Rotate 360 degrees on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .refresh-button-link {
        top: 15px;
        right: 15px;
    }
    .refresh-button-icon {
        width: 15vw; /* Slightly larger percentage for tablets */
        max-width: 96px; /* Max width for tablets */
    }
}

@media (max-width: 480px) {
    .refresh-button-link {
        top: 10px;
        right: 10px;
    }
    .refresh-button-icon {
        width: 20vw; /* Even larger percentage for mobile */
        max-width: 64px; /* Max width for mobile */
    }
}