:root {
  color-scheme: light;
  --gold: #f6c343;
  --deep-gold: #9b6417;
  --ink: #1f211d;
  --leaf: #3d7d52;
  --water: #2d82b7;
  --clay: #b55e45;
  --night: #25305f;
  --panel: rgba(255, 250, 231, 0.9);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  font-family: "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #18273f;
}

button {
  font: inherit;
}

.world {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 238, 153, 0.65), transparent 22%),
    linear-gradient(180deg, #5db1d4 0%, #9bd48c 58%, #6b9b54 100%);
  isolation: isolate;
}

.gate-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 241, 150, 0.46), transparent 35%),
    radial-gradient(circle at 18% 18%, rgba(255, 183, 196, 0.52), transparent 28%),
    linear-gradient(180deg, #5b2a63 0%, #b84f70 56%, #f08a75 100%);
  transition: opacity 700ms ease, visibility 700ms ease;
}

.gate-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 9% 18%, #ff6f91 0 18px, transparent 19px),
    radial-gradient(circle at 13% 26%, #ffcf4a 0 12px, transparent 13px),
    radial-gradient(circle at 87% 16%, #4fd1ff 0 18px, transparent 19px),
    radial-gradient(circle at 83% 27%, #7bdc64 0 13px, transparent 14px),
    radial-gradient(circle at 22% 78%, #ffef72 0 10px, transparent 11px),
    radial-gradient(circle at 74% 72%, #ff8ac2 0 10px, transparent 11px),
    linear-gradient(135deg, transparent 0 8%, rgba(255, 255, 255, 0.12) 8% 9%, transparent 9% 100%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, 0.08) 46px 48px);
  pointer-events: none;
}

.gate-screen::after {
  content: "★     ●     ◆     ★     ●     ◆";
  position: absolute;
  top: 34px;
  left: 50%;
  z-index: 1;
  width: min(880px, 92vw);
  transform: translateX(-50%);
  color: #ffe56a;
  font-size: clamp(22px, 3.5vw, 38px);
  letter-spacing: clamp(8px, 2vw, 24px);
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 233, 120, 0.75);
  pointer-events: none;
}

.gate-screen.has-key {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cfilter id='g'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2' flood-color='%23ffe45c'/%3E%3C/filter%3E%3Cg filter='url(%23g)' transform='rotate(-25 24 24)'%3E%3Ccircle cx='15' cy='25' r='8' fill='%23ffd84d' stroke='%238a5206' stroke-width='3'/%3E%3Ccircle cx='15' cy='25' r='3' fill='%23fff4b1'/%3E%3Crect x='22' y='22' width='21' height='6' rx='3' fill='%23ffc22d' stroke='%238a5206' stroke-width='2'/%3E%3Crect x='35' y='28' width='4' height='8' fill='%238a5206'/%3E%3Crect x='29' y='28' width='4' height='6' fill='%238a5206'/%3E%3C/g%3E%3C/svg%3E") 12 24, pointer;
}

.gate-screen.has-key * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cfilter id='g'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2' flood-color='%23ffe45c'/%3E%3C/filter%3E%3Cg filter='url(%23g)' transform='rotate(-25 24 24)'%3E%3Ccircle cx='15' cy='25' r='8' fill='%23ffd84d' stroke='%238a5206' stroke-width='3'/%3E%3Ccircle cx='15' cy='25' r='3' fill='%23fff4b1'/%3E%3Crect x='22' y='22' width='21' height='6' rx='3' fill='%23ffc22d' stroke='%238a5206' stroke-width='2'/%3E%3Crect x='35' y='28' width='4' height='8' fill='%238a5206'/%3E%3Crect x='29' y='28' width='4' height='6' fill='%238a5206'/%3E%3C/g%3E%3C/svg%3E") 12 24, pointer !important;
}

.world.is-open .gate-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entrance-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(400px, 660px) minmax(230px, 320px);
  align-items: center;
  gap: clamp(22px, 5vw, 56px);
  width: min(1160px, 100%);
}

.gate-wrap {
  width: min(86vw, 660px);
  aspect-ratio: 1;
  perspective: 1100px;
}

.gate {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  background: transparent;
  transform-style: preserve-3d;
}

.star-gate {
  display: grid;
  place-items: center;
  clip-path: polygon(50% 3%, 62% 35%, 97% 36%, 69% 57%, 79% 91%, 50% 71%, 21% 91%, 31% 57%, 3% 36%, 38% 35%);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.7) 0 7%, transparent 8%),
    repeating-linear-gradient(36deg, rgba(255, 255, 255, 0.2) 0 10px, transparent 11px 24px),
    linear-gradient(145deg, #fff3a6, #ffc83d 44%, #b87313 100%);
  box-shadow: inset 0 -28px 40px rgba(122, 68, 6, 0.28), 0 30px 80px rgba(91, 42, 99, 0.42), 0 0 64px rgba(255, 213, 79, 0.72);
  animation: starFloat 2800ms ease-in-out infinite;
  transition: transform 900ms cubic-bezier(0.18, 0.86, 0.2, 1), filter 260ms ease;
}

.star-gate:hover,
.star-gate:focus-visible {
  filter: brightness(1.08) saturate(1.08);
  outline: 0;
}

.star-gate::before,
.star-gate::after {
  content: "";
  position: absolute;
  inset: 9%;
  clip-path: inherit;
  pointer-events: none;
}

.star-gate::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(255, 255, 255, 0.55) 27% 30%, transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), transparent 38%);
  animation: starShimmer 1800ms linear infinite;
}

.star-gate::after {
  inset: 6%;
  border: 8px solid rgba(255, 250, 194, 0.82);
  filter: drop-shadow(0 0 10px rgba(255, 247, 176, 0.92));
}

.star-inner {
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 172, 0.7), rgba(160, 86, 8, 0.26));
  box-shadow: inset 0 0 24px rgba(112, 60, 6, 0.24);
}

.lock-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 54px;
  transform: translate(-50%, -34%);
  border-radius: 20px 20px 8px 8px;
  background: #3a2107;
  box-shadow: inset 0 0 10px #060401, 0 0 0 8px rgba(255, 239, 136, 0.65);
}

.lock-hole::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 34px;
  height: 30px;
  transform: translateX(-50%);
  border: 7px solid #3a2107;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.gate-screen.has-key .lock-hole {
  animation: lockGlow 900ms ease-in-out infinite alternate;
}

.gate.needs-key {
  animation: lockShake 420ms ease;
}

.gate.opening {
  animation: starUnlock 780ms ease forwards !important;
}

.gate.opening::before {
  animation: starShimmer 260ms linear infinite;
}

.gate-screen.is-unlocking::after {
  content: "✦ ✨ ✦ ✨ ✦";
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 24;
  transform: translate(-50%, -50%);
  color: #ffe875;
  font-size: clamp(42px, 8vw, 96px);
  text-shadow: 0 0 18px #fff, 0 0 44px #ffd43f, 0 0 80px #ff9f1f;
  pointer-events: none;
  animation: goldenUnlock 900ms ease-out forwards;
}

.gate-label {
  position: absolute;
  left: 50%;
  bottom: 32%;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 8.6em;
  padding: 14px 24px;
  border-radius: 6px;
  color: #3f2705;
  background: #fff0a7;
  border: 2px solid #b27918;
  box-shadow: 0 10px 0 rgba(65, 37, 3, 0.3);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.key-box {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 4px solid #b87313;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 248, 196, 0.94), rgba(255, 214, 106, 0.9)),
    repeating-linear-gradient(90deg, #b77825 0 18px, #905514 18px 22px);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.28), 0 18px 38px rgba(0, 0, 0, 0.35);
}

.key-box h2 {
  margin: 0;
  color: #5b3406;
  font-size: 28px;
  text-align: center;
}

.key-question {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: #263b72;
  font-size: 30px;
  font-weight: 900;
  text-align: center;
}

.key-form {
  display: grid;
  gap: 8px;
}

.key-form label {
  font-weight: 900;
  color: #5b3406;
}

.key-form input {
  width: 100%;
  min-height: 44px;
  border: 3px solid #b87313;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}

.key-form button {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  color: #3a2107;
  background: linear-gradient(180deg, #fff2a4, #f4bd28);
  box-shadow: 0 6px 0 #9d6514;
  font-weight: 900;
  cursor: pointer;
}

.key-message {
  min-height: 2.4em;
  margin: 0;
  color: #5b3406;
  font-weight: 900;
  text-align: center;
}

.habitat {
  position: relative;
  min-height: calc(100vh - 112px);
  padding: 24px clamp(14px, 4vw, 48px) 132px;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sun {
  position: absolute;
  top: 38px;
  right: 9vw;
  width: 104px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff7a7 0 12%, transparent 13%),
    radial-gradient(circle at 35% 52%, #5d3510 0 4%, transparent 5%),
    radial-gradient(circle at 65% 52%, #5d3510 0 4%, transparent 5%),
    radial-gradient(circle at 28% 68%, rgba(255, 118, 94, 0.62) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 68%, rgba(255, 118, 94, 0.62) 0 8%, transparent 9%),
    radial-gradient(circle, #ffe875 0 58%, #ffbe34 59% 100%);
  box-shadow: 0 0 0 10px rgba(255, 232, 103, 0.28), 0 0 48px rgba(255, 187, 43, 0.78);
}

.sun::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, #ffd54e 0 10deg, transparent 10deg 22deg);
  animation: sunSpin 18s linear infinite;
}

.sun::after {
  content: "";
  position: absolute;
  left: 40%;
  top: 64%;
  width: 20%;
  height: 9%;
  border: 3px solid #744019;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.cloud {
  position: absolute;
  width: 168px;
  height: 50px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 58%, #e7f8ff 0 22%, transparent 23%),
    linear-gradient(180deg, #ffffff, #dff5ff);
  box-shadow: inset 0 -8px 0 rgba(140, 207, 231, 0.28), 0 10px 18px rgba(63, 92, 104, 0.14);
  filter: drop-shadow(0 8px 12px rgba(63, 92, 104, 0.13));
}

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

.cloud::before {
  width: 74px;
  height: 74px;
  left: 24px;
  bottom: 12px;
}

.cloud::after {
  width: 86px;
  height: 86px;
  right: 18px;
  bottom: 3px;
}

.cloud-one {
  top: 82px;
  left: 7vw;
  transform: rotate(-2deg);
}

.cloud-one::before,
.cloud-one::after {
  box-shadow: inset 0 -8px 0 rgba(140, 207, 231, 0.2);
}

.cloud-two {
  top: 154px;
  right: 20vw;
  transform: scale(0.72);
  opacity: 0.72;
}

.kid-guide {
  position: absolute;
  top: 18px;
  left: clamp(10px, 2vw, 24px);
  z-index: 3;
  width: min(210px, 36vw);
  padding: 12px 13px 12px;
  border: 4px solid #7cc86a;
  border-radius: 8px;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 216, 76, 0.7) 0 10px, transparent 11px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(227, 255, 219, 0.94));
  box-shadow: 0 8px 0 #4c9c58, 0 16px 26px rgba(35, 62, 46, 0.18);
  transform: rotate(-1.5deg);
}

.kid-guide::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -10px;
  height: 18px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #ff6f91 0 16px, #ffd54e 16px 32px, #5bc7ff 32px 48px);
  box-shadow: 0 4px 0 rgba(52, 75, 43, 0.16);
}

.kid-guide h2 {
  margin: 4px 0 8px;
  color: #2767d8;
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 22px;
  text-align: center;
  text-shadow: 0 2px 0 #fff;
}

.kid-guide ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kid-guide li {
  position: relative;
  padding-left: 24px;
  color: #2f5b35;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.kid-guide li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: -1px;
  color: #ffb72c;
  text-shadow: 0 1px 0 #fff;
}

.status-board {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
  margin: 0 auto 20px;
  padding: 16px 22px;
  border: 5px solid #fff2a4;
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 22%, rgba(255, 112, 145, 0.38) 0 18px, transparent 19px),
    radial-gradient(circle at 92% 28%, rgba(91, 203, 255, 0.42) 0 18px, transparent 19px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 239, 151, 0.92) 42%, rgba(204, 245, 255, 0.92));
  text-align: center;
  box-shadow: 0 10px 0 #68b86a, 0 20px 34px rgba(35, 62, 46, 0.18);
}

.status-board::before,
.status-board::after {
  content: "";
  position: absolute;
  top: -16px;
  width: 42px;
  height: 28px;
  border-radius: 8px 8px 18px 18px;
  background: linear-gradient(180deg, #ff7aa8, #ffcf4a);
  box-shadow: 0 4px 0 rgba(96, 67, 10, 0.18);
}

.status-board::before {
  left: 28px;
  transform: rotate(-8deg);
}

.status-board::after {
  right: 28px;
  transform: rotate(8deg);
}

.status-board h1 {
  margin: 0 0 4px;
  font-family: "Comic Sans MS", "Marker Felt", "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: 0;
  color: #1f9cff;
  -webkit-text-stroke: 1px rgba(8, 74, 143, 0.42);
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.9), 0 8px 14px rgba(45, 109, 168, 0.22);
}

.status-board p {
  margin: 0;
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(15px, 2.8vw, 19px);
  font-weight: 800;
  color: #3f6f4b;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.78);
}

.arena {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  align-items: end;
  gap: clamp(10px, 2vw, 24px);
  width: min(1180px, 100%);
  min-height: 60vh;
  margin: 0 auto;
  padding: clamp(42px, 8vh, 88px) 0 18px;
}

.arena::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: -2;
  width: min(980px, 98%);
  height: 58%;
  transform: translateX(-50%);
  border-radius: 42% 42% 8px 8px;
  background:
    linear-gradient(90deg, rgba(107, 78, 35, 0.45) 0 3px, transparent 3px 52px) 0 20% / 58px 72px,
    linear-gradient(#8c6a38 0 0) 0 26% / 100% 5px no-repeat,
    radial-gradient(circle at 20% 65%, #e4c47d 0 5px, transparent 6px),
    radial-gradient(circle at 74% 72%, #9b7a4b 0 4px, transparent 5px),
    linear-gradient(180deg, #8ec85f, #6fa746 42%, #d4a05a 43% 100%);
  box-shadow: inset 0 18px 42px rgba(71, 106, 41, 0.24);
}

.arena::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  z-index: -1;
  width: min(900px, 92%);
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(64, 58, 35, 0.22);
  filter: blur(2px);
}

.animal {
  --fur: #d9902d;
  --fur-dark: #5b3116;
  --fur-light: #f4c66b;
  --walk-delay: 0s;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: 6px;
  min-height: 250px;
  padding: 8px 6px 14px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}

.animal:hover,
.animal:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.74);
  outline-offset: 2px;
}

.animal-figure {
  position: relative;
  align-self: end;
  width: clamp(166px, 18.5vw, 242px);
  height: clamp(132px, 15.5vw, 188px);
  transform-origin: 50% 88%;
  animation: stroll 5.8s ease-in-out infinite;
  animation-delay: var(--walk-delay);
  filter:
    drop-shadow(0 18px 10px rgba(37, 43, 24, 0.2))
    drop-shadow(0 4px 0 rgba(255, 255, 255, 0.3));
}

.animal-figure::after {
  content: "";
  position: absolute;
  left: 29%;
  top: 16%;
  z-index: 6;
  width: 11%;
  height: 9%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  filter: blur(2px);
  pointer-events: none;
}

.animal-figure::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 9%;
  bottom: 3%;
  height: 12%;
  border-radius: 50%;
  background: rgba(38, 44, 24, 0.2);
  filter: blur(5px);
  transform: scaleX(0.92);
}

.tiger {
  --fur: #ee8a1d;
  --fur-dark: #21160d;
  --fur-light: #ffc45a;
}

.lion {
  --fur: #d39a42;
  --fur-dark: #6f3518;
  --fur-light: #f4c96a;
  --walk-delay: -1.1s;
}

.elephant {
  --fur: #9ba8c9;
  --fur-dark: #5b6685;
  --fur-light: #d4ddf2;
  --walk-delay: -2.2s;
}

.giraffe {
  --fur: #e6ae44;
  --fur-dark: #8b5525;
  --fur-light: #ffdb76;
  --walk-delay: -3.4s;
}

.hyena {
  --fur: #c49a66;
  --fur-dark: #45352c;
  --fur-light: #e0c08b;
  --walk-delay: -0.8s;
}

.leopard {
  --fur: #e0a947;
  --fur-dark: #211912;
  --fur-light: #ffd875;
  --walk-delay: -2.6s;
}

.zebra {
  --fur: #f4f0df;
  --fur-dark: #191917;
  --fur-light: #ffffff;
  --walk-delay: -3.1s;
}

.buffalo {
  --fur: #6b5942;
  --fur-dark: #2b2119;
  --fur-light: #9b8464;
  --walk-delay: -1.9s;
}

.hippo {
  --fur: #b790a8;
  --fur-dark: #73586c;
  --fur-light: #e0bdcf;
  --walk-delay: -2.9s;
}

.rhino {
  --fur: #a8b4b2;
  --fur-dark: #687472;
  --fur-light: #d6e0dc;
  --walk-delay: -3.7s;
}

.crocodile {
  --fur: #5fae55;
  --fur-dark: #2c6b35;
  --fur-light: #98d86b;
  --walk-delay: -4.1s;
}

.fox {
  --fur: #f07e25;
  --fur-dark: #4c2815;
  --fur-light: #ffb159;
  --walk-delay: -1.3s;
}

.dalmatian {
  --fur: #f2f2e8;
  --fur-dark: #1d1d1b;
  --fur-light: #ffffff;
  --walk-delay: -1.7s;
}

.giraffe .animal-figure {
  width: clamp(178px, 19vw, 250px);
  height: clamp(182px, 21vw, 252px);
}

.body,
.head,
.tail,
.leg,
.mane,
.neck,
.horn,
.trunk,
.tusk,
.interaction-prop,
.belly,
.cheek,
.smile,
.ear,
.eye,
.snout,
.stripe,
.spot,
.ridge,
.face-mark,
.tear-mark {
  position: absolute;
  display: block;
}

.mane,
.neck,
.horn,
.trunk,
.tusk,
.cheek,
.smile,
.stripe,
.spot,
.ridge,
.face-mark,
.tear-mark {
  display: none;
}

.lion .mane,
.animal .belly,
.animal .cheek,
.animal .smile,
.giraffe .neck,
.giraffe .horn,
.elephant .trunk,
.elephant .tusk,
.tiger .stripe,
.tiger .face-mark,
.leopard .spot,
.zebra .stripe,
.hyena .ridge,
.giraffe .spot,
.buffalo .horn,
.rhino .horn,
.dalmatian .spot {
  display: block;
}

.body {
  left: 22%;
  bottom: 27%;
  width: 58%;
  height: 46%;
  overflow: hidden;
  border-radius: 64% 56% 48% 54% / 68% 66% 46% 48%;
  background:
    radial-gradient(ellipse at 48% 86%, rgba(255, 241, 194, 0.82) 0 33%, transparent 34%),
    linear-gradient(115deg, rgba(255, 255, 219, 0.5) 0 18%, transparent 19%),
    linear-gradient(180deg, var(--fur-light), var(--fur) 58%, color-mix(in srgb, var(--fur) 72%, #452712));
  border: 4px solid rgba(73, 48, 26, 0.2);
  box-shadow:
    inset -12px -12px 0 rgba(70, 42, 18, 0.09),
    inset 14px 12px 0 rgba(255, 255, 232, 0.25),
    0 7px 0 rgba(91, 65, 29, 0.1);
}

.body::before {
  content: "";
  position: absolute;
  left: 10%;
  top: 14%;
  width: 42%;
  height: 34%;
  border-radius: 58% 42% 50% 44%;
  background:
    radial-gradient(ellipse at 28% 34%, rgba(255, 255, 240, 0.5), transparent 52%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 64%);
  opacity: 0.88;
  pointer-events: none;
}

.body::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: 6%;
  width: 62%;
  height: 28%;
  border-radius: 50%;
  background: rgba(255, 231, 170, 0.38);
  filter: blur(1px);
}

.head {
  right: 5%;
  bottom: 45%;
  width: 38%;
  height: 40%;
  border-radius: 64% 58% 58% 56% / 66% 66% 54% 56%;
  background:
    radial-gradient(circle at 78% 68%, rgba(255, 240, 205, 0.82) 0 22%, transparent 23%),
    linear-gradient(160deg, rgba(255, 255, 220, 0.46), transparent 40%),
    linear-gradient(180deg, var(--fur-light), var(--fur) 64%, color-mix(in srgb, var(--fur) 68%, #3f2411));
  border: 4px solid rgba(73, 48, 26, 0.18);
  box-shadow:
    inset -6px -6px 0 rgba(60, 38, 18, 0.08),
    inset 8px 8px 0 rgba(255, 255, 230, 0.2);
  transform-origin: 24% 76%;
}

.head::before {
  content: "";
  position: absolute;
  left: 19%;
  top: 15%;
  width: 43%;
  height: 26%;
  border-radius: 50%;
  background: rgba(255, 255, 230, 0.26);
  transform: rotate(-13deg);
  pointer-events: none;
}

.head::after {
  content: "";
  position: absolute;
  right: 5%;
  bottom: 26%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1a120d;
  box-shadow: 0 3px 0 rgba(255, 239, 214, 0.48);
}

.ear {
  top: -15%;
  width: 30%;
  height: 34%;
  border-radius: 72% 72% 42% 42%;
  background:
    radial-gradient(circle at 50% 60%, #ffd8bd 0 34%, transparent 35%),
    linear-gradient(180deg, var(--fur-dark), color-mix(in srgb, var(--fur-dark) 72%, var(--fur)));
  box-shadow: inset 0 -4px 0 rgba(72, 39, 18, 0.1), 0 2px 0 rgba(255, 255, 255, 0.18);
}

.ear-left {
  left: 18%;
  transform: rotate(-18deg);
}

.ear-right {
  right: 18%;
  transform: rotate(18deg);
}

.eye {
  right: 28%;
  top: 30%;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, #fff 0 19%, transparent 20%),
    radial-gradient(circle at 62% 64%, #6b411f 0 22%, transparent 23%),
    #1a130e;
  box-shadow:
    -24px 0 0 #1a130e,
    -24px 0 0 4px rgba(255, 255, 255, 0.36),
    0 0 0 4px rgba(255, 255, 255, 0.36);
}

.eye::before {
  content: "";
  position: absolute;
  left: calc(-24px + 24%);
  top: 22%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}

.eye::after {
  content: "";
  position: absolute;
  right: -19px;
  top: 24px;
  width: 18px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 126, 126, 0.42);
  box-shadow: -48px 0 0 rgba(255, 126, 126, 0.36);
}

.snout {
  right: 1%;
  bottom: 15%;
  width: 39%;
  height: 27%;
  border-radius: 64% 52% 60% 50%;
  background:
    radial-gradient(circle at 84% 47%, #17100c 0 11%, transparent 12%),
    linear-gradient(180deg, rgba(255, 246, 219, 0.94), rgba(230, 180, 119, 0.76));
  box-shadow: inset 0 -4px 0 rgba(76, 44, 22, 0.08), 0 2px 0 rgba(255, 255, 255, 0.22);
}

.snout::before {
  content: "";
  position: absolute;
  right: 47%;
  top: 43%;
  width: 58%;
  height: 42%;
  border-top: 2px solid rgba(57, 32, 15, 0.26);
  border-radius: 50%;
  box-shadow:
    -7px -5px 0 -6px rgba(57, 32, 15, 0.22),
    -12px 4px 0 -6px rgba(57, 32, 15, 0.2);
}

.snout::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 16%;
  width: 34%;
  height: 36%;
  border-bottom: 3px solid rgba(57, 32, 15, 0.38);
  border-radius: 0 0 999px 999px;
}

.tail {
  left: 10%;
  bottom: 53%;
  width: 27%;
  height: 14%;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(180deg, var(--fur-light), var(--fur));
  transform: rotate(-25deg);
  transform-origin: right center;
  box-shadow: inset 0 -4px 0 rgba(63, 38, 18, 0.11);
}

.tail::after {
  content: "";
  position: absolute;
  left: -10%;
  top: -20%;
  width: 32%;
  height: 140%;
  border-radius: 50%;
  background: var(--fur-dark);
}

.leg {
  bottom: 9%;
  width: 11%;
  height: 30%;
  border-radius: 999px 999px 44% 44%;
  background: linear-gradient(180deg, var(--fur) 0 68%, color-mix(in srgb, var(--fur-dark) 72%, var(--fur)) 69% 100%);
  transform-origin: top center;
  animation: legWalk 620ms ease-in-out infinite alternate;
}

.leg::after {
  content: "";
  position: absolute;
  left: -26%;
  bottom: -6%;
  width: 150%;
  height: 24%;
  border-radius: 70% 80% 30% 30%;
  background:
    radial-gradient(circle at 27% 62%, rgba(255, 240, 215, 0.72) 0 7%, transparent 8%),
    radial-gradient(circle at 53% 64%, rgba(255, 240, 215, 0.56) 0 6%, transparent 7%),
    linear-gradient(180deg, color-mix(in srgb, var(--fur-dark) 82%, #fff 8%), var(--fur-dark));
}

.front-leg {
  right: 28%;
}

.back-leg {
  left: 32%;
  animation-delay: -320ms;
}

.animal-name {
  position: relative;
  z-index: 1;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 250, 231, 0.84);
  box-shadow: 0 4px 0 rgba(96, 69, 29, 0.12);
  font-size: clamp(17px, 2.6vw, 24px);
  font-weight: 800;
}

.animal-status {
  position: relative;
  z-index: 1;
  min-width: 6em;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 -2px 0 rgba(109, 91, 48, 0.08);
}

.stripe {
  top: 0;
  width: 8%;
  height: 78%;
  border-radius: 999px;
  background: linear-gradient(180deg, #3a230f, #1f140c);
  opacity: 0.72;
  transform: rotate(16deg);
  box-shadow: 20px 17px 0 -3px #21140c, 43px -2px 0 -2px #21140c;
}

.tiger .body {
  background:
    radial-gradient(ellipse at 48% 87%, rgba(255, 235, 185, 0.78) 0 32%, transparent 33%),
    linear-gradient(115deg, rgba(255, 255, 220, 0.46) 0 17%, transparent 18%),
    linear-gradient(180deg, #ffd36f 0%, #f49a2f 58%, #bd671e 100%);
}

.tiger .body::before {
  width: 50%;
  background:
    repeating-linear-gradient(104deg, rgba(75, 45, 18, 0.3) 0 7px, transparent 8px 23px),
    radial-gradient(ellipse at 36% 24%, rgba(255, 255, 235, 0.48), transparent 58%);
}

.tiger .head {
  background:
    radial-gradient(circle at 72% 70%, rgba(255, 241, 213, 0.88) 0 22%, transparent 23%),
    repeating-linear-gradient(112deg, rgba(75, 45, 18, 0.34) 0 5px, transparent 6px 18px),
    linear-gradient(180deg, #ffd36f, #f49a2f 66%, #bd671e);
}

.tiger .ear {
  background:
    radial-gradient(circle at 50% 58%, #ffd8bd 0 32%, transparent 33%),
    radial-gradient(circle at 50% 50%, #24160e 0 55%, transparent 56%),
    linear-gradient(180deg, #ffc45a, #ee8a1d);
}

.stripe-one {
  left: 23%;
}

.stripe-two {
  left: 45%;
  height: 82%;
}

.stripe-three {
  left: 66%;
}

.face-mark {
  left: 25%;
  top: 7%;
  width: 8%;
  height: 46%;
  border-radius: 999px;
  background: #20130c;
  transform: rotate(-12deg);
  opacity: 0.8;
  box-shadow: 17px 2px 0 -3px #20130c;
}

.tiger .face-mark {
  top: 5%;
  height: 40%;
  box-shadow:
    15px 2px 0 -3px #20130c,
    31px 3px 0 -4px #20130c,
    21px 22px 0 -4px #20130c;
}

.tiger .tail::after {
  box-shadow: 22px 2px 0 -5px #20130c, 42px 3px 0 -6px #20130c;
}

.mane {
  right: 14%;
  bottom: 36%;
  width: 42%;
  height: 56%;
  border-radius: 56% 54% 52% 56%;
  background:
    radial-gradient(circle at 56% 52%, #b56631 0 35%, transparent 36%),
    conic-gradient(from 8deg, #7c3d20, #c76d34, #e59344, #995023, #7c3d20);
  box-shadow: inset -7px -7px 0 rgba(35, 17, 8, 0.1), 0 4px 0 rgba(76, 36, 18, 0.1);
}

.mane::before,
.mane::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  pointer-events: none;
}

.mane::before {
  background: repeating-conic-gradient(from 10deg, rgba(255, 214, 118, 0.24) 0 8deg, transparent 9deg 20deg);
  mix-blend-mode: screen;
}

.mane::after {
  inset: 16% 13% 18% 18%;
  background: radial-gradient(circle at 58% 52%, rgba(255, 190, 92, 0.36), transparent 62%);
  box-shadow:
    -14px 10px 0 -11px rgba(58, 28, 14, 0.46),
    10px -10px 0 -11px rgba(58, 28, 14, 0.38);
}

.lion .head {
  right: 7%;
  bottom: 47%;
  width: 35%;
  height: 35%;
  border-radius: 64% 58% 58% 56%;
}

.lion .body {
  background:
    radial-gradient(ellipse at 46% 86%, rgba(255, 226, 154, 0.76) 0 34%, transparent 35%),
    linear-gradient(115deg, rgba(255, 255, 219, 0.42) 0 18%, transparent 19%),
    linear-gradient(180deg, var(--fur-light), var(--fur) 64%, #a46c2c);
}

.lion .body::before {
  left: 8%;
  top: 21%;
  width: 32%;
  height: 40%;
  border-radius: 50% 28% 48% 45%;
  background:
    radial-gradient(ellipse at 42% 18%, rgba(255, 235, 170, 0.54), transparent 56%),
    linear-gradient(180deg, rgba(125, 61, 26, 0.16), transparent);
}

.lion .tail {
  height: 11%;
}

.lion .tail::after {
  left: -18%;
  top: -44%;
  width: 42%;
  height: 190%;
  background:
    radial-gradient(circle at 42% 38%, #a95b2d 0 28%, transparent 29%),
    linear-gradient(180deg, #5a2a14, #87421f);
}

.hyena .body {
  height: 39%;
  border-radius: 58% 52% 42% 46%;
}

.hyena .head {
  width: 31%;
  height: 32%;
  right: 7%;
  bottom: 44%;
}

.hyena .ridge {
  left: 6%;
  top: -15%;
  width: 76%;
  height: 20%;
  border-radius: 999px 999px 0 0;
  background: repeating-linear-gradient(90deg, var(--fur-dark) 0 8px, transparent 8px 14px);
}

.hyena .front-leg,
.hyena .back-leg {
  height: 36%;
}

.leopard .body {
  width: 59%;
  height: 38%;
  border-radius: 58% 52% 42% 46%;
}

.leopard .head {
  width: 31%;
  height: 31%;
  right: 6%;
  bottom: 44%;
}

.leopard .leg {
  height: 37%;
  width: 8%;
}

.leopard .tail {
  left: 7%;
  bottom: 49%;
  width: 33%;
  height: 9%;
}

.zebra .body {
  background:
    repeating-linear-gradient(102deg, rgba(25, 25, 23, 0.86) 0 8px, rgba(25, 25, 23, 0.86) 8px 14px, transparent 15px 30px),
    radial-gradient(ellipse at 48% 86%, rgba(255, 241, 194, 0.48) 0 33%, transparent 34%),
    linear-gradient(180deg, var(--fur-light), var(--fur) 68%, #d3cfbd);
}

.zebra .head {
  background:
    repeating-linear-gradient(104deg, rgba(25, 25, 23, 0.82) 0 5px, transparent 6px 18px),
    linear-gradient(180deg, var(--fur-light), var(--fur));
}

.zebra .tail::after {
  height: 180%;
}

.buffalo .body,
.hippo .body,
.rhino .body {
  width: 64%;
  height: 48%;
  bottom: 22%;
  border-radius: 60% 56% 44% 46%;
}

.buffalo .head,
.hippo .head,
.rhino .head {
  right: 5%;
  bottom: 39%;
  width: 36%;
  height: 37%;
}

.buffalo .horn {
  top: -10%;
  width: 30%;
  height: 16%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d9c79d, #fff2c8);
}

.buffalo .horn-left {
  left: -10%;
  transform: rotate(-28deg);
}

.buffalo .horn-right {
  right: -10%;
  left: auto;
  transform: rotate(28deg);
}

.buffalo .leg,
.hippo .leg,
.rhino .leg {
  width: 13%;
  height: 30%;
}

.hippo .snout {
  right: -4%;
  bottom: 14%;
  width: 48%;
  height: 30%;
  background:
    radial-gradient(circle at 24% 64%, #2b2024 0 7%, transparent 8%),
    radial-gradient(circle at 68% 64%, #2b2024 0 7%, transparent 8%),
    linear-gradient(180deg, #c3aeb6, #7b6c73);
}

.rhino .horn-left {
  display: block;
  left: auto;
  right: -4%;
  top: 48%;
  width: 28%;
  height: 13%;
  border-radius: 70% 20% 20% 70%;
  background: linear-gradient(90deg, #f1e7c7, #a69773);
  transform: rotate(-10deg);
}

.rhino .horn-right {
  display: none;
}

.crocodile .animal-figure {
  height: clamp(100px, 12vw, 140px);
}

.crocodile .body {
  left: 12%;
  bottom: 22%;
  width: 68%;
  height: 31%;
  border-radius: 999px 52% 44% 999px;
  background:
    repeating-linear-gradient(90deg, rgba(38, 107, 53, 0.72) 0 12px, transparent 13px 28px),
    linear-gradient(180deg, var(--fur-light), var(--fur) 58%, var(--fur-dark));
}

.crocodile .head {
  right: 3%;
  bottom: 25%;
  width: 38%;
  height: 28%;
  border-radius: 48% 72% 54% 44%;
}

.crocodile .ear {
  display: none;
}

.crocodile .snout {
  right: -18%;
  width: 54%;
  height: 28%;
}

.crocodile .leg {
  bottom: 8%;
  width: 9%;
  height: 18%;
}

.fox .body {
  width: 55%;
  height: 39%;
}

.fox .head {
  width: 33%;
  height: 34%;
}

.fox .ear {
  top: -24%;
  height: 42%;
  border-radius: 18% 80% 18% 80%;
}

.fox .tail {
  left: 2%;
  bottom: 43%;
  width: 42%;
  height: 20%;
  border-radius: 999px 30% 30% 999px;
}

.fox .tail::after {
  left: -4%;
  top: 5%;
  width: 34%;
  height: 90%;
  background: #fff5d8;
}

.dalmatian .body,
.dalmatian .head {
  background:
    radial-gradient(circle at 24% 35%, #1e1e1c 0 9%, transparent 10%),
    radial-gradient(circle at 58% 58%, #1e1e1c 0 7%, transparent 8%),
    linear-gradient(180deg, var(--fur-light), var(--fur) 70%, #d7d6c8);
}

.dalmatian .ear {
  background: #1e1e1c;
}

.spot {
  width: 10%;
  aspect-ratio: 1;
  border-radius: 58% 52% 50% 57%;
  background: radial-gradient(circle, var(--fur-dark) 0 58%, rgba(255, 219, 120, 0.18) 59% 100%);
  opacity: 0.9;
}

.spot-one {
  left: 22%;
  top: 22%;
  box-shadow: 31px -6px 0 -2px var(--fur-dark), 60px 17px 0 -3px var(--fur-dark);
}

.spot-two {
  left: 42%;
  top: 48%;
  box-shadow: 35px 7px 0 -3px var(--fur-dark), -26px 18px 0 -4px var(--fur-dark);
}

.spot-three {
  left: 60%;
  top: 20%;
}

.spot-four {
  left: 73%;
  top: 52%;
}

.tear-mark {
  right: 24%;
  top: 43%;
  width: 4%;
  height: 38%;
  border-radius: 999px;
  background: var(--fur-dark);
  transform: rotate(18deg);
}

.elephant .animal-figure {
  width: clamp(184px, 19.5vw, 260px);
  height: clamp(150px, 16.5vw, 202px);
}

.elephant .body {
  left: 14%;
  bottom: 21%;
  width: 67%;
  height: 55%;
  border-radius: 66% 60% 50% 52% / 70% 66% 46% 46%;
  background:
    radial-gradient(ellipse at 44% 88%, rgba(245, 247, 255, 0.4) 0 30%, transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.36), transparent 32%),
    linear-gradient(180deg, #dbe5ff, #a5b2d6 62%, #7180a4);
}

.elephant .head {
  right: 2%;
  bottom: 39%;
  width: 43%;
  height: 50%;
  border-radius: 66% 58% 62% 64%;
  background:
    radial-gradient(circle at 72% 70%, rgba(255, 239, 228, 0.48) 0 18%, transparent 19%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.32), transparent 34%),
    linear-gradient(180deg, #dbe5ff, #a5b2d6 66%, #7180a4);
}

.elephant .ear {
  top: 4%;
  width: 54%;
  height: 72%;
  border-radius: 72% 54% 66% 58%;
  background:
    radial-gradient(circle at 52% 54%, rgba(255, 194, 205, 0.48) 0 36%, transparent 37%),
    radial-gradient(ellipse at 34% 28%, rgba(255, 255, 255, 0.34), transparent 48%),
    linear-gradient(180deg, #cfd9f6, #8f9dc4);
  z-index: -1;
}

.elephant .ear-left {
  left: -18%;
  transform: rotate(-12deg);
}

.elephant .ear-right {
  right: -2%;
  transform: rotate(14deg);
}

.elephant .eye {
  top: 30%;
  right: 34%;
  width: 11%;
  box-shadow: none;
}

.elephant .snout {
  display: none;
}

.trunk {
  right: 5%;
  top: 51%;
  width: 20%;
  height: 78%;
  border-radius: 999px 999px 68% 68%;
  background:
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(72, 82, 110, 0.16) 13px 15px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 36%),
    linear-gradient(180deg, #a5b2d6, #7180a4);
  transform: rotate(-8deg);
  transform-origin: top center;
}

.trunk::after {
  content: "";
  position: absolute;
  right: -34%;
  bottom: -4%;
  width: 92%;
  height: 24%;
  border-radius: 999px;
  background: var(--fur-dark);
  transform: rotate(-22deg);
}

.tusk {
  top: 67%;
  width: 30%;
  height: 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, #fffdf0, #e8d49a);
  transform-origin: right center;
}

.tusk-left {
  right: 12%;
  transform: rotate(18deg);
}

.tusk-right {
  right: 23%;
  transform: rotate(-12deg);
}

.elephant .leg {
  bottom: 5%;
  width: 14%;
  height: 34%;
  border-radius: 999px 999px 28% 28%;
  background: linear-gradient(180deg, var(--fur), var(--fur-dark));
}

.elephant .front-leg {
  right: 26%;
}

.elephant .back-leg {
  left: 27%;
}

.elephant .tail {
  left: 9%;
  bottom: 52%;
  width: 16%;
  height: 6%;
  transform: rotate(-38deg);
}

.giraffe .body {
  left: 20%;
  bottom: 18%;
  width: 55%;
  height: 31%;
  border-radius: 58% 52% 42% 46%;
  background:
    radial-gradient(circle at 22% 32%, #9a5f2c 0 10%, transparent 11%),
    radial-gradient(circle at 47% 56%, #9a5f2c 0 11%, transparent 12%),
    radial-gradient(circle at 70% 28%, #9a5f2c 0 9%, transparent 10%),
    radial-gradient(ellipse at 46% 90%, rgba(255, 232, 164, 0.64) 0 29%, transparent 30%),
    linear-gradient(180deg, #ffdf85, #efb852 68%, #bd7937);
}

.giraffe .neck {
  right: 25%;
  bottom: 40%;
  width: 17%;
  height: 53%;
  border-radius: 999px 999px 60% 60%;
  background:
    radial-gradient(circle at 46% 20%, #9a5f2c 0 14%, transparent 15%),
    radial-gradient(circle at 62% 53%, #9a5f2c 0 13%, transparent 14%),
    linear-gradient(90deg, #d99f45, #ffdf85 44%, #efb852);
  transform: rotate(-9deg);
  transform-origin: bottom center;
  box-shadow: inset -5px 0 0 rgba(80, 45, 18, 0.12);
}

.giraffe .head {
  right: 1%;
  bottom: 80%;
  width: 39%;
  height: 25%;
  border-radius: 54% 68% 60% 54%;
  background:
    radial-gradient(circle at 26% 46%, #9a5f2c 0 10%, transparent 11%),
    radial-gradient(circle at 78% 70%, rgba(255, 240, 205, 0.78) 0 20%, transparent 21%),
    linear-gradient(180deg, #ffdf85, #efb852 70%, #bd7937);
}

.giraffe .leg {
  bottom: 0;
  width: 8%;
  height: 44%;
  background:
    linear-gradient(180deg, var(--fur) 0 42%, #8b5525 43% 50%, var(--fur) 51% 76%, var(--fur-dark) 77% 100%);
}

.giraffe .tail {
  left: 9%;
  bottom: 35%;
  width: 22%;
  transform: rotate(-38deg);
}

.giraffe .eye {
  top: 40%;
  right: 23%;
}

.giraffe .snout {
  right: -3%;
  width: 40%;
  height: 27%;
}

.giraffe .ear {
  top: -18%;
  width: 20%;
  height: 34%;
}

.horn {
  top: -42%;
  width: 8%;
  height: 38%;
  border-radius: 999px;
  background: var(--fur-dark);
}

.horn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -12%;
  width: 180%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fur-dark);
  transform: translateX(-50%);
}

.horn-left {
  left: 34%;
}

.horn-right {
  left: 55%;
}

.neck-spot-one {
  left: 24%;
  top: 26%;
  width: 34%;
}

.neck-spot-two {
  left: 44%;
  top: 58%;
  width: 32%;
}

.giraffe .spot {
  border-radius: 32% 58% 38% 48%;
  background: #774721;
}

/* Rebuilt soft cartoon animal models. */
.animal-figure {
  width: clamp(188px, 20vw, 268px);
  height: clamp(154px, 17vw, 218px);
}

.animal-figure::before {
  left: 12%;
  right: 7%;
  bottom: 0;
  height: 13%;
  background: rgba(34, 41, 23, 0.18);
  filter: blur(6px);
}

.animal-figure::after {
  left: 31%;
  top: 13%;
  z-index: 10;
  width: 12%;
  height: 10%;
  background: rgba(255, 255, 255, 0.22);
}

.body {
  left: 18%;
  bottom: 25%;
  z-index: 2;
  width: 61%;
  height: 48%;
  border: 5px solid rgba(66, 46, 28, 0.2);
  border-radius: 66% 58% 50% 56% / 70% 66% 48% 50%;
  background:
    radial-gradient(ellipse at 35% 22%, rgba(255, 255, 240, 0.52) 0 16%, transparent 17%),
    linear-gradient(145deg, var(--fur-light), var(--fur) 58%, color-mix(in srgb, var(--fur-dark) 62%, var(--fur)));
  box-shadow:
    inset -13px -13px 0 rgba(46, 34, 25, 0.09),
    inset 14px 12px 0 rgba(255, 255, 239, 0.3),
    0 8px 0 rgba(64, 45, 28, 0.1);
}

.body::before {
  left: 12%;
  top: 12%;
  width: 48%;
  height: 36%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 242, 0.58), transparent 60%);
  opacity: 1;
}

.body::after {
  display: none;
}

.belly {
  left: 22%;
  bottom: 6%;
  z-index: 2;
  width: 47%;
  height: 38%;
  border-radius: 54% 48% 60% 48%;
  background: rgba(255, 236, 190, 0.78);
  box-shadow: inset 0 -5px 0 rgba(153, 103, 52, 0.08);
}

.head {
  right: 1%;
  bottom: 43%;
  z-index: 6;
  width: 42%;
  height: 44%;
  border: 5px solid rgba(66, 46, 28, 0.18);
  border-radius: 68% 62% 62% 58% / 70% 70% 56% 58%;
  background:
    radial-gradient(ellipse at 32% 20%, rgba(255, 255, 240, 0.5) 0 20%, transparent 21%),
    radial-gradient(circle at 76% 70%, rgba(255, 240, 210, 0.92) 0 23%, transparent 24%),
    linear-gradient(155deg, var(--fur-light), var(--fur) 62%, color-mix(in srgb, var(--fur-dark) 58%, var(--fur)));
  box-shadow:
    inset -8px -8px 0 rgba(50, 34, 22, 0.08),
    inset 9px 8px 0 rgba(255, 255, 235, 0.28);
}

.head::before {
  left: 20%;
  top: 13%;
  width: 44%;
  height: 28%;
  background: rgba(255, 255, 235, 0.32);
}

.head::after {
  right: 7%;
  bottom: 28%;
  z-index: 4;
  width: 11%;
  background: #20140f;
  box-shadow: 0 3px 0 rgba(255, 241, 220, 0.55);
}

.ear {
  top: -18%;
  z-index: -1;
  width: 32%;
  height: 38%;
  border: 4px solid rgba(66, 46, 28, 0.14);
  border-radius: 74% 74% 42% 42%;
  background:
    radial-gradient(circle at 50% 58%, #ffd2bd 0 36%, transparent 37%),
    linear-gradient(180deg, var(--fur-light), var(--fur));
}

.ear-left {
  left: 13%;
  transform: rotate(-24deg);
}

.ear-right {
  right: 15%;
  transform: rotate(24deg);
}

.eye {
  right: 29%;
  top: 28%;
  z-index: 5;
  width: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, #fff 0 19%, transparent 20%),
    radial-gradient(circle at 66% 68%, #754923 0 23%, transparent 24%),
    #17100d;
  box-shadow:
    -26px 0 0 #17100d,
    -26px 0 0 4px rgba(255, 255, 255, 0.38),
    0 0 0 4px rgba(255, 255, 255, 0.38);
}

.eye::before {
  left: calc(-26px + 22%);
  top: 20%;
  width: 36%;
}

.eye::after {
  right: -19px;
  top: 25px;
  width: 18px;
  height: 9px;
  background: rgba(255, 131, 135, 0.44);
  box-shadow: -51px 0 0 rgba(255, 131, 135, 0.38);
}

.snout {
  right: 1%;
  bottom: 14%;
  z-index: 4;
  width: 42%;
  height: 29%;
  border-radius: 68% 56% 64% 52%;
  background:
    radial-gradient(circle at 83% 46%, #1c120e 0 11%, transparent 12%),
    radial-gradient(ellipse at 38% 76%, rgba(255, 255, 255, 0.22), transparent 50%),
    linear-gradient(180deg, #fff4dc, #e8bb82);
}

.snout::before {
  right: 48%;
  top: 48%;
  width: 52%;
  border-top: 2px solid rgba(64, 38, 20, 0.22);
}

.snout::after {
  right: 17%;
  bottom: 12%;
  width: 36%;
  height: 40%;
  border-bottom: 3px solid rgba(57, 32, 15, 0.34);
}

.cheek {
  top: 58%;
  z-index: 3;
  width: 15%;
  height: 9%;
  border-radius: 50%;
  background: rgba(255, 133, 136, 0.28);
  filter: blur(0.2px);
}

.cheek-left {
  left: 20%;
}

.cheek-right {
  right: 10%;
}

.smile {
  right: 18%;
  bottom: 14%;
  z-index: 5;
  width: 15%;
  height: 12%;
  border-bottom: 3px solid rgba(58, 35, 20, 0.38);
  border-radius: 0 0 999px 999px;
}

.tail {
  left: 7%;
  bottom: 52%;
  z-index: 1;
  width: 31%;
  height: 13%;
  border: 4px solid rgba(66, 46, 28, 0.14);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(180deg, var(--fur-light), var(--fur));
}

.tail::after {
  left: -13%;
  top: -28%;
  width: 36%;
  height: 156%;
  border: 3px solid rgba(66, 46, 28, 0.12);
  background: var(--fur-dark);
}

.leg {
  bottom: 7%;
  z-index: 3;
  width: 12%;
  height: 34%;
  border: 4px solid rgba(66, 46, 28, 0.14);
  border-radius: 999px 999px 46% 46%;
  background: linear-gradient(180deg, var(--fur), color-mix(in srgb, var(--fur-dark) 66%, var(--fur)) 72%);
}

.leg::after {
  left: -34%;
  bottom: -7%;
  width: 170%;
  height: 25%;
  border-radius: 70% 82% 34% 34%;
}

.front-leg {
  right: 27%;
}

.back-leg {
  left: 29%;
}

.stripe {
  z-index: 3;
  width: 9%;
  height: 74%;
  border-radius: 999px;
  background: #3b2414;
  opacity: 0.7;
  box-shadow: 22px 16px 0 -4px #3b2414, 46px 0 0 -4px #3b2414;
}

.spot {
  z-index: 3;
  width: 13%;
  background: color-mix(in srgb, var(--fur-dark) 86%, #ffcf64);
  opacity: 0.82;
}

.tiger {
  --fur: #f79a2f;
  --fur-dark: #382115;
  --fur-light: #ffd672;
}

.tiger .body,
.tiger .head {
  background:
    radial-gradient(ellipse at 33% 18%, rgba(255, 255, 236, 0.52) 0 18%, transparent 19%),
    radial-gradient(circle at 77% 70%, rgba(255, 241, 213, 0.92) 0 22%, transparent 23%),
    linear-gradient(155deg, #ffd672, #f79a2f 62%, #c36b22);
}

.tiger .belly {
  background: #ffe8b7;
}

.tiger .face-mark {
  left: 26%;
  top: 4%;
  width: 9%;
  height: 34%;
  opacity: 0.72;
  box-shadow: 18px 2px 0 -4px #3b2414, 35px 4px 0 -5px #3b2414, 25px 22px 0 -5px #3b2414;
}

.lion {
  --fur: #dfa24a;
  --fur-dark: #7e3f20;
  --fur-light: #ffd275;
}

.mane {
  right: 2%;
  bottom: 35%;
  z-index: 4;
  width: 52%;
  height: 63%;
  border: 5px solid rgba(84, 45, 24, 0.16);
  border-radius: 54% 56% 58% 54%;
  background:
    radial-gradient(circle at 57% 54%, #d47838 0 34%, transparent 35%),
    conic-gradient(from 12deg, #7e3f20, #c86c32, #ef9c45, #a45427, #7e3f20);
}

.lion .head {
  right: 8%;
  bottom: 48%;
  z-index: 6;
  width: 35%;
  height: 36%;
}

.lion .body {
  background:
    radial-gradient(ellipse at 35% 21%, rgba(255, 255, 234, 0.46) 0 18%, transparent 19%),
    linear-gradient(155deg, #ffd275, #dfa24a 64%, #b36d2d);
}

.lion .belly {
  background: #ffe1a0;
}

.elephant {
  --fur: #aab7dc;
  --fur-dark: #6d7ba0;
  --fur-light: #dce6ff;
}

.elephant .animal-figure {
  width: clamp(196px, 21vw, 282px);
  height: clamp(160px, 17.5vw, 226px);
}

.elephant .body {
  left: 12%;
  bottom: 20%;
  width: 69%;
  height: 57%;
  border-radius: 70% 62% 52% 54% / 72% 68% 48% 48%;
  background:
    radial-gradient(ellipse at 34% 20%, rgba(255, 255, 255, 0.46) 0 18%, transparent 19%),
    linear-gradient(155deg, #dce6ff, #aab7dc 62%, #7482a8);
}

.elephant .belly {
  background: rgba(241, 234, 244, 0.72);
}

.elephant .head {
  right: 0;
  bottom: 38%;
  width: 46%;
  height: 52%;
  border-radius: 68% 62% 66% 66%;
  background:
    radial-gradient(ellipse at 32% 18%, rgba(255, 255, 255, 0.44) 0 18%, transparent 19%),
    linear-gradient(155deg, #dce6ff, #aab7dc 66%, #7482a8);
}

.elephant .ear {
  top: 3%;
  width: 56%;
  height: 74%;
  border-radius: 74% 56% 68% 60%;
  background:
    radial-gradient(circle at 52% 55%, rgba(255, 194, 205, 0.54) 0 36%, transparent 37%),
    radial-gradient(ellipse at 32% 28%, rgba(255, 255, 255, 0.38), transparent 48%),
    linear-gradient(180deg, #ced9f6, #91a0c8);
}

.elephant .eye {
  top: 29%;
  right: 35%;
  width: 12%;
  box-shadow: none;
}

.trunk {
  right: 5%;
  top: 50%;
  z-index: 5;
  width: 21%;
  height: 80%;
  border: 4px solid rgba(66, 46, 28, 0.12);
  border-radius: 999px 999px 72% 72%;
  background:
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(72, 82, 110, 0.14) 13px 15px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent 42%),
    linear-gradient(180deg, #aab7dc, #7482a8);
}

.trunk::after {
  right: -35%;
  bottom: -4%;
  width: 96%;
  height: 24%;
  background: #7482a8;
}

.tusk {
  top: 67%;
  z-index: 6;
  width: 31%;
  height: 11%;
  background: linear-gradient(90deg, #fffdf0, #e9d59e);
}

.giraffe {
  --fur: #efb852;
  --fur-dark: #9a5f2c;
  --fur-light: #ffdf85;
}

.giraffe .animal-figure {
  width: clamp(192px, 21vw, 278px);
  height: clamp(204px, 23vw, 282px);
}

.giraffe .body {
  left: 19%;
  bottom: 16%;
  width: 58%;
  height: 33%;
  border-radius: 62% 56% 48% 52%;
  background:
    radial-gradient(circle at 22% 32%, #9a5f2c 0 10%, transparent 11%),
    radial-gradient(circle at 48% 56%, #9a5f2c 0 11%, transparent 12%),
    radial-gradient(circle at 71% 28%, #9a5f2c 0 9%, transparent 10%),
    linear-gradient(155deg, #ffdf85, #efb852 66%, #bf7b38);
}

.giraffe .belly {
  height: 32%;
  background: rgba(255, 232, 164, 0.76);
}

.giraffe .neck {
  right: 25%;
  bottom: 39%;
  z-index: 3;
  width: 18%;
  height: 54%;
  border: 5px solid rgba(66, 46, 28, 0.14);
  border-radius: 999px 999px 64% 64%;
  background:
    radial-gradient(circle at 46% 20%, #9a5f2c 0 14%, transparent 15%),
    radial-gradient(circle at 62% 53%, #9a5f2c 0 13%, transparent 14%),
    linear-gradient(90deg, #d99f45, #ffdf85 45%, #efb852);
}

.giraffe .head {
  right: 0;
  bottom: 79%;
  width: 42%;
  height: 27%;
  border-radius: 58% 70% 62% 56%;
  background:
    radial-gradient(circle at 26% 46%, #9a5f2c 0 10%, transparent 11%),
    radial-gradient(circle at 78% 70%, rgba(255, 240, 205, 0.84) 0 20%, transparent 21%),
    linear-gradient(155deg, #ffdf85, #efb852 70%, #bf7b38);
}

.giraffe .leg {
  bottom: 0;
  width: 9%;
  height: 46%;
  background:
    linear-gradient(180deg, #efb852 0 42%, #9a5f2c 43% 50%, #efb852 51% 76%, #805022 77% 100%);
}

.giraffe .tail {
  bottom: 33%;
}

.giraffe .eye {
  top: 38%;
  right: 24%;
}

.giraffe .snout {
  right: -4%;
  bottom: 12%;
  width: 42%;
}

.giraffe .ear {
  top: -18%;
  width: 22%;
}

.horn {
  top: -42%;
  z-index: -1;
  width: 9%;
  height: 40%;
  border-radius: 999px;
  background: #8a5427;
}

.horn::after {
  background: #8a5427;
}

.leopard .body,
.leopard .head {
  background:
    radial-gradient(ellipse at 34% 18%, rgba(255, 255, 232, 0.48) 0 17%, transparent 18%),
    linear-gradient(155deg, #ffd875, #e0a947 64%, #b16d28);
}

.zebra .body,
.zebra .head {
  background:
    repeating-linear-gradient(104deg, rgba(25, 25, 23, 0.72) 0 7px, transparent 8px 24px),
    linear-gradient(155deg, #fff, #eee9d7 68%, #cfc8b3);
}

.buffalo .horn,
.rhino .horn-left {
  z-index: 7;
}

.hippo .body,
.hippo .head {
  background:
    radial-gradient(ellipse at 34% 18%, rgba(255, 255, 232, 0.32) 0 17%, transparent 18%),
    linear-gradient(155deg, #e0bdcf, #b790a8 64%, #73586c);
}

.crocodile .animal-figure {
  height: clamp(112px, 13vw, 154px);
}

.crocodile .body {
  left: 10%;
  bottom: 21%;
  width: 72%;
  height: 36%;
  border-radius: 999px 58% 48% 999px;
}

.crocodile .head {
  right: 0;
  bottom: 24%;
  width: 42%;
  height: 33%;
}

.fox .tail {
  left: 0;
  bottom: 42%;
  width: 45%;
  height: 22%;
}

.dalmatian .body,
.dalmatian .head {
  background:
    radial-gradient(circle at 24% 35%, #1e1e1c 0 9%, transparent 10%),
    radial-gradient(circle at 58% 58%, #1e1e1c 0 7%, transparent 8%),
    radial-gradient(ellipse at 34% 18%, rgba(255, 255, 255, 0.58) 0 18%, transparent 19%),
    linear-gradient(155deg, #fff, #f1f1e8 70%, #d7d6c8);
}

.ridge {
  left: 10%;
  top: -10%;
  width: 70%;
  height: 18%;
  border-radius: 999px 999px 0 0;
  background: repeating-linear-gradient(90deg, var(--fur-dark) 0 8px, transparent 8px 14px);
}

.interaction-prop {
  left: 67%;
  bottom: 8%;
  width: 42px;
  height: 24px;
  opacity: 0;
  transform: translateY(8px) scale(0.8);
  transition: opacity 160ms ease, transform 160ms ease;
}

.animal.is-eating .interaction-prop,
.animal.is-drinking .interaction-prop,
.animal.is-sleeping .interaction-prop,
.animal.is-hit .interaction-prop {
  opacity: 1;
}

.animal.is-eating .interaction-prop {
  border-radius: 54% 46% 46% 54%;
  background: #b8322a;
  box-shadow: inset 10px -5px 0 #7d221f, -10px 0 0 -3px #f1d8b1, 16px 0 0 -5px #f1d8b1;
}

.animal[data-active-tool="grass"].is-eating .interaction-prop {
  width: 46px;
  height: 32px;
  border-radius: 0;
  background:
    linear-gradient(72deg, transparent 0 42%, #3f8d45 43% 56%, transparent 57%),
    linear-gradient(112deg, transparent 0 42%, #5eb564 43% 56%, transparent 57%),
    linear-gradient(92deg, transparent 0 42%, #2f7538 43% 56%, transparent 57%);
  box-shadow: none;
}

.animal.is-drinking .interaction-prop {
  border: 4px solid #2d82b7;
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #8ed7f7 0 50%, #2d82b7 51% 100%);
}

.animal.is-sleeping .interaction-prop {
  left: 18%;
  bottom: 0;
  width: 76%;
  height: 30%;
  border-radius: 8px;
  background: linear-gradient(90deg, #5b74b8 0 18%, #dbe6ff 19% 100%);
  box-shadow: inset 0 -8px 0 rgba(46, 59, 109, 0.25);
}

.animal.is-hit .interaction-prop {
  left: 58%;
  bottom: 54%;
  width: 12px;
  height: 84px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6f3f1e, #b47636 45%, #5a3218);
  transform: rotate(-48deg);
  transform-origin: 50% 95%;
  animation: stickHit 520ms ease-out 1;
  box-shadow: 0 8px 10px rgba(58, 36, 18, 0.25);
}

.animal.is-eating .head,
.animal.is-drinking .head {
  animation: lowerHead 900ms ease-in-out infinite alternate;
}

.animal.is-eating .body,
.animal.is-drinking .body {
  animation: bodyLean 900ms ease-in-out infinite alternate;
}

.animal.is-sleeping .animal-figure {
  animation: sleepBreath 1300ms ease-in-out infinite alternate;
}

.animal.is-sleeping .body {
  bottom: 18%;
  height: 34%;
  border-radius: 54% 54% 40% 40%;
}

.animal.is-sleeping .head {
  right: 12%;
  bottom: 20%;
  transform: rotate(18deg);
}

.animal.is-sleeping .leg {
  bottom: 5%;
  height: 14%;
  transform: rotate(82deg);
  animation: none;
}

.animal.is-sleeping .tail {
  bottom: 33%;
  transform: rotate(-6deg);
}

.animal.is-hit .animal-figure {
  animation: animalHit 520ms ease-out 1;
}

.animal.is-fat .body {
  width: 68%;
  height: 54%;
  bottom: 20%;
  border-radius: 58% 54% 46% 48% / 62% 62% 42% 42%;
  box-shadow: inset -18px -16px 0 rgba(70, 42, 18, 0.13), inset 12px 11px 0 rgba(255, 244, 185, 0.16);
}

.animal.is-fat .head {
  transform: translateX(8px);
}

.animal.is-fat .front-leg {
  right: 23%;
}

.animal.is-fat .back-leg {
  left: 26%;
}

.elephant.is-fat .body {
  width: 72%;
  height: 58%;
}

.giraffe.is-fat .body {
  width: 62%;
  height: 38%;
  bottom: 15%;
}

.animal.is-water-bouncing .animal-figure {
  animation: waterBounce 520ms ease-in-out 5;
}

.animal.is-knocked .animal-figure {
  animation: knockedBreath 1100ms ease-in-out infinite alternate;
  transform: translateY(36px) rotate(88deg);
}

.animal.is-knocked .leg {
  animation: none;
}

.animal.is-knocked .interaction-prop {
  opacity: 0;
}

.animal.is-fight-selected {
  outline: 4px solid rgba(255, 229, 118, 0.92);
  outline-offset: 3px;
}

.animal.is-fighting .animal-figure {
  animation: clashMove 760ms cubic-bezier(0.34, 0.04, 0.28, 1.34) infinite;
}

.animal.is-fighting .head {
  animation: fightHead 380ms ease-in-out infinite alternate;
}

.animal.is-winner .animal-figure {
  animation: winnerCelebrate 3000ms ease-in-out 1 forwards;
  filter: drop-shadow(0 0 18px rgba(255, 227, 88, 0.98)) drop-shadow(0 0 28px rgba(255, 176, 42, 0.6)) drop-shadow(0 18px 12px rgba(37, 43, 24, 0.24));
}

.animal.is-winner .animal-name,
.animal.is-winner .animal-status {
  background: #fff0a7;
  color: #4e3004;
  box-shadow: 0 0 18px rgba(255, 221, 82, 0.8);
}

.animal.is-loser .animal-figure {
  animation: loserDrop 900ms ease-out 1 forwards;
  filter: saturate(0.75) drop-shadow(0 16px 10px rgba(37, 43, 24, 0.2));
}

.collision-effect {
  position: fixed;
  left: var(--x);
  top: var(--y);
  z-index: 35;
  transform: translate(-50%, -50%);
  color: #ffe15f;
  font-size: 42px;
  font-weight: 900;
  text-shadow: 0 0 12px #fff, 0 0 24px #ff9f1f;
  pointer-events: none;
  animation: collisionBurst 720ms ease-out forwards;
}

.animal.is-rejecting .animal-figure {
  animation: shake 360ms ease;
}

.animal.is-sailing .animal-figure {
  animation: boardBoat 950ms ease-in forwards;
}

.boat-effect {
  position: fixed;
  left: var(--x);
  top: var(--y);
  z-index: 36;
  transform: translate(-50%, -50%);
  min-width: 8em;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e9fbff, #8bd9ff);
  color: #185a7a;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 8px 0 #2d82b7, 0 18px 22px rgba(31, 89, 118, 0.22);
  pointer-events: none;
  animation: boatSail 1800ms ease-in forwards;
}

.boat-effect::after {
  content: "≈≈≈";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -18px;
  color: #dff7ff;
  letter-spacing: 6px;
  text-shadow: 0 2px 0 #2d82b7;
}

.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(7, minmax(52px, 1fr));
  gap: 8px;
  padding: 12px max(12px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));
  background: rgba(32, 47, 40, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
}

.tool {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 78px;
  padding: 8px 4px 7px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff8db;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.tool:hover,
.tool:focus-visible,
.tool.is-selected {
  transform: translateY(-4px);
  border-color: #ffe391;
  background: rgba(255, 226, 145, 0.23);
  outline: 0;
}

.tool-key {
  position: absolute;
  top: 6px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #1f211d;
  background: #ffe391;
  font-size: 13px;
  font-weight: 800;
}

.tool-icon {
  font-size: 28px;
  line-height: 1;
}

.effect-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.tool-quiz {
  position: fixed;
  inset: 0;
  z-index: 31;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 235, 116, 0.4), transparent 24%),
    radial-gradient(circle at 72% 70%, rgba(91, 203, 255, 0.36), transparent 26%),
    rgba(31, 49, 82, 0.48);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.tool-quiz.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tool-quiz-card {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(92vw, 470px);
  padding: 22px;
  border: 6px solid #fff0a6;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 112, 145, 0.55) 0 18px, transparent 19px),
    radial-gradient(circle at 88% 16%, rgba(91, 203, 255, 0.55) 0 20px, transparent 21px),
    linear-gradient(180deg, #fffbe4, #ffe393 58%, #ffc65b);
  box-shadow: 0 12px 0 #d58b25, 0 26px 42px rgba(36, 42, 58, 0.34);
  text-align: center;
  transform: scale(0.92);
  animation: quizPop 220ms cubic-bezier(0.18, 0.9, 0.2, 1.2) forwards;
}

.tool-quiz-card::before {
  content: "★";
  position: absolute;
  left: 18px;
  top: -24px;
  color: #ff7aa8;
  font-size: 44px;
  text-shadow: 0 4px 0 #fff;
  transform: rotate(-14deg);
}

.tool-quiz-card::after {
  content: "?";
  position: absolute;
  right: 20px;
  top: -28px;
  color: #33a6ff;
  font-size: 54px;
  font-weight: 900;
  text-shadow: 0 4px 0 #fff;
  transform: rotate(12deg);
}

.tool-quiz-kicker,
.tool-quiz-message,
.tool-quiz-label {
  margin: 0;
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 900;
}

.tool-quiz-kicker {
  color: #2d7dd2;
  font-size: clamp(22px, 5vw, 32px);
  text-shadow: 0 2px 0 #fff;
}

.tool-quiz-question {
  margin: 0;
  padding: 14px 16px;
  border: 5px solid #ff9f2f;
  border-radius: 16px;
  background: #fff7cf;
  color: #f05f42;
  font-size: clamp(48px, 12vw, 82px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 4px 0 #fff, 0 8px 0 rgba(182, 86, 34, 0.14);
}

.tool-quiz-label {
  color: #4d6b24;
  font-size: 18px;
}

.tool-quiz-answer {
  width: min(100%, 260px);
  min-height: 70px;
  justify-self: center;
  border: 5px solid #62ba55;
  border-radius: 18px;
  padding: 6px 14px;
  background: #ffffff;
  color: #263b72;
  font-size: 42px;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 -5px 0 rgba(98, 186, 85, 0.16);
}

.tool-quiz-answer:focus {
  outline: 5px solid rgba(255, 207, 74, 0.72);
  outline-offset: 3px;
}

.tool-quiz-message {
  min-height: 1.4em;
  color: #6a4b1e;
  font-size: 17px;
}

.tool-quiz-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tool-quiz-actions button {
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 7px 0 rgba(83, 57, 22, 0.28);
}

.tool-quiz-cancel {
  background: linear-gradient(180deg, #9ca8bb, #64748b);
}

.tool-quiz-submit {
  background: linear-gradient(180deg, #ff7aa8, #f05f42);
}

.floating-effect {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  font-size: 38px;
  animation: floatAway 950ms ease forwards;
}

@keyframes stroll {
  0%,
  100% {
    transform: translateX(-10px) translateY(0) scaleX(1);
  }
  45% {
    transform: translateX(12px) translateY(-3px) scaleX(1);
  }
  50% {
    transform: translateX(12px) translateY(-3px) scaleX(-1);
  }
  95% {
    transform: translateX(-10px) translateY(0) scaleX(-1);
  }
}

@keyframes legWalk {
  from {
    transform: rotate(-10deg);
  }
  to {
    transform: rotate(14deg);
  }
}

@keyframes lowerHead {
  from {
    transform: rotate(0) translateY(0);
  }
  to {
    transform: rotate(18deg) translate(8px, 22px);
  }
}

@keyframes bodyLean {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(2deg);
  }
}

@keyframes sleepBreath {
  from {
    transform: translateY(0) scaleX(1);
  }
  to {
    transform: translateY(3px) scaleX(1.02);
  }
}

@keyframes stickHit {
  0% {
    opacity: 0;
    transform: translate(-24px, -42px) rotate(-112deg);
  }
  35% {
    opacity: 1;
    transform: translate(0, 0) rotate(-32deg);
  }
  55% {
    transform: translate(4px, 8px) rotate(-18deg);
  }
  100% {
    opacity: 0;
    transform: translate(18px, -18px) rotate(26deg);
  }
}

@keyframes animalHit {
  0% {
    transform: translateX(0) rotate(0);
  }
  28% {
    transform: translateX(-18px) rotate(-4deg);
  }
  52% {
    transform: translateX(10px) rotate(3deg);
  }
  100% {
    transform: translateX(0) rotate(0);
  }
}

@keyframes knockedBreath {
  from {
    transform: translateY(36px) rotate(88deg) scaleX(1);
  }
  to {
    transform: translateY(38px) rotate(88deg) scaleX(1.03);
  }
}

@keyframes sunSpin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes waterBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-34px) scale(1.06);
  }
  68% {
    transform: translateY(5px) scale(1.02, 0.96);
  }
}

@keyframes fightMove {
  from {
    transform: translateX(-12px) translateY(-4px) rotate(-3deg);
  }
  to {
    transform: translateX(12px) translateY(2px) rotate(3deg);
  }
}

@keyframes clashMove {
  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(0) scaleX(var(--fight-facing));
  }
  42% {
    transform: translateX(var(--clash-x)) translateY(-7px) rotate(4deg) scaleX(var(--fight-facing));
  }
  55% {
    transform: translateX(calc(var(--clash-x) * 0.86)) translateY(2px) rotate(-5deg) scaleX(var(--fight-facing)) scale(1.04);
  }
  72% {
    transform: translateX(calc(var(--clash-x) * 0.26)) translateY(-2px) rotate(2deg) scaleX(var(--fight-facing));
  }
}

@keyframes fightHead {
  from {
    transform: rotate(-9deg) translateX(-3px);
  }
  to {
    transform: rotate(13deg) translateX(5px);
  }
}

@keyframes winnerHop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-18px) scale(1.06);
  }
}

@keyframes winnerCelebrate {
  0% {
    transform: translateY(0) scale(1) rotate(0);
  }
  18% {
    transform: translateY(-26px) scale(2) rotate(-4deg);
  }
  74% {
    transform: translateY(-18px) scale(2) rotate(4deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes collisionBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(-20deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -115%) scale(1.7) rotate(18deg);
  }
}

@keyframes loserDrop {
  0% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(22px) rotate(-16deg);
  }
}

@keyframes boardBoat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 0.55;
    transform: translateY(26px) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: translateY(38px) scale(0.38);
  }
}

@keyframes boatSail {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(-30px) translateY(18px) rotate(-3deg);
  }
  16% {
    opacity: 1;
  }
  52% {
    transform: translate(-50%, -50%) translateX(80px) translateY(-4px) rotate(3deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(250px) translateY(18px) rotate(6deg);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}

@keyframes floatAway {
  0% {
    opacity: 0;
    transform: translate(-50%, -12%) scale(0.7);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(1.28);
  }
}

@keyframes starFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
    filter: brightness(1.12);
  }
}

@keyframes starShimmer {
  to {
    transform: rotate(1turn);
  }
}

@keyframes lockGlow {
  from {
    box-shadow: inset 0 0 10px #060401, 0 0 0 8px rgba(255, 239, 136, 0.65);
  }
  to {
    box-shadow: inset 0 0 10px #060401, 0 0 0 8px rgba(255, 239, 136, 0.8), 0 0 28px #ffe45c;
  }
}

@keyframes lockShake {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  25% {
    transform: translateX(-7px) rotate(-2deg);
  }
  75% {
    transform: translateX(7px) rotate(2deg);
  }
}

@keyframes starUnlock {
  0% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
  55% {
    transform: scale(1.18) rotate(18deg);
    filter: brightness(1.8);
  }
  100% {
    transform: scale(0.72) rotate(54deg);
    opacity: 0;
  }
}

@keyframes goldenUnlock {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-18deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.85) rotate(22deg);
  }
}

@keyframes quizPop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.86) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

/* Cartoon model v3: obvious rebuilt, toy-like proportions. */
.animal-figure {
  width: clamp(198px, 21vw, 286px);
  height: clamp(174px, 18.5vw, 240px);
}

.body {
  left: 16%;
  bottom: 18%;
  width: 64%;
  height: 52%;
  border-width: 6px;
  border-color: rgba(78, 50, 28, 0.22);
  border-radius: 68% 58% 54% 60% / 72% 68% 52% 54%;
}

.head {
  right: -1%;
  bottom: 43%;
  width: 48%;
  height: 49%;
  border-width: 6px;
  border-radius: 72% 66% 64% 62% / 74% 74% 60% 60%;
}

.eye {
  right: 29%;
  top: 27%;
  width: 18%;
  box-shadow:
    -30px 0 0 #17100d,
    -30px 0 0 5px rgba(255, 255, 255, 0.42),
    0 0 0 5px rgba(255, 255, 255, 0.42);
}

.eye::before {
  left: calc(-30px + 22%);
}

.eye::after {
  top: 29px;
  box-shadow: -58px 0 0 rgba(255, 131, 135, 0.38);
}

.snout {
  right: -1%;
  bottom: 12%;
  width: 45%;
  height: 31%;
}

.belly {
  left: 22%;
  bottom: 5%;
  width: 50%;
  height: 42%;
}

.leg {
  bottom: 3%;
  height: 38%;
  width: 13%;
}

.front-leg {
  right: 25%;
}

.back-leg {
  left: 26%;
}

.tiger .body,
.tiger .head {
  background:
    radial-gradient(ellipse at 32% 18%, rgba(255, 255, 238, 0.58) 0 18%, transparent 19%),
    radial-gradient(circle at 77% 70%, #ffe9bf 0 23%, transparent 24%),
    linear-gradient(155deg, #ffdc74, #ff982e 60%, #c96b20);
}

.tiger .stripe {
  width: 10%;
  opacity: 0.86;
  background: #402516;
  box-shadow: 24px 17px 0 -4px #402516, 51px 0 0 -5px #402516;
}

.lion .mane {
  right: -2%;
  bottom: 33%;
  width: 59%;
  height: 69%;
  border-radius: 50% 54% 58% 54%;
}

.lion .head {
  right: 7%;
  bottom: 48%;
  width: 39%;
  height: 40%;
}

.elephant .animal-figure {
  width: clamp(212px, 22vw, 306px);
  height: clamp(178px, 19vw, 248px);
}

.elephant .body {
  left: 10%;
  bottom: 16%;
  width: 72%;
  height: 62%;
}

.elephant .head {
  right: -2%;
  bottom: 37%;
  width: 51%;
  height: 57%;
}

.elephant .ear {
  width: 61%;
  height: 80%;
}

.elephant .eye {
  width: 14%;
}

.giraffe .animal-figure {
  width: clamp(204px, 22vw, 296px);
  height: clamp(222px, 24vw, 304px);
}

.giraffe .body {
  bottom: 12%;
  height: 37%;
}

.giraffe .neck {
  bottom: 36%;
  height: 58%;
  width: 20%;
}

.giraffe .head {
  right: -2%;
  bottom: 79%;
  width: 48%;
  height: 30%;
}

.giraffe .leg {
  bottom: -2%;
  height: 47%;
}

/* SVG cartoon animal rebuild: replaces the old span-built models. */
.animal-model-v4 {
  display: block;
  width: clamp(202px, 21vw, 292px);
  height: clamp(172px, 18.5vw, 242px);
  overflow: visible;
}

.giraffe .animal-model-v4 {
  height: clamp(220px, 24vw, 308px);
}

.crocodile .animal-model-v4 {
  height: clamp(128px, 14vw, 166px);
}

.cartoon-model {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.model-shadow {
  fill: rgba(38, 44, 25, 0.22);
  filter: blur(1px);
}

.model-body,
.model-head,
.model-tail,
.model-legs,
.model-neck {
  transform-box: fill-box;
  transform-origin: center;
}

.model-head {
  animation: modelLook 3.2s ease-in-out infinite;
}

.model-tail {
  animation: modelTail 1.8s ease-in-out infinite alternate;
}

.model-legs {
  animation: modelStep 760ms ease-in-out infinite alternate;
}

.animal.is-eating .model-head,
.animal.is-drinking .model-head {
  animation: modelNibble 620ms ease-in-out infinite alternate;
}

.animal.is-sleeping .cartoon-model {
  transform-origin: center bottom;
  animation: sleepySway 1.8s ease-in-out infinite alternate;
}

.animal.is-hit .cartoon-model {
  animation: animalHit 520ms ease-out 1;
}

.animal.is-fat .animal-model-v4 {
  width: clamp(226px, 24vw, 326px);
}

.animal.is-fat .cartoon-model {
  overflow: visible;
}

.animal.is-fat .model-body {
  transform: translate(-16px, 10px) scale(1.48, 1.34);
  animation: fatBellyBreath 980ms ease-in-out infinite alternate;
}

.animal.is-fat .model-head {
  transform: translate(18px, -2px) rotate(4deg);
}

.animal.is-fat .model-legs {
  transform: translateY(10px) scaleX(1.18);
}

.animal.is-fat .model-tail {
  transform: translate(-14px, -3px) rotate(-14deg);
}

.animal.is-fat .interaction-prop {
  left: 72%;
}

.elephant.is-fat .model-body {
  transform: translate(-20px, 12px) scale(1.46, 1.32);
}

.giraffe.is-fat .model-body {
  transform: translate(-13px, 13px) scale(1.52, 1.42);
}

.crocodile.is-fat .model-body {
  transform: translate(-18px, 8px) scale(1.42, 1.55);
}

@keyframes fatBellyBreath {
  from {
    transform: translate(-16px, 10px) scale(1.44, 1.31);
  }
  to {
    transform: translate(-18px, 8px) scale(1.53, 1.38);
  }
}

.animal.is-knocked .cartoon-model {
  transform: rotate(90deg) translate(16px, -8px);
}

.animal.is-fighting .cartoon-model {
  animation: fightBounce 420ms ease-in-out infinite alternate;
}

.animal.is-winner .cartoon-model {
  animation: winnerBounce 780ms ease-in-out infinite;
}

.animal.is-loser .cartoon-model {
  filter: grayscale(0.35) opacity(0.76);
}

@keyframes modelLook {
  0%,
  100% {
    transform: rotate(-1deg) translateY(0);
  }
  50% {
    transform: rotate(2deg) translateY(-2px);
  }
}

@keyframes modelTail {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(7deg);
  }
}

@keyframes modelStep {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2px);
  }
}

@keyframes modelNibble {
  from {
    transform: rotate(4deg) translateY(3px);
  }
  to {
    transform: rotate(-2deg) translateY(9px);
  }
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .habitat {
    min-height: auto;
    padding-bottom: 138px;
  }

  .kid-guide {
    position: relative;
    top: auto;
    left: auto;
    width: min(92vw, 360px);
    margin: 0 auto 14px;
    transform: none;
  }

  .entrance-stage {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
  }

  .gate-wrap {
    width: min(82vw, 390px);
  }

  .key-box {
    width: min(92vw, 340px);
  }

  .arena {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    min-height: auto;
  }

  .animal {
    min-height: 224px;
  }

  .toolbar {
    grid-template-columns: repeat(7, minmax(42px, 1fr));
    gap: 6px;
  }

  .tool {
    min-height: 70px;
    font-size: 13px;
  }

  .tool-key {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}