:root {
  --ink: #243247;
  --cream: #fff9df;
  --pink: #e84f87;
  --sky-top: #88d7ef;
  --sky-mid: #c8eef5;
  --sky-bottom: #fff0b7;
  --grass: #4aae78;
  --grass-dark: #2e7d59;
  --sun-alpha: .9;
  --sun-glow: .42;
  --cloud-shade: 0;
  --shade-strong: 0;
  --shade-soft: 0;
  --scene-brightness: 1;
  --scene-saturation: 1;
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--sky-bottom);
}

.game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 244, 170, var(--sun-alpha)) 0 62px, transparent 63px),
    radial-gradient(circle at 78% 18%, rgba(255, 236, 132, var(--sun-glow)) 0 110px, transparent 190px),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-bottom) 100%);
  transition: background-color .6s ease;
}

.game-shell.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.game-shell::before {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(50, 73, 98, var(--shade-strong)), rgba(34, 67, 54, var(--shade-soft)));
  opacity: var(--cloud-shade);
  transition: opacity .35s ease;
}

.sky,
.stage {
  position: absolute;
  inset: 0;
}

.sky {
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage {
  z-index: 1;
  filter: brightness(var(--scene-brightness)) saturate(var(--scene-saturation));
}

.cloud {
  position: absolute;
  width: var(--cloud-w, 190px);
  height: auto;
  opacity: var(--cloud-opacity, .94);
  filter: drop-shadow(0 10px 16px rgba(67, 135, 161, .08));
  animation: drift 30s linear infinite;
  user-select: none;
  -webkit-user-drag: none;
}

.cloud-one {
  top: 12vh;
  left: -230px;
  --cloud-w: 220px;
}

.cloud-two {
  top: 28vh;
  left: -280px;
  --cloud-w: 250px;
  animation-duration: 38s;
  animation-delay: -14s;
  --cloud-opacity: .9;
}

.cloud-three {
  top: 8vh;
  left: -260px;
  --cloud-w: 205px;
  animation-duration: 44s;
  animation-delay: -26s;
  --cloud-opacity: .84;
}

.cloud-four {
  top: 20vh;
  left: -250px;
  --cloud-w: 180px;
  --cloud-opacity: .9;
  animation-duration: 34s;
  animation-delay: -6s;
}

.kid-clock {
  position: absolute;
  top: clamp(16px, 4vh, 34px);
  left: clamp(14px, 4vw, 42px);
  z-index: 8;
  width: clamp(92px, 12vw, 142px);
  filter: drop-shadow(0 12px 18px rgba(67, 135, 161, .18));
  pointer-events: none;
}

.clock-face {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: clamp(5px, .7vw, 8px) solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .88) 0 16%, transparent 17%),
    conic-gradient(from -10deg, #ffd152 0 18%, #ff9ab1 18% 38%, #88d7ef 38% 63%, #8bdc96 63% 82%, #ffd152 82% 100%);
  box-shadow: inset 0 -10px 0 rgba(36, 50, 71, .08);
  animation: clock-wiggle 4.8s ease-in-out infinite;
}

.clock-face::before,
.clock-face::after {
  position: absolute;
  top: -15%;
  width: 31%;
  height: 20%;
  border: clamp(4px, .55vw, 6px) solid var(--ink);
  border-radius: 999px 999px 45% 45%;
  content: "";
  background: #ff9ab1;
}

.clock-face::before {
  left: 9%;
  transform: rotate(-24deg);
}

.clock-face::after {
  right: 9%;
  transform: rotate(24deg);
}

.clock-number {
  position: absolute;
  z-index: 2;
  color: var(--ink);
  font-size: clamp(.72rem, 1.45vw, 1.12rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .5);
}

.clock-twelve {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.clock-three {
  top: 47%;
  right: 11%;
  transform: translateY(-50%);
}

.clock-six {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.clock-nine {
  top: 47%;
  left: 12%;
  transform: translateY(-50%);
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 3;
  width: clamp(4px, .42vw, 6px);
  border-radius: 999px;
  background: var(--ink);
  transform-origin: 50% 100%;
}

.clock-hour {
  height: 25%;
  transform: translateX(-50%) rotate(var(--hour-angle, 0deg));
}

.clock-minute {
  height: 34%;
  background: var(--pink);
  transform: translateX(-50%) rotate(var(--minute-angle, 0deg));
}

.clock-second {
  width: clamp(2px, .24vw, 3px);
  height: 38%;
  background: var(--cream);
  transform: translateX(-50%) rotate(var(--second-angle, 0deg));
}

.clock-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 15%;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  transform: translate(-50%, -50%);
}

.hud-panel {
  position: absolute;
  top: clamp(16px, 4vh, 34px);
  right: clamp(12px, 3vw, 34px);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.score-pill {
  padding: 8px 12px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 249, 223, .94);
  font-size: clamp(.8rem, 1.4vw, 1rem);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 0 rgba(36, 50, 71, .08);
}

.score-pill strong {
  color: var(--pink);
}

.theme-toggle,
.fullscreen-toggle {
  min-width: 74px;
  padding: 7px 11px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 249, 223, .9);
  box-shadow: 0 6px 0 rgba(36, 50, 71, .08);
  font: inherit;
  font-size: clamp(.72rem, 1.15vw, .88rem);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.fullscreen-toggle {
  min-width: 54px;
}

.theme-toggle:active,
.fullscreen-toggle:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 rgba(36, 50, 71, .08);
}

.game-shell.theme-africa .theme-toggle {
  background: rgba(255, 232, 164, .94);
}

.game-shell.is-fullscreen .fullscreen-toggle {
  background: rgba(136, 215, 239, .94);
}

.touch-controls {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.touch-zone {
  position: absolute;
  top: 18%;
  bottom: 0;
  width: 50%;
  border: 0;
  padding: 0;
  color: rgba(36, 50, 71, .62);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.touch-left {
  left: 0;
}

.touch-right {
  right: 0;
}

.touch-zone span {
  display: none;
}

.game-shell.has-touch-input .touch-controls {
  display: block;
}

.world {
  display: none;
}

.distant-mountains {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.distant-mountain-asset {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--distant-mountain-w, 980px);
  height: auto;
  opacity: var(--distant-mountain-opacity, .86);
  transform: translate(-50%, -100%);
  filter: saturate(.78) brightness(1.06) drop-shadow(0 14px 18px rgba(56, 92, 53, .045));
  user-select: none;
  -webkit-user-drag: none;
}

.mountains {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.front-clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.mountain-asset {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--mountain-w, 520px);
  height: auto;
  opacity: var(--mountain-opacity, .92);
  transform: translate(-50%, -100%);
  filter: saturate(.9) drop-shadow(0 10px 14px rgba(56, 92, 53, .06));
  user-select: none;
  -webkit-user-drag: none;
}

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

.scenery-asset {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--asset-w, 180px);
  height: auto;
  opacity: var(--asset-opacity, 1);
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 9px 8px rgba(36, 50, 71, .08));
  user-select: none;
  -webkit-user-drag: none;
}

.scenery-baobab-group {
  height: calc(var(--asset-w, 180px) * .96);
  opacity: 1;
}

.scenery-baobab-tree {
  position: absolute;
  height: auto;
  opacity: 1;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 9px 8px rgba(36, 50, 71, .08));
  user-select: none;
  -webkit-user-drag: none;
}

.items {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.foreground {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.foreground-asset {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--foreground-w, 150px);
  opacity: var(--foreground-opacity, .96);
  transform: translate(-50%, -100%);
  line-height: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.foreground-ground-shadow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  z-index: 0;
  width: 74%;
  height: 11%;
  border-radius: 50%;
  background: rgba(20, 61, 45, .34);
  filter: blur(1.4px);
  transform: translate(-50%, 50%);
}

.foreground-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 4px rgba(20, 61, 45, .045));
  user-select: none;
  -webkit-user-drag: none;
}

.critters {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.critter {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--critter-size, 18px);
  height: var(--critter-size, 18px);
  opacity: .92;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.critter-butterfly .body {
  position: absolute;
  left: 44%;
  top: 28%;
  width: 12%;
  height: 52%;
  border-radius: 999px;
  background: #5f4b35;
}

.critter-butterfly .wing {
  position: absolute;
  top: 18%;
  width: 48%;
  height: 56%;
  border-radius: 80% 80% 55% 55%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .85) 0 16%, transparent 17%),
    var(--wing, #ff8fb1);
  animation: wing-flutter .32s ease-in-out infinite alternate;
}

.critter-butterfly .wing-left {
  left: 0;
  transform-origin: 100% 58%;
}

.critter-butterfly .wing-right {
  right: 0;
  transform-origin: 0 58%;
  animation-delay: -.12s;
}

.critter-bug {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .86) 0 18%, transparent 19%),
    var(--bug, #ffd152);
  box-shadow:
    0 0 0 1px rgba(85, 68, 42, .18),
    0 3px 5px rgba(36, 50, 71, .14);
}

.critter-bug::before,
.critter-bug::after {
  position: absolute;
  top: 45%;
  width: 48%;
  height: 1px;
  content: "";
  background: rgba(85, 68, 42, .52);
}

.critter-bug::before {
  right: 78%;
  transform: rotate(18deg);
}

.critter-bug::after {
  left: 78%;
  transform: rotate(-18deg);
}

.fairy-pop,
.dog-heart {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  pointer-events: none;
  transform-origin: center;
}

.fairy-pop::before {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 209, 82, .86);
  border-radius: 50%;
  content: "";
  animation: fairy-ring .62s ease-out forwards;
}

.fairy-pop span {
  position: absolute;
  left: -5px;
  top: -7px;
  color: #ffd152;
  font-size: 16px;
  font-weight: 900;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .95),
    0 0 8px rgba(255, 209, 82, .85);
  animation: fairy-spark .68s ease-out var(--delay, 0ms) forwards;
}

.fairy-pop span:nth-child(3n) {
  color: #ff8fb1;
}

.fairy-pop span:nth-child(4n) {
  color: #ffffff;
}

.dog-heart {
  color: #ff5b8f;
  font-size: var(--size, 16px);
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .9),
    0 4px 8px rgba(155, 42, 76, .18);
  animation: dog-heart-float 1.42s ease-out var(--delay, 0ms) forwards;
}

.item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 48px);
  height: var(--size, 48px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 7px rgba(36, 50, 71, .08));
}

.item-ground-shadow {
  position: absolute;
  left: 50%;
  top: 92%;
  z-index: 0;
  width: 62%;
  height: 13%;
  border-radius: 50%;
  background: rgba(24, 69, 52, .34);
  filter: blur(1px);
  transform: translate(-50%, -50%);
}

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

.item.is-collected {
  animation: collect-pop .34s ease-out forwards;
}

.item.has-art::before,
.item.has-art::after {
  content: none;
}

.item-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.item-peanut::before,
.item-golden::before {
  inset: 24% 8%;
  border: 3px solid #8a5529;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 236, 166, .9) 0 12%, transparent 13%),
    linear-gradient(135deg, #efc266, #c88535 68%, #9e5f29);
  transform: rotate(16deg);
}

.item-golden::before {
  border-color: #a46718;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .82) 0 13%, transparent 14%),
    linear-gradient(135deg, #fff3a8, #ffd152 54%, #d79b21);
  box-shadow: 0 0 18px rgba(255, 209, 82, .8);
}

.item-balloon::before {
  inset: 3% 18% 25%;
  border: 3px solid var(--ink);
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .9) 0 13%, transparent 14%),
    linear-gradient(135deg, #ffc2d2, #ff7ea4 66%, #d6547f);
}

.item-balloon::after {
  left: 50%;
  top: 72%;
  width: 2px;
  height: 26px;
  background: var(--ink);
}

.item-star::before {
  inset: 2%;
  content: "*";
  color: #ffd152;
  font-size: var(--size, 48px);
  font-weight: 900;
  line-height: .82;
  text-align: center;
  text-shadow: 0 3px 0 var(--ink);
}

.item-bubble::before {
  inset: 6%;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 25%, rgba(255, 255, 255, .96) 0 10%, transparent 11%),
    radial-gradient(circle at 68% 70%, rgba(255, 154, 177, .3) 0 16%, transparent 17%),
    radial-gradient(circle at 44% 44%, rgba(139, 215, 239, .36), rgba(255, 255, 255, .08) 65%);
  box-shadow: inset -8px -10px 16px rgba(92, 128, 201, .16);
}

.elephant-wrap {
  position: absolute;
  left: clamp(54px, 22vw, 280px);
  bottom: clamp(80px, 13vh, 126px);
  z-index: 5;
  width: clamp(250px, 36vw, 440px);
  aspect-ratio: 760 / 563;
  will-change: transform;
}

.elephant-wrap-3d {
  left: calc(42vw - clamp(210px, 27vw, 380px));
  bottom: clamp(48px, 8.5vh, 88px);
  width: clamp(470px, 62vw, 860px);
  aspect-ratio: 2.25;
}

.elephant-shadow {
  position: absolute;
  left: clamp(54px, 22vw, 280px);
  bottom: clamp(80px, 13vh, 126px);
  z-index: 4;
  width: clamp(250px, 36vw, 440px);
  aspect-ratio: 760 / 563;
  pointer-events: none;
}

.elephant-shadow-3d {
  left: calc(42vw - clamp(210px, 27vw, 380px));
  bottom: clamp(48px, 8.5vh, 88px);
  width: clamp(470px, 62vw, 860px);
  aspect-ratio: 2.25;
  --girl-shadow-x: 0px;
  --dog-shadow-x: 0px;
}

.elephant-shadow::after {
  position: absolute;
  left: 16%;
  right: 20%;
  bottom: -2%;
  height: 12%;
  border-radius: 50%;
  content: "";
  background: rgba(37, 71, 82, .18);
  filter: blur(2px);
  animation: walk-shadow 1.08s ease-in-out infinite;
  transform-origin: center;
}

.elephant-shadow-3d::before,
.elephant-shadow-3d::after {
  position: absolute;
  bottom: 22%;
  border-radius: 50%;
  content: "";
  background: rgba(12, 35, 32, .72);
  filter: blur(.55px);
  transform-origin: center;
}

.elephant-shadow-3d::before {
  left: 35.5%;
  right: 48.5%;
  height: 2.8%;
  animation: walk-dog-shadow-3d 1.35s ease-in-out infinite;
}

.elephant-shadow-3d::after {
  left: 45%;
  right: 38%;
  height: 3.1%;
  animation: walk-girl-shadow-3d 1.35s ease-in-out infinite;
}

.elephant-shadow-3d.is-dancing::before {
  left: 34%;
  right: 50.5%;
  bottom: 22.5%;
  height: 2.1%;
  opacity: .74;
  animation: none;
  transform: translateX(var(--dog-shadow-x, 0px)) scaleX(.72);
}

.elephant-shadow.is-jumping::after {
  opacity: .34;
  animation: none;
  transform: scaleX(.68);
}

.elephant-shadow-3d.is-jumping::after {
  transform: translateX(var(--girl-shadow-x, 0px)) scaleX(.68);
}

.elephant-wrap::after {
  position: absolute;
  left: 16%;
  right: 20%;
  bottom: -2%;
  height: 12%;
  border-radius: 50%;
  content: "";
  background: rgba(37, 71, 82, .18);
  filter: blur(2px);
  animation: walk-shadow 1.08s ease-in-out infinite;
  transform-origin: center;
  z-index: -1;
}

.elephant-wrap-3d::after {
  display: none;
}

.elephant-sprite {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 48% 88%;
  animation: sprite-walk 1.08s ease-in-out infinite;
  filter: drop-shadow(0 12px 12px rgba(55, 87, 122, .18));
}

.elephant-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 12px rgba(55, 87, 122, .16));
  transform-origin: 50% 86%;
  animation: elephant-3d-breathe 1.35s ease-in-out infinite;
}

.elephant-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.game-shell.is-dancing .elephant-3d {
  animation: none;
}

.elephant-wrap.is-jumping::after {
  opacity: .52;
  animation: none;
  transform: scaleX(.72);
}

.elephant-wrap.is-jumping .elephant-sprite {
  animation: sprite-jump .54s ease-in-out infinite;
}

.elephant-wrap.is-jumping .elephant-3d {
  animation: elephant-3d-jump .54s ease-in-out infinite;
}

.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: clamp(126px, 24vh, 210px);
  border-top: 7px solid rgba(255, 255, 255, .6);
  background: linear-gradient(180deg, var(--grass) 0%, var(--grass-dark) 100%);
}

@keyframes drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(100vw + 300px));
  }
}

@keyframes clock-wiggle {
  0%,
  100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }
}

@keyframes collect-pop {
  0% {
    opacity: 1;
    transform: translate(var(--item-x, 0px), var(--item-y, 0px)) translate(-50%, -50%) scale(1) rotate(0deg);
  }

  55% {
    opacity: .82;
    transform: translate(var(--item-x, 0px), var(--item-y, 0px)) translate(-50%, -50%) scale(1.18) rotate(5deg);
  }

  100% {
    opacity: 0;
    transform: translate(var(--item-x, 0px), var(--item-y, 0px)) translate(-50%, -50%) scale(.18) rotate(-8deg);
  }
}

@keyframes fairy-ring {
  0% {
    opacity: .9;
    transform: scale(.35);
  }

  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes fairy-spark {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(.35);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, -24px)) rotate(var(--spin, 90deg)) scale(1.15);
  }
}

@keyframes dog-heart-float {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-8deg) scale(.52);
  }

  18% {
    opacity: .95;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx, 18px), var(--dy, -58px)) rotate(14deg) scale(1.1);
  }
}

@keyframes wing-flutter {
  from {
    transform: rotateY(16deg) rotate(-16deg) scaleY(.92);
  }

  to {
    transform: rotateY(58deg) rotate(12deg) scaleY(1.05);
  }
}

@keyframes elephant-3d-breathe {
  0%,
  100% {
    transform: translateY(0) rotate(-.25deg) scale(1);
  }

  50% {
    transform: translateY(-4px) rotate(.35deg) scale(1.012);
  }
}

@keyframes elephant-3d-jump {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1.01);
  }

  50% {
    transform: translateY(-6px) rotate(1.5deg) scale(1.025);
  }
}

@keyframes rig-walk {
  0%,
  100% {
    transform: translateY(0) rotate(-.35deg);
  }

  25% {
    transform: translateY(1px) rotate(.25deg);
  }

  50% {
    transform: translateY(-5px) rotate(.55deg);
  }

  75% {
    transform: translateY(1px) rotate(-.2deg);
  }
}

@keyframes rig-jump {
  0%,
  100% {
    transform: translateY(0) rotate(-.5deg);
  }

  50% {
    transform: translateY(-4px) rotate(1.4deg);
  }
}

@keyframes front-leg-walk {
  0%,
  100% {
    transform: rotate(-3deg) translateY(1px);
  }

  25% {
    transform: rotate(4.5deg) translateY(0);
  }

  50% {
    transform: rotate(7deg) translateY(-3px);
  }

  75% {
    transform: rotate(-5deg) translateY(2px);
  }
}

@keyframes back-leg-walk {
  0%,
  100% {
    transform: rotate(5deg) translateY(-1px);
  }

  25% {
    transform: rotate(-4deg) translateY(2px);
  }

  50% {
    transform: rotate(-7deg) translateY(1px);
  }

  75% {
    transform: rotate(4deg) translateY(-2px);
  }
}

@keyframes front-leg-jump {
  0%,
  100% {
    transform: rotate(-9deg) translateY(-3px);
  }

  50% {
    transform: rotate(8deg) translateY(-7px);
  }
}

@keyframes back-leg-jump {
  0%,
  100% {
    transform: rotate(8deg) translateY(-2px);
  }

  50% {
    transform: rotate(-8deg) translateY(-6px);
  }
}

@keyframes trunk-walk {
  0%,
  100% {
    transform: rotate(-1deg) translateY(0);
  }

  30% {
    transform: rotate(3deg) translateY(1px);
  }

  62% {
    transform: rotate(-4deg) translateY(-1px);
  }
}

@keyframes trunk-jump {
  0%,
  100% {
    transform: rotate(-6deg) translateY(-3px);
  }

  50% {
    transform: rotate(5deg) translateY(-7px);
  }
}

@keyframes ear-walk {
  0%,
  100% {
    transform: rotate(.4deg) scale(1);
  }

  45% {
    transform: rotate(-3.6deg) scale(1.012);
  }

  72% {
    transform: rotate(2.2deg) scale(.998);
  }
}

@keyframes ear-jump {
  0%,
  100% {
    transform: rotate(-5deg) scale(1.018);
  }

  50% {
    transform: rotate(4deg) scale(1.032);
  }
}

@keyframes head-walk {
  0%,
  100% {
    transform: rotate(.25deg);
  }

  50% {
    transform: rotate(-1deg) translateY(-1px);
  }
}

@keyframes tail-walk {
  0%,
  100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(8deg) translateY(-2px);
  }
}

@keyframes sprite-jump {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scaleX(1);
  }

  50% {
    transform: translateY(-4px) rotate(2deg) scaleX(1.018) scaleY(.992);
  }
}

@keyframes sprite-walk {
  0%,
  100% {
    transform: translateY(0) rotate(-.55deg) scaleX(1) scaleY(1);
  }

  18% {
    transform: translateY(2px) rotate(.28deg) scaleX(1.006) scaleY(.996);
  }

  36% {
    transform: translateY(-5px) rotate(.7deg) scaleX(.998) scaleY(1.006);
  }

  54% {
    transform: translateY(1px) rotate(-.2deg) scaleX(1.006) scaleY(.997);
  }

  72% {
    transform: translateY(-4px) rotate(-.78deg) scaleX(.998) scaleY(1.005);
  }
}

@keyframes walk-shadow {
  0%,
  100% {
    opacity: .18;
    transform: scaleX(.96);
  }

  36%,
  72% {
    opacity: .13;
    transform: scaleX(.82);
  }

  18%,
  54% {
    opacity: .22;
    transform: scaleX(1.04);
  }
}

@keyframes walk-girl-shadow-3d {
  0%,
  100% {
    opacity: .52;
    transform: translateX(var(--girl-shadow-x, 0px)) scaleX(.94);
  }

  36%,
  72% {
    opacity: .44;
    transform: translateX(var(--girl-shadow-x, 0px)) scaleX(.82);
  }

  18%,
  54% {
    opacity: .62;
    transform: translateX(var(--girl-shadow-x, 0px)) scaleX(1);
  }
}

@keyframes walk-dog-shadow-3d {
  0%,
  100% {
    opacity: .5;
    transform: translateX(var(--dog-shadow-x, 0px)) scaleX(.92);
  }

  36%,
  72% {
    opacity: .43;
    transform: translateX(var(--dog-shadow-x, 0px)) scaleX(.8);
  }

  18%,
  54% {
    opacity: .58;
    transform: translateX(var(--dog-shadow-x, 0px)) scaleX(1);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-.5deg);
  }

  50% {
    transform: translateY(-7px) rotate(.7deg);
  }
}

@keyframes shadow-pulse {
  50% {
    transform: scaleX(.9);
    opacity: .72;
  }
}

@keyframes tail-wag {
  50% {
    transform: rotate(12deg);
  }
}

@keyframes ear-flap {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(-5deg) scale(1.04);
  }
}

@keyframes trunk-wiggle {
  50% {
    transform: rotate(4deg);
  }
}

@keyframes blink-eye {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(.12);
  }
}

@keyframes blink-pupil {
  0%,
  92%,
  100% {
    opacity: 1;
  }

  95% {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .touch-controls {
    display: block;
  }

  .kid-clock {
    top: 14px;
    left: 12px;
    width: 88px;
  }

  .hud-panel {
    top: 14px;
    right: 10px;
    gap: 6px;
  }

  .score-pill {
    padding: 6px 9px;
    border-width: 3px;
  }

  .theme-toggle {
    min-width: 66px;
    padding: 6px 8px;
    border-width: 3px;
  }

  .elephant-wrap {
    left: 22px;
    width: min(72vw, 320px);
    bottom: clamp(86px, 15vh, 118px);
  }

  .elephant-wrap-3d {
    left: calc(50vw - min(54vw, 255px));
    width: min(108vw, 510px);
    bottom: clamp(76px, 13vh, 108px);
  }

  .elephant-shadow-3d {
    left: calc(50vw - min(54vw, 255px));
    width: min(108vw, 510px);
    bottom: clamp(76px, 13vh, 108px);
  }
}

@media (hover: none) and (pointer: coarse) {
  .touch-controls {
    display: block;
  }
}