:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --sky: #8addf8;
  --grass-light: #9bdf59;
  --grass: #65bd45;
  --ink: #5e3b28;
  --cream: #fff9e9;
  --orange: #ff993e;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

button {
  font: inherit;
}

.game {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  background: var(--sky);
  touch-action: none;
}

.sky,
.playfield,
.entities {
  position: absolute;
  inset: 0;
}

.sky {
  overflow: hidden;
  background: linear-gradient(#82dafa 0%, #c7f2ff 58%, #eafdc9 100%);
  z-index: -3;
}

.sun {
  position: absolute;
  width: clamp(76px, 10vw, 128px);
  aspect-ratio: 1;
  right: 8%;
  top: 12%;
  border-radius: 50%;
  background: #ffe875;
  box-shadow: 0 0 0 18px rgb(255 238 128 / 25%), 0 0 60px #fff7a7;
  animation: sun-pulse 4s ease-in-out infinite;
}

.cloud {
  position: absolute;
  width: 150px;
  height: 48px;
  border-radius: 40px;
  background: rgb(255 255 255 / 88%);
  filter: drop-shadow(0 7px 0 rgb(91 176 205 / 12%));
  animation: cloud-drift 18s ease-in-out infinite alternate;
}

.cloud i {
  position: absolute;
  bottom: 10px;
  border-radius: 50%;
  background: inherit;
}

.cloud i:nth-child(1) { width: 65px; height: 65px; left: 17px; }
.cloud i:nth-child(2) { width: 82px; height: 82px; left: 57px; }
.cloud i:nth-child(3) { width: 52px; height: 52px; right: 6px; }
.cloud-one { top: 19%; left: 8%; transform: scale(.85); }
.cloud-two { top: 32%; right: 19%; transform: scale(.6); animation-delay: -6s; }

.hills {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50% 50% 0 0;
}

.hills-back {
  height: 35%;
  bottom: 28%;
  background: #a8dc72;
  clip-path: polygon(0 55%, 8% 34%, 18% 50%, 30% 16%, 43% 51%, 58% 23%, 71% 48%, 83% 18%, 100% 55%, 100% 100%, 0 100%);
}

.hills-front {
  height: 30%;
  bottom: 22%;
  background: #78c75b;
  clip-path: polygon(0 62%, 15% 25%, 29% 58%, 44% 29%, 60% 67%, 74% 31%, 89% 63%, 100% 38%, 100% 100%, 0 100%);
}

.weather-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.weather-tint {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  background: linear-gradient(rgb(77 111 145 / 24%), rgb(50 93 74 / 14%));
  transition: opacity 1.2s ease;
}

.rain-cloud-bank {
  position: absolute;
  z-index: 2;
  top: 10%;
  width: 56%;
  height: clamp(58px, 9vw, 92px);
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(#b6c9d1, #91aab6);
  filter: drop-shadow(0 12px 8px rgb(49 79 91 / 18%));
  transition: opacity 1s ease, transform 1.2s ease;
}

.rain-cloud-bank::before,
.rain-cloud-bank::after {
  content: "";
  position: absolute;
  bottom: 26%;
  border-radius: 50%;
  background: inherit;
}

.rain-cloud-bank::before {
  left: 19%;
  width: 31%;
  aspect-ratio: 1;
}

.rain-cloud-bank::after {
  right: 17%;
  width: 39%;
  aspect-ratio: 1;
}

.rain-cloud-left { left: -12%; transform: translateX(-12%); }
.rain-cloud-right { right: -12%; transform: translateX(12%) scaleX(-1); }

.rain-drops {
  position: absolute;
  z-index: 8000;
  inset: 0;
  overflow: hidden;
}

.rain-drop {
  position: absolute;
  left: var(--rain-x);
  top: -18%;
  width: 3px;
  height: var(--rain-length);
  border-radius: 3px;
  opacity: 0;
  background: linear-gradient(transparent, rgb(218 246 255 / 90%));
  transform: rotate(12deg);
  animation: rain-fall var(--rain-speed) linear var(--rain-delay) infinite;
  animation-play-state: paused;
}

.rain-puddles {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 47%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 15% 72%, rgb(113 193 211 / 45%) 0 3%, transparent 3.4%),
    radial-gradient(ellipse at 48% 83%, rgb(107 187 208 / 40%) 0 4%, transparent 4.4%),
    radial-gradient(ellipse at 82% 62%, rgb(117 196 211 / 42%) 0 3.5%, transparent 3.9%);
  transition: opacity 2s ease;
  animation: puddle-shimmer 2s ease-in-out infinite alternate;
}

.weather-rainbow {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 50%;
  width: clamp(250px, 38vw, 460px);
  height: clamp(120px, 19vw, 230px);
  border-radius: 50% 50% 0 0;
  opacity: 0;
  background: radial-gradient(
    ellipse at 50% 100%,
    transparent 0 35%,
    #b98af4 35.5% 40%,
    #69bdf5 40.5% 45%,
    #70dc99 45.5% 50%,
    #ffe36a 50.5% 55%,
    #ff9c59 55.5% 60%,
    #ff6f91 60.5% 65%,
    transparent 65.5%
  );
  filter: drop-shadow(0 0 10px rgb(255 255 255 / 65%));
  transform: translate(-50%, 20px) scale(.86);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, 1.2, .45, 1);
}

.game.raining .weather-tint { opacity: 1; }
.game.raining .rain-cloud-bank { opacity: .9; transform: translateX(0); }
.game.raining .rain-cloud-right { transform: translateX(0) scaleX(-1); }
.game.raining .rain-drop { opacity: var(--rain-opacity); animation-play-state: running; }
.game.raining .rain-puddles { opacity: 1; }
.game.after-rain .weather-rainbow { opacity: .78; transform: translate(-50%, 0) scale(1); }

.top-bar {
  position: absolute;
  z-index: 10000;
  top: max(14px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}

.title-group,
.counter,
.round-button {
  background: rgb(255 255 255 / 88%);
  border: 3px solid rgb(255 255 255 / 92%);
  box-shadow: 0 6px 0 rgb(84 126 77 / 18%), 0 8px 24px rgb(44 94 121 / 16%);
  backdrop-filter: blur(8px);
}

.title-group {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 17px 9px 11px;
  border-radius: 24px;
}

.title-chick {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #fff0a5;
  font-size: 27px;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 2.5vw, 29px);
  line-height: 1.08;
  letter-spacing: .04em;
}

.title-group p {
  margin: 3px 0 0;
  color: #9a6d4f;
  font-size: clamp(11px, 1.3vw, 14px);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: auto;
}

.counter {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 55px;
  padding: 10px 16px;
  border-radius: 20px;
  color: #7b573e;
  font-size: 15px;
}

.counter > span:first-child { font-size: 25px; }
.counter strong { color: #ef7b2d; font-size: 26px; }

.round-button {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  padding: 0;
  border-radius: 19px;
  color: #6c553e;
  font-size: 26px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.round-button:active {
  transform: translateY(4px) scale(.96);
  box-shadow: 0 2px 0 rgb(84 126 77 / 18%);
}

.animal-button {
  background: linear-gradient(145deg, #fffdf0, #fff1b8);
}

.playfield {
  cursor: crosshair;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 70%, rgb(185 237 104 / 38%) 0 2%, transparent 2.4%),
    radial-gradient(ellipse at 80% 80%, rgb(183 234 94 / 36%) 0 2%, transparent 2.4%),
    linear-gradient(to bottom, transparent 0 47%, var(--grass-light) 47% 58%, var(--grass) 58% 100%);
}

.playfield::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  opacity: .24;
  background-image:
    repeating-linear-gradient(72deg, transparent 0 24px, #3d9b3d 25px 27px, transparent 28px 49px),
    repeating-linear-gradient(108deg, transparent 0 36px, #b3e76c 37px 39px, transparent 40px 61px);
  pointer-events: none;
}

.fence {
  position: absolute;
  top: 42%;
  width: 26%;
  height: 66px;
  z-index: 1;
  opacity: .9;
  background:
    linear-gradient(#fff7d8, #e6c883) 0 14px / 100% 13px no-repeat,
    linear-gradient(#fff7d8, #e6c883) 0 48px / 100% 13px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 28px, #f9e5ae 29px 45px, transparent 46px 72px);
  filter: drop-shadow(0 6px 0 rgb(70 128 50 / 15%));
}

.fence-left { left: -2%; transform: rotate(1deg); }
.fence-right { right: -2%; transform: rotate(-1deg); }

.flowers i {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 8px;
  height: 35px;
  border-radius: 8px;
  background: #418d38;
  transform-origin: bottom;
  animation: flower-sway 2.5s ease-in-out infinite alternate;
}

.flowers i::before {
  content: "✿";
  position: absolute;
  left: 50%;
  top: -18px;
  color: var(--c);
  font-size: 28px;
  text-shadow: 0 2px 0 rgb(91 94 45 / 12%);
  transform: translateX(-50%);
}

.entities {
  pointer-events: none;
  z-index: auto;
}

.hen {
  position: absolute;
  z-index: 500;
  left: 50%;
  top: 75%;
  width: clamp(146px, 18vw, 230px);
  aspect-ratio: 1;
  cursor: pointer;
  outline: none;
  transform: translate(-50%, -92%);
  transition: left .75s cubic-bezier(.22,.8,.32,1), top .75s cubic-bezier(.22,.8,.32,1);
  will-change: left, top;
}

.hen img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: scaleX(var(--hen-facing, 1));
  filter: drop-shadow(0 8px 3px rgb(72 73 31 / 18%));
}

.hen.moving img { animation: hen-walk .3s ease-in-out infinite alternate; }
.hen.laying img { animation: hen-lay .38s ease-in-out; }

.hen-shadow {
  position: absolute;
  z-index: 1;
  width: 60%;
  height: 13%;
  left: 20%;
  bottom: 5%;
  border-radius: 50%;
  background: rgb(44 100 39 / 20%);
  filter: blur(2px);
}

.hen-halo {
  position: absolute;
  z-index: 0;
  inset: 12%;
  border-radius: 50%;
  opacity: 0;
  background: #fff7a6;
  transform: scale(.6);
}

.hen.laying .hen-halo { animation: halo-pop .55s ease-out; }

.egg {
  position: absolute;
  width: 58px;
  height: 72px;
  transform: translate(-50%, -100%);
  transform-origin: bottom center;
  animation: egg-drop .5s cubic-bezier(.2,.85,.35,1.25), egg-wiggle .7s 1.1s ease-in-out infinite alternate;
}

.egg-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 4px solid #d6ae70;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 90%) 0 7%, transparent 8%),
    linear-gradient(140deg, #fffef1, #f4deaa);
  box-shadow: inset -8px -7px 0 rgb(190 139 69 / 12%), 0 7px 0 rgb(50 102 40 / 15%);
}

.egg.colorful .egg-shell {
  border-color: #8c57c5;
  background:
    radial-gradient(circle at 32% 26%, rgb(255 255 255 / 82%) 0 7%, transparent 8%),
    radial-gradient(circle at 30% 62%, #fff36c 0 7%, transparent 8%),
    radial-gradient(circle at 70% 38%, #ff6aa0 0 8%, transparent 9%),
    linear-gradient(145deg, #65d8ff 0 32%, #bd77f2 33% 62%, #ff8eba 63% 100%);
  box-shadow: inset -8px -7px 0 rgb(75 37 120 / 11%), 0 0 18px rgb(255 224 91 / 70%), 0 7px 0 rgb(50 102 40 / 15%);
}

.egg-progress {
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 50px;
  height: 7px;
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 90%);
  border-radius: 10px;
  background: rgb(76 108 54 / 24%);
  transform: translateX(-50%);
}

.egg-progress::after {
  content: "";
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fff26a;
  transform-origin: left;
  animation: incubate 3s linear forwards;
}

.egg.hatching { animation: hatch-shake .45s ease-in-out; }
.egg.hatching .egg-shell { animation: shell-open .45s ease-in forwards; }
.egg.hatching .egg-progress { display: none; }

.game[data-animal="tomato"] .egg {
  width: 78px;
  height: 86px;
}

.game[data-animal="tomato"] .egg-shell {
  z-index: 1;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/tomato-egg.png?v=tomato-theme-3") center / 150% auto no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 6px 2px rgb(50 102 40 / 18%));
}

.game[data-animal="tomato"] .egg.colorful::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3%;
  border-radius: 50%;
  opacity: .78;
  background: conic-gradient(#ff6a91, #ffdc5e, #6fdf9a, #65cfff, #aa7cf2, #ff6a91);
  filter: blur(9px);
  animation: rainbow-glow 1.1s linear infinite;
}

.game[data-animal="tomato"] .egg.colorful .egg-shell {
  background: transparent url("assets/tomato-rainbow-egg.png?v=tomato-theme-3") center / 150% auto no-repeat;
  filter:
    drop-shadow(0 6px 2px rgb(50 102 40 / 18%))
    drop-shadow(0 0 12px rgb(255 245 140 / 100%));
}

.game[data-animal="tomato"] .egg-progress {
  z-index: 2;
}

.game[data-animal="tomato"] .egg.hatching .egg-shell {
  animation: tomato-ready .45s ease-out forwards;
}

.game[data-animal="watermelon"] .egg {
  width: 78px;
  height: 84px;
}

.game[data-animal="watermelon"] .egg-shell {
  z-index: 1;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/watermelon-egg.png?v=watermelon-theme-2") center / 150% auto no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 6px 2px rgb(50 102 40 / 18%));
}

.game[data-animal="watermelon"] .egg.colorful::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3%;
  border-radius: 50%;
  opacity: .78;
  background: conic-gradient(#ff6a91, #ffdc5e, #6fdf9a, #65cfff, #aa7cf2, #ff6a91);
  filter: blur(9px);
  animation: rainbow-glow 1.1s linear infinite;
}

.game[data-animal="watermelon"] .egg.colorful .egg-shell {
  background: transparent url("assets/watermelon-rainbow-egg.png?v=watermelon-theme-2") center / 150% auto no-repeat;
  filter:
    drop-shadow(0 6px 2px rgb(50 102 40 / 18%))
    drop-shadow(0 0 12px rgb(255 245 140 / 100%));
}

.game[data-animal="watermelon"] .egg-progress {
  z-index: 2;
}

.game[data-animal="watermelon"] .egg.hatching .egg-shell {
  animation: tomato-ready .45s ease-out forwards;
}

.chick {
  position: absolute;
  width: clamp(66px, 8vw, 92px);
  aspect-ratio: 1;
  transform: translate(-50%, -92%);
  will-change: left;
}

.chick img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(var(--chick-facing));
  filter: drop-shadow(0 5px 2px rgb(59 83 34 / 18%));
  animation: chick-walk .3s ease-in-out infinite alternate;
}

.chick::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 52%;
  height: 10%;
  left: 24%;
  bottom: 6%;
  border-radius: 50%;
  background: rgb(44 100 39 / 18%);
}

.bug {
  position: absolute;
  width: 38px;
  height: 30px;
  transform: translate(-50%, -82%);
  pointer-events: none;
}

.bug::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 6px;
  border-radius: 50%;
  background: rgb(39 88 31 / 20%);
}

.bug-body {
  display: block;
  font-size: 27px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 2px 1px rgb(45 74 27 / 24%));
  animation: bug-wiggle .5s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

.bug.being-eaten .bug-body {
  animation: bug-nibble .22s ease-in-out infinite alternate;
}

.chick.eating img {
  animation: chick-eat .24s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

.winged-chick {
  width: clamp(74px, 9vw, 104px);
  transition:
    top var(--flight-time) cubic-bezier(.42, .08, .72, .36),
    left var(--flight-time) ease-in-out;
  will-change: top, left;
}

.rainbow-chick::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5%;
  border-radius: 50%;
  opacity: .8;
  background: conic-gradient(#ff6a91, #ffdc5e, #6fdf9a, #65cfff, #aa7cf2, #ff6a91);
  filter: blur(13px);
  animation: rainbow-glow 1.1s linear infinite;
}

.winged-chick img {
  animation: rainbow-hover .42s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 5px 2px rgb(59 83 34 / 16%))
    drop-shadow(0 0 8px rgb(255 245 140 / 80%));
}

.magic-wing {
  position: absolute;
  z-index: 1;
  top: 37%;
  width: 58%;
  height: 42%;
  opacity: 0;
  border: 3px solid rgb(255 255 255 / 85%);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 75%), transparent 38%),
    linear-gradient(135deg, #ff75a3, #ffe36d 35%, #6fdfb0 62%, #77cfff 82%, #b785ef);
  box-shadow: 0 0 12px rgb(255 240 137 / 80%);
  transition: opacity .28s ease, transform .46s cubic-bezier(.2, 1.4, .45, 1);
}

.bug-powered-chick .magic-wing {
  border-color: rgb(245 228 255 / 92%);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 78%), transparent 38%),
    linear-gradient(135deg, #e9c7ff, #bd7bea 42%, #8246c4 72%, #5b2a9d);
  box-shadow: 0 0 14px rgb(173 102 235 / 88%);
}

.swan-chick {
  width: clamp(86px, 10vw, 116px);
}

.swan-chick img {
  animation:
    swan-reveal .5s ease-out,
    rainbow-hover .42s ease-in-out .5s infinite alternate;
}

.game[data-animal="dino"] .chick:not(.pterosaur-chick) {
  width: clamp(78px, 9vw, 106px);
}

.pterosaur-chick {
  width: clamp(94px, 11vw, 126px);
}

.pterosaur-chick img {
  animation:
    swan-reveal .5s ease-out,
    rainbow-hover .42s ease-in-out .5s infinite alternate;
}

.game[data-animal="butterfly"] .chick:not(.butterfly-chick) {
  width: clamp(92px, 11vw, 126px);
}

.game[data-animal="tomato"] .chick {
  width: clamp(108px, 12vw, 146px);
}

.game[data-animal="watermelon"] .chick:not(.melon-flyer-chick) {
  width: clamp(78px, 9vw, 106px);
}

.melon-flyer-chick {
  width: clamp(96px, 11vw, 132px);
}

.melon-flyer-chick .magic-wing {
  display: none;
}

.melon-flyer-chick img {
  animation:
    swan-reveal .5s ease-out,
    rainbow-hover .42s ease-in-out .5s infinite alternate;
}

.butterfly-chick {
  width: clamp(96px, 12vw, 138px);
}

.butterfly-chick .magic-wing {
  display: none;
}

.butterfly-chick img {
  animation:
    butterfly-reveal .5s ease-out,
    butterfly-flutter .34s ease-in-out .5s infinite alternate;
}

.magic-wing-left {
  right: 58%;
  border-radius: 85% 24% 70% 35%;
  transform: scale(.05) rotate(18deg);
  transform-origin: right center;
}

.magic-wing-right {
  left: 58%;
  border-radius: 24% 85% 35% 70%;
  transform: scale(.05) rotate(-18deg);
  transform-origin: left center;
}

.winged-chick.wings-grown .magic-wing { opacity: .95; }
.winged-chick.wings-grown .magic-wing-left { transform: scale(1) rotate(-18deg); }
.winged-chick.wings-grown .magic-wing-right { transform: scale(1) rotate(18deg); }
.winged-chick.flying .magic-wing-left { animation: wing-flap-left .3s ease-in-out infinite alternate; }
.winged-chick.flying .magic-wing-right { animation: wing-flap-right .3s ease-in-out infinite alternate; }
.winged-chick.flying::after { opacity: 0; }

.particle {
  position: absolute;
  z-index: 9999;
  left: 0;
  top: 0;
  font-size: var(--particle-size, 22px);
  pointer-events: none;
  animation: particle-pop .9s ease-out forwards;
}

.tip {
  position: absolute;
  z-index: 10000;
  left: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 3px solid rgb(255 255 255 / 80%);
  border-radius: 24px;
  color: #72503b;
  background: rgb(255 251 224 / 88%);
  box-shadow: 0 5px 0 rgb(78 120 54 / 16%);
  font-size: clamp(13px, 2vw, 17px);
  transform: translateX(-50%);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
  white-space: nowrap;
}

.tip.hidden {
  opacity: 0;
  transform: translate(-50%, 10px);
}

.tip-key { font-size: 23px; }

.toast {
  position: absolute;
  z-index: 12000;
  left: 50%;
  top: 22%;
  padding: 10px 20px;
  border-radius: 24px;
  opacity: 0;
  color: #734023;
  background: #fff8c9;
  box-shadow: 0 6px 0 rgb(141 91 49 / 18%);
  font-size: 21px;
  font-weight: 800;
  pointer-events: none;
  transform: translate(-50%, -10px) scale(.9);
}

.toast.show { animation: toast-in 1.6s ease both; }

@keyframes sun-pulse { to { transform: scale(1.05); } }
@keyframes cloud-drift { to { margin-left: 4vw; } }
@keyframes rain-fall { to { translate: -58px 135vh; } }
@keyframes puddle-shimmer { to { filter: brightness(1.14); transform: scaleY(1.03); } }
@keyframes flower-sway { to { transform: rotate(5deg); } }
@keyframes hen-walk { from { margin-top: 0; rotate: -1.2deg; } to { margin-top: -8px; rotate: 1.2deg; } }
@keyframes hen-lay { 40% { transform: scaleX(var(--hen-facing, 1)) translateY(-9px) rotate(-3deg); } 70% { transform: scaleX(var(--hen-facing, 1)) translateY(4px); } }
@keyframes halo-pop { 25% { opacity: .8; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes egg-drop { from { opacity: 0; transform: translate(-50%, -190%) scale(.5); } 70% { opacity: 1; transform: translate(-50%, -96%) scale(1.07,.94); } }
@keyframes egg-wiggle { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes incubate { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hatch-shake { 20% { translate: -7px 0; rotate: -7deg; } 40% { translate: 7px 0; rotate: 7deg; } 60% { translate: -5px 0; rotate: -5deg; } 80% { translate: 5px 0; rotate: 5deg; } }
@keyframes shell-open { 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 0; transform: translateY(14px) scale(1.3,.45); } }
@keyframes chick-walk { from { translate: 0 1px; rotate: -2deg; } to { translate: 0 -7px; rotate: 2deg; } }
@keyframes chick-eat { from { translate: 0 0; rotate: -2deg; } to { translate: 0 8px; rotate: 5deg; } }
@keyframes bug-wiggle { from { translate: -2px 0; rotate: -7deg; } to { translate: 2px -1px; rotate: 7deg; } }
@keyframes bug-nibble { from { scale: 1; rotate: -8deg; } to { scale: .72; rotate: 8deg; } }
@keyframes rainbow-hover { from { translate: 0 1px; rotate: -2deg; } to { translate: 0 -9px; rotate: 2deg; } }
@keyframes swan-reveal { from { opacity: .2; scale: .55; filter: brightness(2) drop-shadow(0 0 16px #fff); } }
@keyframes butterfly-reveal { from { opacity: .15; scale: .5; filter: brightness(2) drop-shadow(0 0 18px #fff); } }
@keyframes butterfly-flutter { from { translate: 0 2px; rotate: -3deg; scale: .96 1; } to { translate: 0 -8px; rotate: 3deg; scale: 1.03 .97; } }
@keyframes tomato-ready { 45% { scale: .82; rotate: -7deg; } 75% { scale: 1.18; rotate: 6deg; filter: brightness(1.35) drop-shadow(0 0 14px #fff7a6); } to { opacity: 0; scale: .9; rotate: 0; } }
@keyframes rainbow-glow { to { rotate: 360deg; } }
@keyframes wing-flap-left { from { transform: scale(1) rotate(-34deg) skewY(-5deg); } to { transform: scale(.82, 1.08) rotate(16deg) skewY(6deg); } }
@keyframes wing-flap-right { from { transform: scale(1) rotate(34deg) skewY(5deg); } to { transform: scale(.82, 1.08) rotate(-16deg) skewY(-6deg); } }
@keyframes particle-pop { from { opacity: 1; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--spin)) scale(1.2); } }
@keyframes toast-in { 15%, 70% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -14px) scale(.96); } }

@media (max-width: 680px) {
  .game { min-height: 420px; }
  .title-group { padding: 7px 10px; }
  .title-group p, .title-chick { display: none; }
  .counter { min-height: 48px; padding: 7px 10px; }
  .counter > span:first-child { font-size: 21px; }
  .counter strong { font-size: 22px; }
  .counter > span:last-child { display: none; }
  .round-button { width: 48px; height: 48px; border-radius: 16px; font-size: 22px; }
  .hen { width: clamp(130px, 33vw, 180px); }
  .tip { bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); }
}

@media (max-width: 520px) {
  #fullscreenButton { display: none; }
  .top-bar { gap: 8px; }
  .top-actions { gap: 6px; }
}

@media (max-height: 560px) {
  .game { min-height: 0; }
  .top-bar { top: 7px; }
  .title-group p, .title-chick { display: none; }
  .hen { width: clamp(125px, 22vh, 170px); }
  .tip { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sun, .cloud, .flowers i, .hen.moving img, .egg, .chick img { animation-duration: 1.2s; }
}