body {
  background: #5ec8f0;
}

.stage {
  background: linear-gradient(180deg, #c9f6ff 0%, #8fe0f7 30%, #4fb8ec 68%, #2f8fdc 100%);
}

/* ---------- Scenery (decorative only) ---------- */
.scenery {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ray {
  position: absolute;
  top: -20%;
  width: 18vmax;
  height: 140%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  transform-origin: 50% 0;
  filter: blur(6px);
  animation: sway 14s ease-in-out infinite alternate;
}
.ray.r1 { left: 8%; transform: rotate(14deg); }
.ray.r2 { left: 42%; width: 10vmax; transform: rotate(8deg); animation-duration: 18s; animation-delay: -6s; opacity: 0.8; }
.ray.r3 { left: 72%; width: 14vmax; transform: rotate(-6deg); animation-duration: 16s; animation-delay: -3s; opacity: 0.7; }

@keyframes sway {
  from { rotate: -5deg; }
  to { rotate: 5deg; }
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0) 72%);
  animation: drift 22s ease-in-out infinite alternate;
}
.orb.o1 { width: 46vmin; height: 46vmin; left: -12vmin; top: 18%; }
.orb.o2 { width: 32vmin; height: 32vmin; right: -6vmin; top: 46%; animation-duration: 28s; animation-delay: -8s; }
.orb.o3 { width: 22vmin; height: 22vmin; left: 55%; top: 6%; animation-duration: 25s; animation-delay: -14s; }

@keyframes drift {
  from { transform: translate(0, 0); }
  to { transform: translate(4vmin, -6vmin); }
}

.seabed {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: max(12vh, 70px);
}
.sand-back { fill: #f5cd7e; }
.sand { fill: #ffe3a3; }

.weeds {
  position: absolute;
  inset: auto 0 0 0;
  height: 30vh;
}
.weed {
  position: absolute;
  bottom: max(3vh, 18px);
  width: auto;
  height: 22vh;
  min-height: 100px;
  transform-origin: 50% 100%;
  animation: weed 5s ease-in-out infinite alternate;
  opacity: 0.92;
}
.weed path { fill: #2fbf8f; }
.weed.w1 { left: 4%; height: 26vh; min-height: 130px; }
.weed.w2 { left: 11%; height: 17vh; animation-delay: -2s; }
.weed.w2 path { fill: #45d49d; }
.weed.w3 { left: 64%; height: 19vh; animation-delay: -1s; animation-duration: 6s; }
.weed.w4 { left: 86%; height: 28vh; animation-delay: -3s; }
.weed.w4 path { fill: #27a97f; }
.weed.w5 { left: 92%; height: 16vh; animation-delay: -4s; animation-duration: 4.5s; }
.weed.w5 path { fill: #45d49d; }

@keyframes weed {
  from { transform: rotate(-6deg); }
  to { transform: rotate(6deg); }
}

/* ---------- Bubbles ---------- */
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bubble,
.bubble-popping {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--d);
  height: var(--d);
  will-change: transform;
  pointer-events: none;
}

.skin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--c0) 0%, var(--c0) 42%, var(--c1) 72%, var(--c2) 90%, var(--c3) 100%);
  box-shadow:
    inset 0 0 0 max(2px, calc(var(--d) * 0.015)) rgba(255, 255, 255, 0.45),
    inset calc(var(--d) * -0.06) calc(var(--d) * -0.08) calc(var(--d) * 0.12) rgba(255, 255, 255, 0.4),
    0 calc(var(--d) * 0.04) calc(var(--d) * 0.12) rgba(10, 60, 120, 0.18);
  animation: breathe var(--breath, 2.6s) ease-in-out infinite alternate;
  animation-delay: var(--breath-delay, 0s);
}

/* Rainbow sheen around the rim */
.skin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from var(--hue, 0deg), #ff8fd1, #ffe36e, #7dffb5, #6fd6ff, #c49bff, #ff8fd1);
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(circle, transparent 0 60%, #000 86%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 0 60%, #000 86%, transparent 100%);
  mix-blend-mode: screen;
}

/* White highlight crescent + little dot */
.skin::before {
  content: "";
  position: absolute;
  left: 16%;
  top: 13%;
  width: 34%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0) 72%);
  transform: rotate(-38deg);
  z-index: 2;
}
.glint {
  position: absolute;
  right: 22%;
  bottom: 20%;
  width: 11%;
  height: 11%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  z-index: 2;
}

.surprise {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--d) * 0.5);
  line-height: 1;
  z-index: 1;
  animation: peek 3s ease-in-out infinite alternate;
}
@keyframes peek {
  from { transform: rotate(-10deg) translateY(2%); }
  to { transform: rotate(10deg) translateY(-2%); }
}

@keyframes breathe {
  from { transform: scale(0.97, 1.03); }
  to { transform: scale(1.03, 0.97); }
}

.skin.nudge {
  animation: nudge 0.9s ease-in-out infinite alternate;
}
@keyframes nudge {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}

/* ---------- Pop effects ---------- */
.drop {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.08), inset 2px 2px 3px rgba(255, 255, 255, 0.7);
}

.friend {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 6px rgba(0, 40, 90, 0.25));
  z-index: 5;
}

/* ---------- Idle hint ---------- */
.hint {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 64px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 6;
  filter: drop-shadow(0 4px 6px rgba(0, 40, 90, 0.25));
}
.hint.show {
  opacity: 1;
}
.hint span {
  display: block;
  animation: wiggle 0.7s ease-in-out infinite alternate;
}
@keyframes wiggle {
  from { transform: translate(0, 0) rotate(-12deg); }
  to { transform: translate(-8px, -12px) rotate(8deg); }
}