* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
  overflow: hidden;
}

/* Fountain image: contained, centered; element box == visible image (uniform scale),
   so spout fractions map correctly. Kept grayish per the design. */
.fountain {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 96vw;
  max-height: 96vh;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: grayscale(0.15) brightness(0.95);
}

/* Transparent water layer on top of the fountain */
#water {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

/* Auto-fading hint toast */
.hint {
  position: absolute;
  left: 50%; bottom: 6vh;
  transform: translateX(-50%) translateY(8px);
  max-width: 80vw;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #eaf4ff;
  font-size: 0.95rem;
  text-align: center;
  opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
  z-index: 5;
}
.hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Cover / overlay (same pattern as tilt/) */
.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.25rem; padding: 2rem; text-align: center;
  z-index: 10;
}
.overlay[hidden] { display: none; }
.cover { background: rgba(0, 0, 0, 0.35); }
.play-btn {
  font: inherit; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em;
  color: #eaf4ff;
  background: rgba(10, 20, 30, 0.85);
  border: 1.5px solid #5cc8ff;
  border-radius: 999px;
  padding: 1rem 1.75rem;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(92, 200, 255, 0.35);
}
.play-btn:active { transform: translateY(1px); }
.cover-sub {
  margin: 0; font-size: 1rem; color: #cfe6ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  max-width: 18rem; line-height: 1.4;
}