body {
  background: #aee6ff;
}

.stage {
  background: linear-gradient(180deg, #8fdcff 0%, #c4efff 45%, #e8fbff 100%);
  --ground-y: 75%;
}

/* ---------- scenery ---------- */
.sun {
  position: absolute;
  right: 6vmin;
  top: 5vmin;
  width: 16vmin;
  height: 16vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff3a8, #ffd23f 70%);
  box-shadow: 0 0 0 2.5vmin rgba(255, 255, 255, 0.35), 0 0 4vmin 5vmin rgba(255, 250, 220, 0.35);
  pointer-events: none;
}

.cloud {
  position: absolute;
  width: 22vmin;
  height: 7vmin;
  border-radius: 7vmin;
  background: #fff;
  opacity: 0.9;
  pointer-events: none;
  animation: drift 38s linear infinite;
}
.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before {
  width: 9vmin;
  height: 9vmin;
  left: 3vmin;
  top: -4.5vmin;
}
.cloud::after {
  width: 11vmin;
  height: 11vmin;
  left: 9vmin;
  top: -6vmin;
}
.cloud.c1 {
  top: 13vmin;
  left: -25vmin;
}
.cloud.c2 {
  top: 26vmin;
  left: -25vmin;
  transform: scale(0.7);
  animation-duration: 55s;
  animation-delay: -30s;
  opacity: 0.75;
}
@keyframes drift {
  from {
    translate: 0 0;
  }
  to {
    translate: calc(100vw + 50vmin) 0;
  }
}

.hill {
  position: absolute;
  left: -30%;
  right: -30%;
  top: var(--ground-y);
  bottom: -40%;
  border-radius: 50% 50% 0 0 / 22vmin 22vmin 0 0;
  background: linear-gradient(180deg, #8fe38a 0%, #6fd371 40%, #5cc466 100%);
  box-shadow: inset 0 1.2vmin 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.flowers span {
  position: absolute;
  translate: -50% -100%;
  pointer-events: none;
  line-height: 1;
}

/* ---------- monster ---------- */
#monster {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  cursor: pointer;
}
#monster .m-react,
#monster .m-breathe {
  width: 100%;
  height: 100%;
  transform-origin: 50% 92%;
}
#monster .m-breathe {
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.03, 1.025);
  }
}
.m-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.m-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -3%;
  height: 9%;
  border-radius: 50%;
  background: rgba(40, 90, 40, 0.22);
}

.m-svg .horns path {
  fill: #ffd23f;
  stroke: #ffd23f;
  stroke-width: 12;
  stroke-linejoin: round;
}
.m-svg .horns .horn-tip {
  fill: #ff8ec2;
  stroke: #ff8ec2;
  stroke-width: 4;
}
.m-svg .arm ellipse,
.m-svg .feet ellipse {
  fill: #7d4fe6;
}
.m-svg .toe {
  fill: #a47dff;
}
.m-svg .body {
  fill: #9b6bff;
}
.m-svg .fuzz {
  fill: none;
  stroke: #9b6bff;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 0.1 11.5;
}
.m-svg .belly {
  fill: #b996ff;
}
.m-svg .spot {
  fill: #b996ff;
}
.m-svg .cheek {
  fill: #ff8ec2;
  opacity: 0.85;
}
.m-svg .eye .white {
  fill: #fff;
  stroke: #6b3fd4;
  stroke-width: 3;
}
.m-svg .pupil circle {
  fill: #2b1d4a;
}
.m-svg .pupil .shine {
  fill: #fff;
}
.m-svg .grin,
.m-svg .hole {
  fill: #5a1a4f;
}
.m-svg .grin-tongue,
.m-svg .tongue {
  fill: #ff6f9f;
}
.m-svg .tooth {
  fill: #fff;
}

/* transform helpers for SVG parts */
.m-svg .eye,
.m-svg .cheek,
.m-svg .mouth-open,
.m-svg .mouth-closed,
.m-svg .arm {
  transform-box: fill-box;
  transform-origin: center;
}
.m-svg .arm-l {
  transform-origin: 80% 20%;
}
.m-svg .arm-r {
  transform-origin: 20% 20%;
}
.m-svg .mouth-open {
  transform-origin: 50% 30%;
}

.m-svg .mouth-open,
.m-svg .mouth-closed {
  transition: transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.1s;
}
#monster[data-mouth="closed"] .mouth-open {
  opacity: 0;
  transform: scale(0.4, 0.2);
}
#monster[data-mouth="open"] .mouth-closed,
#monster[data-mouth="chomp"] .mouth-closed {
  opacity: 0;
}
#monster[data-mouth="chomp"] .mouth-open {
  animation: chomp 0.28s ease-in-out 3;
}
@keyframes chomp {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.08, 0.12);
  }
}
#monster[data-mouth="chomp"] .cheek {
  animation: puff 0.84s ease-in-out;
}
@keyframes puff {
  0%,
  100% {
    transform: scale(1);
  }
  25%,
  75% {
    transform: scale(1.5, 1.4);
  }
  50% {
    transform: scale(1.3);
  }
}

#monster.happy .arm-l {
  animation: rub-l 0.5s ease-in-out 3;
}
#monster.happy .arm-r {
  animation: rub-r 0.5s ease-in-out 3;
}
@keyframes rub-l {
  50% {
    transform: rotate(-40deg) translate(12px, 4px);
  }
}
@keyframes rub-r {
  50% {
    transform: rotate(40deg) translate(-12px, 4px);
  }
}

/* ---------- plates & food ---------- */
.plate {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 56%, var(--rim, #ffd6e6) 57% 100%);
  box-shadow: 0 0.6vmin 0 rgba(0, 0, 0, 0.08), 0 1.2vmin 2vmin rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 3;
}

.food {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  border-radius: 50%;
  will-change: transform;
  touch-action: none;
}
.food.dragging {
  z-index: 20;
}
.food.flying {
  z-index: 15;
  pointer-events: none;
}
.food .fe {
  display: block;
  line-height: 1;
  transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1);
  filter: drop-shadow(0 0.5vmin 0.4vmin rgba(0, 0, 0, 0.18));
  pointer-events: none;
}
.food.dragging .fe {
  transform: scale(1.2);
  animation: held 0.5s ease-in-out infinite;
  filter: drop-shadow(0 2vmin 1.2vmin rgba(0, 0, 0, 0.22));
}
@keyframes held {
  0%,
  100% {
    rotate: -7deg;
  }
  50% {
    rotate: 7deg;
  }
}
.food.pop-in .fe {
  animation: pop-in 0.55s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes pop-in {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.food.nudge .fe {
  animation: nudge 0.9s ease-in-out;
}
@keyframes nudge {
  0%,
  100% {
    transform: scale(1) rotate(0);
  }
  20% {
    transform: scale(1.15) rotate(-12deg);
  }
  40% {
    transform: scale(1.15) rotate(12deg);
  }
  60% {
    transform: scale(1.15) rotate(-8deg);
  }
  80% {
    transform: scale(1.1) rotate(6deg);
  }
}

/* idle hint: ghost food gliding to the mouth with a pointing hand */
.ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  line-height: 1;
  opacity: 0;
}
.ghost .gf {
  display: block;
  opacity: 0.55;
}
.ghost .hand {
  position: absolute;
  left: 45%;
  top: 55%;
  font-size: 0.6em;
}

.heart {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
  line-height: 1;
  translate: -50% -50%;
}