:root {
  --ink: #102c23;
  --deep-green: #173d2c;
  --leaf: #28704b;
  --mint: #8ed49d;
  --cream: #fff7c8;
  --pink: #fa82ba;
  --magenta: #d83c91;
  --violet: #7651c7;
  --blue: #62bde0;
  --red: #d82f4f;
  --pixel: 4px;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--deep-green);
}

.garden {
  position: relative;
  isolation: isolate;
  width: 100vw;
  min-height: 100svh;
  overflow: hidden;
  background: var(--deep-green);
}

.garden::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  border: 8px solid rgba(255, 247, 200, 0.2);
  box-shadow: inset 0 0 0 4px rgba(16, 44, 35, 0.35);
}

.sky-glow {
  position: absolute;
  z-index: 1;
  top: -24vmin;
  left: 50%;
  width: 92vmin;
  height: 60vmin;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(189, 235, 209, 0.46), transparent 67%);
  filter: blur(8px);
  pointer-events: none;
}

.sun-ray {
  --ray-x: 50vw;
  --ray-y: 50vh;
  position: absolute;
  z-index: 3;
  top: -18vh;
  left: var(--ray-x);
  width: clamp(62px, 7.8vw, 122px);
  height: calc(var(--ray-y) + 18vh);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 225, 0.56),
    rgba(255, 247, 200, 0.4) 48%,
    rgba(233, 230, 111, 0.22) 78%,
    transparent
  );
  mix-blend-mode: screen;
  opacity: 0.95;
  filter: drop-shadow(0 0 14px rgba(255, 247, 200, 0.28));
  pointer-events: none;
}

.crab-sun-ray {
  --crab-ray-x: calc(100vw - 75px);
  --crab-ray-y: calc(100vh - 60px);
  position: absolute;
  z-index: 20;
  top: -18vh;
  left: var(--crab-ray-x);
  width: clamp(60px, 7.2vw, 112px);
  height: calc(var(--crab-ray-y) + 18vh);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  clip-path: polygon(43% 0, 57% 0, 88% 100%, 12% 100%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 225, 0.32),
    rgba(255, 247, 200, 0.2) 58%,
    rgba(233, 230, 111, 0.11) 82%,
    transparent
  );
  opacity: 0.72;
  filter: drop-shadow(0 0 12px rgba(255, 247, 200, 0.32));
  pointer-events: none;
}

.ray-target {
  --ray-x: 50vw;
  --ray-y: 50vh;
  position: absolute;
  z-index: 7;
  top: var(--ray-y);
  left: var(--ray-x);
  width: clamp(62px, 7.8vw, 122px);
  height: clamp(62px, 7.8vw, 122px);
  transform: translate(-50%, -50%);
  border: 4px solid rgba(255, 255, 225, 0.72);
  border-radius: 50%;
  background: rgba(255, 247, 200, 0.035);
  box-shadow: 0 0 24px rgba(255, 247, 200, 0.42), inset 0 0 18px rgba(255, 247, 200, 0.12);
  pointer-events: none;
}

.crab-ray-target {
  --crab-ray-x: calc(100vw - 75px);
  --crab-ray-y: calc(100vh - 60px);
  position: absolute;
  z-index: 21;
  top: var(--crab-ray-y);
  left: var(--crab-ray-x);
  width: clamp(68px, 8vw, 112px);
  height: clamp(68px, 8vw, 112px);
  transform: translate(-50%, -50%);
  border: 5px solid rgba(255, 255, 225, 0.92);
  border-radius: 50%;
  background: rgba(255, 247, 200, 0.08);
  box-shadow: 0 0 30px rgba(255, 247, 200, 0.72), inset 0 0 18px rgba(255, 247, 200, 0.18);
  pointer-events: none;
}

.meadow {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.meadow.crab-hover { cursor: pointer; }

.crab-note-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.crab-note {
  position: absolute;
  left: var(--note-x);
  top: var(--note-y);
  color: var(--note-color);
  font: 900 var(--note-size) monospace;
  line-height: 1;
  text-shadow: 3px 3px 0 #172823;
  animation: crab-note-float 1.15s steps(12, end) forwards;
}

@keyframes crab-note-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6) rotate(-8deg); }
  14%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--note-drift)), -75px) scale(1.15) rotate(var(--note-turn)); }
}

.crab-dialog {
  position: absolute;
  z-index: 9;
  left: var(--crab-dialog-x, 78%);
  top: var(--crab-dialog-y, 65%);
  width: min(390px, calc(100vw - 28px));
  max-height: 62vh;
  overflow-y: auto;
  padding: 14px 34px 14px 15px;
  border: 4px solid #172823;
  background: #fff7c8;
  color: #172823;
  box-shadow: 6px 7px 0 rgba(16, 44, 35, 0.45);
  font: 700 14px/1.35 monospace;
  transform: translate(-50%, -100%);
  image-rendering: pixelated;
}

.crab-dialog[hidden] { display: none; }

.crab-dialog::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 16px;
  height: 16px;
  border-right: 4px solid #172823;
  border-bottom: 4px solid #172823;
  background: #fff7c8;
  transform: translateX(-50%) rotate(45deg);
}

.crab-dialog strong,
.crab-dialog span {
  display: block;
  white-space: pre-line;
}
.crab-dialog strong { color: #b52e3e; }

.crab-dialog-close {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 3px solid #172823;
  background: #fa82ba;
  color: #172823;
  font: 900 13px/16px monospace;
  cursor: pointer;
}

.bug-layer,
.animal-layer,
.effect-layer,
.wind-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.animal-layer {
  z-index: 2;
  pointer-events: none;
}
.effect-layer { z-index: 6; }
.wind-layer { z-index: 4; }
.bug-layer { z-index: 5; }

.animal {
  position: absolute;
  left: var(--animal-left);
  top: var(--animal-top);
  width: var(--animal-size);
  transform-origin: 50% 100%;
  will-change: transform, left, top;
  transition: filter 180ms linear;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.animal.dragging {
  z-index: 3;
  cursor: grabbing;
  filter: drop-shadow(0 0 13px rgba(255, 255, 225, 0.68));
}

.animal img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(5px 7px 0 rgba(10, 48, 29, 0.32));
  animation: animal-step 0.54s steps(2, end) infinite;
}

.animal .sitting-pose {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 82%;
  transform: translateX(-50%);
  animation: none;
}

.animal.sitting .walking-pose { visibility: hidden; }
.animal.sitting .sitting-pose { display: block; }
.animal.dragging .walking-pose { visibility: hidden; }
.animal.dragging .sitting-pose {
  display: block;
  animation: picked-up-shake 0.3s steps(2, end) infinite;
}

.animal.lion {
  --animal-left: 14%;
  --animal-top: 59%;
  --animal-size: clamp(105px, 13vw, 190px);
}

.animal.zebra {
  --animal-left: 62%;
  --animal-top: 31%;
  --animal-size: clamp(90px, 11vw, 165px);
}

.animal.running img { animation-duration: 0.24s; }
.animal.running { filter: drop-shadow(0 0 8px rgba(255, 247, 200, 0.22)); }
.animal.sitting { filter: drop-shadow(0 0 11px rgba(255, 247, 200, 0.28)); }

.curtain-effect {
  --curtain-width: 220px;
  --curtain-height: 190px;
  position: absolute;
  left: var(--effect-x);
  top: var(--effect-y);
  width: var(--curtain-width);
  height: var(--curtain-height);
  transform: translate(-50%, -50%);
}

.curtain {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border: 5px solid #3c1027;
  border-top-width: 10px;
  background: #741f48;
  box-shadow: 7px 8px 0 rgba(16, 44, 35, 0.4);
  transform-origin: 50% 0;
  animation: curtain-fall 0.48s steps(8, end) 0.65s both, curtain-lift 0.45s steps(7, end) 2.35s forwards;
}

.curtain::before,
.curtain::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: repeating-linear-gradient(90deg, #741f48 0 18px, #531535 18px 29px, #96345f 29px 35px);
}

.curtain::before {
  left: 0;
  border-right: 4px solid #3c1027;
}

.curtain::after { right: 0; }

.water-drop {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 58%;
  width: 8px;
  height: 13px;
  border: 2px solid #d6f6e8;
  border-radius: 50% 50% 55% 55%;
  background: #62bde0;
  box-shadow: 3px 3px 0 rgba(16, 44, 35, 0.28);
  opacity: 0;
  animation: water-squirt 0.88s steps(12, end) var(--drop-delay) both;
}

.pixel-heart {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 52%;
  width: 20px;
  height: 16px;
  opacity: 0;
  background: var(--red);
  clip-path: polygon(0 25%, 15% 8%, 35% 8%, 50% 25%, 65% 8%, 85% 8%, 100% 25%, 100% 52%, 50% 100%, 0 52%);
  filter: drop-shadow(3px 3px 0 rgba(16, 44, 35, 0.38));
  animation: heart-rise 0.75s steps(9, end) var(--heart-delay) both;
}

@keyframes curtain-fall {
  from { transform: translateY(calc(-100vh - 100%)) scaleY(0.15); }
  to { transform: translateY(0) scaleY(1); }
}

@keyframes curtain-lift {
  from { transform: translateY(0) scaleY(1); }
  to { transform: translateY(calc(-100vh - 100%)) scaleY(0.2); }
}

@keyframes water-squirt {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y))) rotate(var(--drop-turn)); }
}

@keyframes heart-rise {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.4); }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--heart-x)), var(--heart-y)) scale(1.15) rotate(var(--heart-turn)); }
}

@keyframes animal-step {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-3px) rotate(0.5deg); }
}

@keyframes picked-up-shake {
  0%, 100% { transform: translateX(-50%) rotate(-1.5deg); }
  50% { transform: translateX(-50%) translateY(-2px) rotate(1.5deg); }
}

.wind {
  --wind-delay: 0s;
  position: absolute;
  top: var(--top);
  left: -28vw;
  width: clamp(90px, 15vw, 220px);
  height: 34px;
  opacity: 0;
  border-top: 4px solid rgba(214, 246, 232, 0.74);
  border-radius: 50%;
  filter: drop-shadow(3px 3px 0 rgba(23, 61, 44, 0.28));
  animation: drift 7s steps(28, end) var(--wind-delay) infinite;
}

.wind::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -17px;
  width: 31px;
  height: 18px;
  border: 4px solid rgba(214, 246, 232, 0.74);
  border-left-color: transparent;
  border-radius: 50%;
}

@keyframes drift {
  0% { opacity: 0; transform: translateX(0) translateY(8px) scaleX(0.7); }
  12%, 68% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(145vw) translateY(-12px) scaleX(1.2); }
}

.bug {
  --flight: 12s;
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: 14px;
  height: 10px;
  animation: wander var(--flight) steps(90, end) var(--delay) infinite;
}

.bug::before,
.bug::after { content: ""; position: absolute; }

.bug.fly { background: #1c2828; box-shadow: 4px 4px 0 rgba(10, 30, 27, 0.28); }
.bug.fly::before { left: -6px; top: -5px; width: 7px; height: 6px; background: #bcebdc; }
.bug.fly::after { right: -6px; top: -5px; width: 7px; height: 6px; background: #bcebdc; }

.bug.ladybug {
  width: 16px;
  height: 14px;
  background: linear-gradient(90deg, var(--red) 46%, #172823 46% 58%, var(--red) 58%);
  border: 3px solid #172823;
  border-radius: 7px 7px 5px 5px;
  box-shadow: inset 3px 3px 0 #fff7c8;
}

@keyframes wander {
  0%, 100% { transform: translate(0, 0) rotate(3deg); }
  14% { transform: translate(9vw, -8vh) rotate(-9deg); }
  29% { transform: translate(-5vw, 7vh) rotate(8deg); }
  45% { transform: translate(12vw, 13vh) rotate(-5deg); }
  61% { transform: translate(3vw, -12vh) rotate(7deg); }
  78% { transform: translate(-10vw, -3vh) rotate(-8deg); }
  91% { transform: translate(-4vw, 8vh) rotate(5deg); }
}

@media (max-width: 600px) {
  .garden::after { border-width: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .animal img, .wind, .bug, .crab-note { animation-play-state: paused; }
  .wind { display: none; }
}