:root {
  --bg: #fff4dc;
  --gap: clamp(10px, 2vmin, 24px);
  --radius: clamp(20px, 4vmin, 40px);
  --ink: #3b2f2f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #2b2540; }
}
:root[data-theme="dark"] { --bg: #2b2540; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
}

body {
  position: fixed;
  inset: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.farm {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--gap);
  padding:
    max(var(--gap), env(safe-area-inset-top))
    max(var(--gap), env(safe-area-inset-right))
    max(var(--gap), env(safe-area-inset-bottom))
    max(var(--gap), env(safe-area-inset-left));
}

/* Landscape: 4 × 3 */
.animal {
  width: calc((100% - 3 * var(--gap)) / 4);
  height: calc((100% - 2 * var(--gap)) / 3);
}
/* Portrait: 3 × 4 */
@media (orientation: portrait) {
  .animal {
    width: calc((100% - 2 * var(--gap)) / 3);
    height: calc((100% - 3 * var(--gap)) / 4);
  }
}

.animal {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 2%;
  border-radius: var(--radius);
  background: var(--c);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .12), inset 0 -10px 0 rgba(0, 0, 0, .05);
  cursor: pointer;
  touch-action: none;
  outline: none;
  transition: transform .12s ease;
}
.animal:active, .animal.pressed { transform: scale(.95); }

.animal svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.animal svg * { transform-box: view-box; }
.shadow { fill: rgba(0, 0, 0, .1); }

/* ---------- idle animations ---------- */
.body { animation: bob 2.8s ease-in-out infinite; }
.eyes {
  transform-box: fill-box !important;
  transform-origin: center;
  animation: blink 4.5s infinite;
}
.tail { animation: swish 2.2s ease-in-out infinite; }
.head { animation: nod 3.6s ease-in-out infinite; }

.animal:nth-child(2) .body { animation-delay: -.7s; }
.animal:nth-child(3) .body { animation-delay: -1.4s; }
.animal:nth-child(4) .body { animation-delay: -2.1s; }
.animal:nth-child(6) .body { animation-delay: -1s; }
.animal:nth-child(7) .body { animation-delay: -1.8s; }
.animal:nth-child(2) .eyes { animation-delay: -1.2s; animation-duration: 5.2s; }
.animal:nth-child(3) .eyes { animation-delay: -2.5s; animation-duration: 3.9s; }
.animal:nth-child(4) .eyes { animation-delay: -3.3s; }
.animal:nth-child(5) .eyes { animation-delay: -.6s; animation-duration: 6s; }
.animal:nth-child(6) .eyes { animation-delay: -2s; animation-duration: 4.8s; }
.animal:nth-child(7) .eyes { animation-delay: -3.8s; animation-duration: 5.5s; }
.animal:nth-child(8) .body { animation-delay: -.4s; }
.animal:nth-child(9) .body { animation-delay: -2.4s; }
.animal:nth-child(10) .body { animation-delay: -1.2s; }
.animal:nth-child(11) .body { animation-delay: -.9s; }
.animal:nth-child(12) .body { animation-delay: -2.6s; }
.animal:nth-child(8) .eyes { animation-delay: -1.7s; animation-duration: 4.2s; }
.animal:nth-child(9) .eyes { animation-delay: -3s; animation-duration: 5.8s; }
.animal:nth-child(10) .eyes { animation-delay: -.3s; animation-duration: 4.6s; }
.animal:nth-child(11) .eyes { animation-delay: -2.2s; animation-duration: 5.1s; }
.animal:nth-child(12) .eyes { animation-delay: -4s; animation-duration: 6.2s; }

[data-sound="dog"] .tail { animation: wag .5s ease-in-out infinite; }
[data-sound="dog"] .tongue { animation: pant .5s ease-in-out infinite; }
[data-sound="cat"] .ear-l { animation: twitch 5s infinite; }
[data-sound="cat"] .ear-r { animation: twitch 5s -2.5s infinite reverse; }
[data-sound="cat"] .head { animation-name: tilt; }
[data-sound="snake"] .sway { animation: sway 3s ease-in-out infinite; }
[data-sound="snake"] .head { animation: tilt 3s ease-in-out infinite; }
[data-sound="snake"] .tongue { animation: flick 2.4s infinite; }
[data-sound="elephant"] .trunk { animation: trunk 3s ease-in-out infinite; }
[data-sound="elephant"] .ear-l { animation: flap-l 2.6s ease-in-out infinite; }
[data-sound="elephant"] .ear-r { animation: flap-r 2.6s ease-in-out infinite; }

@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes swish { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes wag { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes pant { 50% { transform: scaleY(1.25); } }
@keyframes nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes twitch { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-12deg); } 96% { transform: rotate(4deg); } }
@keyframes sway { 0%, 100% { transform: skewX(-4deg); } 50% { transform: skewX(4deg); } }
@keyframes flick { 0%, 70%, 100% { transform: scaleX(0); } 75%, 85% { transform: scaleX(1); } 80% { transform: scaleX(.6); } }
@keyframes trunk { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes flap-l { 50% { transform: scaleX(.85) rotate(-4deg); } }
@keyframes flap-r { 50% { transform: scaleX(.85) rotate(4deg); } }

/* ---------- while the sound plays ---------- */
.animal.playing svg { animation: boing .5s ease-in-out infinite; transform-origin: 50% 90%; }
.animal.playing .head { animation: talk .25s ease-in-out infinite; }
.animal.playing .tail { animation-duration: .3s; }
.animal.playing .tongue { animation: none; transform: none; }
[data-sound="elephant"].playing .trunk { animation: toot .5s ease-out infinite alternate; }
[data-sound="horse"].playing .head { animation: rear .5s ease-in-out infinite alternate; }
[data-sound="rooster"].playing .head { animation: rear .5s ease-in-out infinite alternate; }
[data-sound="duck"] .tail { animation: flap 1.6s ease-in-out infinite; }
[data-sound="duck"].playing .tail { animation-duration: .25s; }
[data-sound="lion"].playing .head { animation: roar .6s ease-in-out infinite alternate; }
@keyframes flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes roar { from { transform: scale(1); } to { transform: scale(1.08); } }

@keyframes boing {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.08, .92); }
  60% { transform: scale(.96, 1.06); }
}
@keyframes talk { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes toot { from { transform: rotate(0); } to { transform: rotate(-70deg); } }
@keyframes rear { from { transform: rotate(0); } to { transform: rotate(-10deg); } }

@media (prefers-reduced-motion: reduce) {
  .animal:not(.playing) * { animation: none !important; }
}

/* ---------- language menu ---------- */
.lang-button, .lang-menu button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
}
.lang-button {
  position: fixed;
  z-index: 10;
  top: max(6px, env(safe-area-inset-top));
  right: max(6px, env(safe-area-inset-right));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  font-size: 28px;
}
.lang-menu {
  position: fixed;
  z-index: 11;
  top: calc(max(6px, env(safe-area-inset-top)) + 60px);
  right: max(6px, env(safe-area-inset-right));
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #f3efe6;
  font-size: 44px;
}
.lang-menu button[aria-pressed="true"] {
  background: #ffe08a;
  box-shadow: inset 0 0 0 4px #f2b705;
}
@media (max-width: 520px) {
  .lang-menu button { width: 56px; height: 56px; font-size: 34px; }
}