:root {
  --bg-top: #ffe9f3;
  --bg-bottom: #c7e7ff;
  --moon: #fff7d9;
  --moon-shadow: #ffe0b3;
  --star: #fff8cc;
  --cloud: #ffffff;
  --ground-top: #b2f2bb;
  --ground-bottom: #69db7c;
  --bunny: #ffffff;
  --bunny-inner: #ffe3ec;
  --face-dark: #442233;
  --cheek: #ffb3c6;
  --heart: #ff6b9c;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Scene container */
.scene {
  position: relative;
  width: 360px;
  height: 640px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

/* Sky and stars */
.sky {
  position: absolute;
  inset: 0 0 40%;
  background: radial-gradient(circle at 20% 0%, #ffffff88, transparent 55%);
}

.star {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--star);
  border-radius: 50%;
  box-shadow: 0 0 8px #fff8cc;
  animation: twinkle 2.6s infinite ease-in-out alternate;
}

.star-1 { top: 40px; left: 40px; animation-delay: 0s; }
.star-2 { top: 80px; right: 60px; animation-delay: 0.4s; }
.star-3 { top: 140px; left: 100px; animation-delay: 0.8s; }
.star-4 { top: 50px; right: 140px; animation-delay: 1.2s; }
.star-5 { top: 120px; right: 20px; animation-delay: 1.6s; }

/* Moon */
.moon {
  position: absolute;
  top: 80px;
  left: 50%;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  animation: float 4s ease-in-out infinite;
}

.moon-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--moon));
  box-shadow: -10px 10px 0 var(--moon-shadow);
}

.moon-face {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Moon eyes and cheeks */
.eye {
  position: absolute;
  top: 60px;
  width: 20px;
  height: 20px;
  background: var(--face-dark);
  border-radius: 50%;
  box-shadow: 0 0 0 3px #ffffff55;
}

.eye::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
}

.eye-left { left: 40px; }
.eye-right { right: 40px; }

.cheek {
  position: absolute;
  top: 86px;
  width: 22px;
  height: 14px;
  background: var(--cheek);
  border-radius: 50%;
  opacity: 0.8;
}

.cheek-left { left: 26px; }
.cheek-right { right: 26px; }

/* Moon mouth */
.mouth {
  position: absolute;
  top: 88px;
  left: 50%;
  width: 40px;
  height: 24px;
  margin-left: -20px;
  border-radius: 0 0 40px 40px;
  border: 3px solid var(--face-dark);
  border-top: 0;
  background: radial-gradient(circle at 50% 120%, #ff8fab, #ffccd5 70%);
}

/* Clouds */
.cloud {
  position: absolute;
  bottom: 48%;
  width: 120px;
  height: 50px;
  background: var(--cloud);
  border-radius: 40px;
  box-shadow:
    20px -14px 0 var(--cloud),
    46px 0 0 var(--cloud),
    70px -10px 0 var(--cloud);
  opacity: 0.92;
  animation: cloud-drift 18s linear infinite;
}

.cloud-1 { left: -60px; bottom: 52%; animation-duration: 22s; }
.cloud-2 { left: 40%; bottom: 50%; animation-duration: 26s; animation-delay: -6s; }
.cloud-3 { left: 70%; bottom: 55%; animation-duration: 20s; animation-delay: -12s; }

/* Ground and hills */
.ground {
  position: absolute;
  inset: 65% 0 0 0;
  background: linear-gradient(to top, var(--ground-bottom), var(--ground-top));
}

.hill {
  position: absolute;
  bottom: -40px;
  width: 220px;
  height: 140px;
  background: linear-gradient(to top, #69db7c, #d8f5a2);
  border-radius: 50%;
}

.hill-left { left: -40px; }
.hill-right { right: -40px; }

/* Bunny */
.bunny {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 90px;
  height: 120px;
  margin-left: -45px;
  animation: bunny-hop 1.8s ease-in-out infinite;
}

.bunny-ears {
  position: absolute;
  top: -54px;
  left: 50%;
  width: 70px;
  height: 60px;
  margin-left: -35px;
}

.ear {
  position: absolute;
  bottom: 0;
  width: 24px;
  height: 54px;
  border-radius: 20px;
  background: var(--bunny);
  box-shadow: 0 0 0 2px #ffffff99;
}

.ear::after {
  content: "";
  position: absolute;
  inset: 6px 5px;
  border-radius: 18px;
  background: var(--bunny-inner);
}

.ear-left { left: 4px; transform: rotate(-5deg); }
.ear-right { right: 4px; transform: rotate(5deg); }

.bunny-face {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 80px;
  margin-left: -45px;
  border-radius: 36px;
  background: var(--bunny);
  box-shadow: 0 6px 0 #ffffff66;
}

/* Bunny face details */
.b-eye {
  position: absolute;
  top: 26px;
  width: 10px;
  height: 10px;
  background: var(--face-dark);
  border-radius: 50%;
}

.b-eye::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
}

.b-eye-left { left: 26px; }
.b-eye-right { right: 26px; }

.b-cheek {
  position: absolute;
  top: 38px;
  width: 14px;
  height: 10px;
  background: var(--cheek);
  border-radius: 50%;
  opacity: 0.9;
}

.b-cheek-left { left: 16px; }
.b-cheek-right { right: 16px; }

.b-mouth {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 24px;
  height: 18px;
  margin-left: -12px;
  border-radius: 0 0 24px 24px;
  border: 2px solid var(--face-dark);
  border-top: 0;
  background: #ffe3ec;
}

/* Floating hearts container */
.hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Reusable heart shape */
.heart {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--heart);
  transform: rotate(-45deg);
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--heart);
  border-radius: 50%;
}

.heart::before { top: -8px; left: 0; }
.heart::after { left: 8px; top: 0; }

/* Animations */
@keyframes twinkle {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(140%); }
}

@keyframes bunny-hop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-10px); }
  60%      { transform: translateY(-4px); }
}

/* Hearts animation set by inline style from JS:
   animation: heart-float 5s linear forwards; */
@keyframes heart-float {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translateY(-160px) scale(1.2);
    opacity: 0;
  }
}