/* =====================================================
   DESIGN TOKENS
   ===================================================== */
:root {
  --font-game: 'Nunito', 'Trebuchet MS', Verdana, sans-serif;

  --color-droplet-glow-soft: rgba(79, 195, 247, 0.65);
  --color-droplet-glow-full: rgba(79, 195, 247, 1);
  --color-object-hover-glow: rgba(79, 195, 247, 0.70);
  --color-pot-glow-soft: rgba(79, 195, 247, 0.75);
  --color-pot-glow-full: rgba(79, 195, 247, 1);
  --color-text-warm: #fff8e7;
  --color-splash-drop: rgba(110, 215, 255, 0.88);

  --duration-scene-fade: 0.62s;
  --duration-hover: 0.20s;
  --duration-sparkle: 0.90s;
  --duration-object-click: 0.34s;
  --duration-fade-out: 1.05s;
  --duration-pot-move: 0.78s;
  --duration-pot-throw: 2.40s;

  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --z-objects: 10;
  --z-droplets: 20;
  --z-pot: 30;
  --z-sparkles: 50;
  --z-splashes: 55;
  --z-overlay: 100;
  --z-logo: 110;
}


/* =====================================================
   GLOBAL RESET & BASE
   ===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0c0600;
  font-family: var(--font-game);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fills the entire window edge-to-edge (no letterboxing). The background
   image uses object-fit: cover + object-position: center bottom, so it
   always fills this box without distortion — but on window shapes very
   different from the art's native ratio, the sides/top get cropped more
   aggressively. The ground-row percentages are anchored to the bottom
   edge, which stays stable under center-bottom cropping, so object
   alignment holds up well even as width crops in or out. */
#game-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0c0600;
}


/* =====================================================
   SCENE MANAGEMENT
   ===================================================== */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scene-hidden {
  display: none;
}

.scene-active {
  display: block;
  animation: scene-fade-in var(--duration-scene-fade) ease forwards;
}

.scene-fading-out {
  animation: scene-fade-out var(--duration-scene-fade) ease forwards !important;
}

.scene-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}


/* =====================================================
   SCENE 1 — TITLE SCREEN
   ===================================================== */
#logo-container {
  position: absolute;
  top: clamp(8px, 2vmin, 22px);
  right: clamp(8px, 2vmin, 22px);
  z-index: var(--z-logo);
}

#logo {
  height: clamp(22px, 4.2vmin, 43px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
}

#title-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  z-index: 10;
  animation: title-float 3.6s ease-in-out infinite;
}

#game-title {
  width: min(78vw, 580px);
  height: auto;
  filter:
    drop-shadow(0 6px 28px rgba(255, 200, 50, 0.80)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

#start-button-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

#start-button {
  display: block;
  width: min(46vw, 280px);
  height: auto;
  cursor: pointer;
  animation: button-scale-pulse 2.3s ease-in-out infinite;
  filter: drop-shadow(0 6px 20px rgba(255, 145, 25, 0.60));
  transition: filter var(--duration-hover) ease;
}

#start-button:hover {
  filter: drop-shadow(0 8px 30px rgba(255, 145, 25, 0.95));
}

#start-button:active {
  filter: brightness(0.80) drop-shadow(0 4px 10px rgba(255, 145, 25, 0.40));
}


/* =====================================================
   SCENE 2 — GAMEPLAY
   ===================================================== */
#objects-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-objects);
  pointer-events: none;
}


/* =====================================================
   INTERACTABLE OBJECTS
   ===================================================== */
.interactable-object {
  position: absolute;
  cursor: pointer;
  pointer-events: all;
  transform-origin: bottom center;
  /* Center the object on its left% coordinate instead of using it as the
     left edge — without this, wide images extend past their column slot
     and collide with neighboring objects. */
  transform: translateX(-50%);
  transition:
    transform var(--duration-hover) var(--easing-out-soft),
    filter var(--duration-hover) ease;
}

.interactable-object:hover {
  /* translateX(-50%) must be repeated in every transform declaration below,
     otherwise the object jumps sideways when the scale/translateY kicks in. */
  transform: translateX(-50%) scale(1.10) translateY(-8px);
  filter:
    drop-shadow(0 0 14px var(--color-object-hover-glow)) drop-shadow(0 0 28px rgba(79, 195, 247, 0.30));
}

.interactable-object:active {
  transform: translateX(-50%) scale(0.93) translateY(-2px);
}

.interactable-object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.interactable-object.interacted {
  cursor: default;
  pointer-events: none;
}

.interactable-object.interacted:hover {
  transform: translateX(-50%);
  filter: none;
}

.interactable-object.click-feedback {
  animation: object-tap-bounce var(--duration-object-click) var(--easing-spring);
}

.interactable-object.fading-out {
  animation: element-fade-out var(--duration-fade-out) ease forwards;
  pointer-events: none !important;
}


/* =====================================================
   WATER DROPLET
   ===================================================== */
.water-droplet {
  position: absolute;
  z-index: var(--z-droplets);
  cursor: pointer;
  filter: drop-shadow(0 0 9px var(--color-droplet-glow-soft));
  transition:
    filter var(--duration-hover) ease,
    transform var(--duration-hover) var(--easing-spring);
}

.water-droplet:hover {
  filter:
    drop-shadow(0 0 20px var(--color-droplet-glow-full)) drop-shadow(0 0 38px rgba(79, 195, 247, 0.45));
  transform: scale(1.22);
}

.water-droplet:active {
  transform: scale(1.10);
}

.water-droplet-inner {
  animation: droplet-idle-float 2.5s ease-in-out infinite;
}

.water-droplet img {
  display: block;
  width: clamp(40px, 7vmin, 76px);
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* Collection sequence: vanish at the spot it was tapped, then it gets
   repositioned in JS to hover above the pot, then falls straight in. */
.water-droplet.vanish-at-source {
  animation: droplet-vanish 0.26s ease forwards;
  pointer-events: none;
}

.water-droplet.waiting-above-pot {
  animation: droplet-appear-above-pot 0.25s var(--easing-spring);
  pointer-events: none;
}

.water-droplet.dropping-into-pot {
  animation: droplet-fall-into-pot 0.36s cubic-bezier(0.55, 0, 1, 0.45) forwards;
  pointer-events: none;
}


/* =====================================================
   SPARKLE EFFECT
   ===================================================== */
.sparkle-effect {
  position: absolute;
  width: clamp(60px, 12vmin, 124px);
  height: auto;
  pointer-events: none;
  z-index: var(--z-sparkles);
  transform: translate(-50%, -50%);
  animation: sparkle-pop var(--duration-sparkle) ease forwards;
}


/* =====================================================
   WATER SPLASH DROPS (pot throw / large-pour effect)
   ===================================================== */
.water-splash-drop {
  position: absolute;
  width: 13px;
  height: 16px;
  background: radial-gradient(ellipse at 38% 28%, rgba(215, 245, 255, 0.95), var(--color-splash-drop));
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  pointer-events: none;
  z-index: var(--z-splashes);
  transform: translate(-50%, -50%);
  animation: water-splash-fly 0.85s ease-out forwards;
}


/* =====================================================
   LARGE POUR DROPLET (falls from the tipped pot to the ground)
   ===================================================== */
.large-pour-droplet {
  position: absolute;
  width: clamp(72px, 13vmin, 140px);
  height: auto;
  z-index: var(--z-droplets);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: large-droplet-pour 0.52s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}


/* =====================================================
   POT
   ===================================================== */
#pot-container {
  position: absolute;
  bottom: 3%;
  right: 3%;
  z-index: var(--z-pot);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vmin, 12px);
  pointer-events: none;
}

/* Glides the whole pot group from its corner spot to the center of the
   screen once all droplets are collected. --pot-move-x/y are set from JS
   as the pixel delta between the container's current center and the
   viewport's center, so this works regardless of window size. */
#pot-container.pot-centered {
  animation: pot-move-to-center var(--duration-pot-move) var(--easing-out-soft) forwards;
}

#tap-pot-prompt {
  color: var(--color-text-warm);
  font-size: clamp(13px, 2.8vmin, 24px);
  font-weight: 900;
  text-align: center;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: clamp(4px, 1vmin, 8px) clamp(10px, 2vmin, 18px);
  border-radius: 30px;
  white-space: nowrap;
  animation: prompt-bounce 1.3s ease-in-out infinite;
  pointer-events: none;
}

/* Top-center banner shown at the start of the gameplay scene so a first-time
   player (or a teacher demoing it) immediately knows what to do. It fades
   out on its own the moment the child taps their first object — see
   Game.dismissSearchInstruction() in script.js — rather than sitting on
   screen and getting in the way once they've got the idea. */
.top-instruction-banner {
  position: absolute;
  top: clamp(10px, 3vmin, 26px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  color: var(--color-text-warm);
  font-size: clamp(14px, 2.6vmin, 22px);
  font-weight: 900;
  text-align: center;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: clamp(8px, 1.6vmin, 14px) clamp(16px, 3vmin, 28px);
  border-radius: 30px;
  max-width: min(88vw, 640px);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.top-instruction-banner.instruction-fading-out {
  opacity: 0;
}

#pot {
  cursor: default;
  pointer-events: all;
  transform-origin: bottom center;
}

#pot-image {
  display: block;
  width: clamp(82px, 16vmin, 192px);
  height: auto;
  user-select: none;
  pointer-events: none;
}

#pot.pot-glowing {
  cursor: pointer;
}

#pot.pot-glowing #pot-image {
  animation: pot-glow-pulse 1.7s ease-in-out infinite;
}

/* Tips the pot in place (rotating around its base) to pour, rather than
   throwing it off screen — it now lives center-stage, so it should stay
   put and just tilt. */
#pot.pot-throwing {
  animation: pot-throw var(--duration-pot-throw) var(--easing-out-soft) forwards;
  cursor: default;
  pointer-events: none;
}

#pot.pot-drop-landed #pot-image {
  animation: pot-drop-bounce 0.36s var(--easing-spring);
}


/* =====================================================
   ENDING OVERLAY
   ===================================================== */
#ending-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
}

/* Same full-bleed cover-crop pattern as .scene-background — fills the
   overlay edge-to-edge without distortion, replacing what used to be a
   flat dark tint over the gameplay scene. */
.ending-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

#ending-overlay.overlay-visible {
  animation: overlay-fade-in 1.1s ease forwards;
}

#ending-overlay.overlay-fading-out {
  animation: overlay-fade-out 0.50s ease forwards !important;
}

#ending-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 5vmin, 58px);
  padding: clamp(20px, 4vmin, 50px);
  text-align: center;
  max-width: min(88vw, 600px);
}

#ending-message {
  color: var(--color-text-warm);
  font-size: clamp(20px, 4.5vmin, 44px);
  font-weight: 900;
  line-height: 1.70;
  letter-spacing: 0.01em;
  text-shadow:
    0 0 16px rgba(255, 215, 110, 0.95),
    0 0 34px rgba(255, 170, 40, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 1px 0 rgba(0, 0, 0, 0.70);
}



/* =====================================================
   UTILITY
   ===================================================== */
.hidden {
  display: none !important;
}


/* =====================================================
   KEYFRAME ANIMATIONS
   ===================================================== */

@keyframes scene-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scene-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes title-float {

  0%,
  100% {
    transform: translate(-50%, -58%);
  }

  50% {
    transform: translate(-50%, -65%);
  }
}

@keyframes button-scale-pulse {

  0%,
  100% {
    transform: scale(1.000);
  }

  50% {
    transform: scale(1.070);
  }
}

@keyframes object-tap-bounce {
  0% {
    transform: translateX(-50%) scale(1) translateY(0);
  }

  40% {
    transform: translateX(-50%) scale(0.87) translateY(5px);
  }

  100% {
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

@keyframes element-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes droplet-idle-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes droplet-vanish {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.2);
    opacity: 0;
  }
}

@keyframes droplet-appear-above-pot {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes droplet-fall-into-pot {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  80% {
    transform: translateY(var(--fall-distance)) scale(0.85);
    opacity: 1;
  }

  100% {
    transform: translateY(var(--fall-distance)) scale(0.3);
    opacity: 0;
  }
}

@keyframes sparkle-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.0);
    opacity: 1;
  }

  55% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.3);
    opacity: 0;
  }
}

@keyframes water-splash-fly {
  0% {
    transform: translate(-50%, -50%) translate(0px, 0px) scale(1);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) translate(var(--splash-target-x), var(--splash-target-y)) scale(0.15);
    opacity: 0;
  }
}

@keyframes large-droplet-pour {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  80% {
    transform: translate(-50%, calc(-50% + (var(--pour-fall-distance) * 0.9))) scale(0.85);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, calc(-50% + var(--pour-fall-distance))) scale(0.55);
    opacity: 0.9;
  }
}

@keyframes pot-glow-pulse {

  0%,
  100% {
    filter:
      drop-shadow(0 0 12px var(--color-pot-glow-soft)) drop-shadow(0 0 24px rgba(79, 195, 247, 0.38));
  }

  50% {
    filter:
      drop-shadow(0 0 26px var(--color-pot-glow-full)) drop-shadow(0 0 52px rgba(79, 195, 247, 0.72));
  }
}

@keyframes pot-drop-bounce {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.08) translateY(-4px);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pot-move-to-center {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(var(--pot-move-x), var(--pot-move-y)) scale(1.15);
  }
}

@keyframes pot-throw {
  0% {
    transform: rotate(0deg) translateY(0);
  }

  35% {
    transform: rotate(-18deg) translateY(-6px);
  }

  60% {
    transform: rotate(-38deg) translateY(-4px);
  }

  100% {
    transform: rotate(-42deg) translateY(-2px);
  }
}

@keyframes prompt-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes overlay-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes overlay-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 480px) {
  #start-button {
    width: min(68vw, 260px);
  }

  #game-title {
    width: min(90vw, 420px);
  }

  #replay-button {
    font-size: clamp(15px, 4vw, 22px);
    padding: 14px 36px;
  }
}

@media (hover: none) {
  .interactable-object:hover {
    transform: translateX(-50%);
    filter: none;
  }

  .interactable-object:active {
    transform: translateX(-50%) scale(0.92);
    filter: drop-shadow(0 0 14px var(--color-object-hover-glow));
  }

  .water-droplet:hover {
    transform: none;
    filter: drop-shadow(0 0 9px var(--color-droplet-glow-soft));
  }

  .water-droplet:active {
    transform: scale(1.18);
    filter: drop-shadow(0 0 20px var(--color-droplet-glow-full));
  }
}