/* ============ Feed the Animals! styles ============ */

:root {
  --sky-top: #c9ecff;
  --sky-bottom: #fff3fa;
  --ink: #4a3434;
  --shadow: 0 6px 18px rgba(110, 140, 190, .28);
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* Size of one food plate: big, but three must always fit */
  --plate: min(29vw, 23vh, 190px);
  --gap: clamp(12px, 3vmin, 30px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;                 /* never scroll during play */
  overscroll-behavior: none;
  font-family: "Fredoka", "Nunito", "Segoe UI Rounded", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
  touch-action: manipulation;       /* no double-tap zoom */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

button { font: inherit; color: inherit; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 4px solid #b995ff; outline-offset: 4px; }

/* ---------- Sky + meadow ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.sun {
  position: absolute; top: -7vmin; right: -7vmin;
  width: 32vmin; height: 32vmin; border-radius: 50%;
  background: radial-gradient(circle, #fff6b8 0 45%, #ffe37a 46% 60%, rgba(255, 227, 122, 0) 61%);
  animation: spin 40s linear infinite;
}
.cloud {
  position: absolute; left: -30vmin;
  width: 24vmin; height: 8vmin; border-radius: 8vmin;
  background: #fff; opacity: .85;
  animation: drift linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 11vmin; height: 11vmin; left: 3vmin; top: -5.5vmin; }
.cloud::after  { width: 8vmin;  height: 8vmin;  left: 12vmin; top: -3.5vmin; }
.c1 { top: 12%; animation-duration: 75s; animation-delay: -20s; }
.c2 { top: 28%; animation-duration: 95s; animation-delay: -60s; transform: scale(.65); }
.hill { position: absolute; border-radius: 50%; }
.h1 { left: -20vw; bottom: -30vh; width: 85vw; height: 62vh; background: #c4f2cd; }
.h2 { right: -25vw; bottom: -34vh; width: 95vw; height: 64vh; background: #addfb9; }
@keyframes drift { from { left: -30vmin; } to { left: 110vw; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Corner buttons (for grown-ups) ---------- */
.corner-btn {
  position: fixed; z-index: 5;
  top: calc(10px + var(--safe-t));
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 24px; line-height: 1; text-decoration: none; color: var(--ink);
  background: rgba(255, 255, 255, .75);
  box-shadow: var(--shadow);
  transition: transform .15s;
}
.corner-btn:active { transform: scale(.88); }
.home { left: calc(10px + var(--safe-l)); font-family: var(--emoji); }
.sound { left: calc(72px + var(--safe-l)); font-family: var(--emoji); }
.sound[aria-pressed="false"] { opacity: .6; }
.full { left: calc(134px + var(--safe-l)); font-size: 26px; font-weight: 700; }

/* ---------- Layout ---------- */
.stage {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(66px + var(--safe-t)) calc(12px + var(--safe-r)) calc(18px + var(--safe-b)) calc(12px + var(--safe-l));
  gap: var(--gap);
}

.animal-zone {
  position: relative;
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  --bg: #fff1d6;
}
.glow {
  position: absolute; left: 50%; bottom: 4%;
  width: min(86vw, 66vh, 600px); aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bg) 0 55%, transparent 70%);
  transition: background .6s;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 50% { scale: 1.06; } }
.shadow {
  position: absolute; left: 50%; bottom: -1%;
  width: min(46vw, 34vh, 300px); height: min(5vw, 4vh, 30px);
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(60, 120, 70, .18);
}

.animal {
  position: relative; z-index: 1;
  height: 100%; max-height: 600px;
  aspect-ratio: 240 / 290; max-width: 92vw;
  will-change: transform;
}
.critter { display: block; width: 100%; height: 100%; overflow: visible; }

.foods {
  flex: none;
  display: flex; gap: var(--gap); justify-content: center;
  position: relative; z-index: 2;
}

/* Short, wide screens (phones sideways): animal left, plates in a column on the right */
@media (orientation: landscape) and (max-height: 620px) {
  :root { --plate: min(27vh, 24vw, 160px); --gap: clamp(8px, 2.4vh, 20px); }
  .stage { flex-direction: row; padding-top: calc(12px + var(--safe-t)); padding-right: calc(16px + var(--safe-r)); }
  .animal-zone { height: 100%; }
  .foods { flex-direction: column; }
}

/* ---------- Food plates ---------- */
.plate {
  position: relative;
  width: var(--plate); height: var(--plate);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, var(--plate-bg, #fff6c9) 0 56%, #fff 57% 100%);
  box-shadow: 0 8px 0 rgba(150, 170, 200, .45), 0 14px 26px rgba(110, 140, 190, .3);
  transition: opacity .3s, scale .3s, box-shadow .15s;
  animation: plateIn .55s cubic-bezier(.3, 1.6, .5, 1) backwards, bob 2.6s ease-in-out .6s infinite;
}
.plate:nth-child(2) { animation-delay: .12s, .9s; }
.plate:nth-child(3) { animation-delay: .24s, 1.2s; }
.plate:active { box-shadow: 0 3px 0 rgba(150, 170, 200, .45), 0 6px 14px rgba(110, 140, 190, .3); }
.plate .food {
  font-family: var(--emoji);
  font-size: calc(var(--plate) * .54); line-height: 1;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .12));
}
.plate.tried { opacity: .55; scale: .88; }
.plate.picked .food { visibility: hidden; }
.plate.away { animation: plateOut .4s ease-in both; }
.plate.nudge .food { animation: nudge 1s ease-in-out; }

@keyframes plateIn { from { scale: 0; rotate: -20deg; } to { scale: 1; rotate: 0deg; } }
@keyframes plateOut { to { scale: 0; opacity: 0; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes nudge {
  0%, 100% { transform: none; }
  15% { transform: scale(1.18) rotate(-12deg); }
  30% { transform: scale(1.18) rotate(12deg); }
  45% { transform: scale(1.18) rotate(-10deg); }
  60% { transform: scale(1.12) rotate(6deg); }
  80% { transform: scale(1.05); }
}

/* ---------- The animal: moods ----------
   #animal[data-mood] = idle | hungry | ready | chew | happy | yuck */

/* Only the transform-animated parts get their own origin. */
.critter .eye-open, .critter .m, .critter .cheek, .critter .ear,
.critter .arm, .critter .tail, .critter .blep {
  transform-box: fill-box; transform-origin: center;
}
.critter .c-head { transform-box: view-box; transform-origin: 120px 190px; }
.critter .c-body { transform-box: view-box; transform-origin: 120px 262px; }
.critter .ear-l { transform-origin: 85% 75%; }
.critter .ear-r { transform-origin: 15% 75%; }
.critter .tail  { transform-origin: 0% 100%; }
.animal[data-id="dog"] .ear { transform-origin: 50% 10%; }
.animal[data-id="rabbit"] .ear { transform-origin: 50% 95%; }

/* Which mouth and eyes show in each mood */
.critter .m, .critter .eye-happy, .critter .eye-squint { display: none; }
[data-mood="idle"]   .m-smile,
[data-mood="hungry"] .m-open,
[data-mood="ready"]  .m-open,
[data-mood="chew"]   .m-chew,
[data-mood="happy"]  .m-happy,
[data-mood="yuck"]   .m-yuck { display: inline; }
[data-mood="chew"] .eye-open, [data-mood="happy"] .eye-open, [data-mood="yuck"] .eye-open { display: none; }
[data-mood="chew"] .eye-happy, [data-mood="happy"] .eye-happy { display: inline; }
[data-mood="yuck"] .eye-squint { display: inline; }

/* Always: blink and breathe */
.critter .eye-open { animation: blink 4.6s infinite; }
.critter .c-body { animation: breathe 2.8s ease-in-out infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes breathe { 50% { transform: scale(1.03, .98); } }

/* Hungry: mouth opens and closes, "aaah", head sways looking for food */
[data-mood="hungry"] .m-open { animation: aaah 1s ease-in-out infinite alternate; }
[data-mood="hungry"] .c-head { animation: sway 2.4s ease-in-out infinite; }
[data-mood="hungry"] .ear    { animation: earFlick 3s ease-in-out infinite; }
@keyframes aaah { from { transform: scale(.85, .5); } to { transform: scale(1.05, 1.08); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes earFlick { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-10deg); } 92% { transform: rotate(8deg); } }

/* Ready: food is on its way, mouth wide open */
[data-mood="ready"] .m-open { transform: scale(1.35, 1.3); transition: transform .2s; }
[data-mood="ready"] .c-head { transform: rotate(0) scale(1.04); transition: transform .2s; }

/* Chew: munch munch, puffy cheeks */
[data-mood="chew"] .m-chew { animation: munch .18s ease-in-out infinite alternate; }
[data-mood="chew"] .cheek  { transform: scale(1.6); transition: transform .15s; }
[data-mood="chew"] .cheeks { opacity: .85; }
[data-mood="chew"] .c-head { animation: munchHead .18s ease-in-out infinite alternate; }
@keyframes munch { from { transform: scale(1.1, 1); } to { transform: scale(.8, .25); } }
@keyframes munchHead { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(5px) rotate(2deg); } }

/* Happy: big smile, hands up, dance! */
[data-mood="happy"] { animation: dance .42s ease-in-out infinite alternate; }
[data-mood="happy"] .arm-l { animation: waveL .42s ease-in-out infinite alternate; }
[data-mood="happy"] .arm-r { animation: waveR .42s ease-in-out infinite alternate; }
[data-mood="happy"] .ear   { animation: wiggle .3s ease-in-out infinite alternate; }
[data-mood="happy"] .tail  { animation: wag .2s ease-in-out infinite alternate; }
[data-mood="happy"] .cheeks { opacity: .8; }
@keyframes dance {
  from { transform: translateY(0) rotate(-6deg); }
  to   { transform: translateY(-7%) rotate(6deg); }
}
@keyframes waveL { from { transform: translate(-16px, -44px) rotate(-10deg); } to { transform: translate(-24px, -62px) rotate(10deg); } }
@keyframes waveR { from { transform: translate(24px, -62px) rotate(-10deg); } to { transform: translate(16px, -44px) rotate(10deg); } }
@keyframes wiggle { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* Yuck: a silly "no thank you" head shake with tongue out */
[data-mood="yuck"] .c-head { animation: shake .26s ease-in-out 4; }
[data-mood="yuck"] .blep   { animation: blep .26s ease-in-out infinite alternate; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes blep { from { transform: scaleY(.7); } to { transform: scaleY(1.15); } }

/* Tapping the animal itself: a little squish while it says hello */
.animal.boop { animation: boop .45s ease-out; }
@keyframes boop {
  0%, 100% { transform: none; }
  30% { transform: scale(1.08, .9); }
  60% { transform: scale(.95, 1.06); }
}

/* Arrive / leave */
.animal.enter { animation: hopIn .9s cubic-bezier(.3, .9, .4, 1) both; }
.animal.leave { animation: hopOut .6s ease-in both; }
@keyframes hopIn {
  0%   { transform: translateX(80vw) translateY(0) scale(.8); }
  25%  { transform: translateX(50vw) translateY(-14%) scale(.85); }
  50%  { transform: translateX(22vw) translateY(0) scale(.92, .86); }
  72%  { transform: translateX(4vw) translateY(-8%) scale(1); }
  88%  { transform: translateX(0) translateY(0) scale(1.06, .92); }
  100% { transform: none; }
}
@keyframes hopOut {
  0%   { transform: none; }
  30%  { transform: translateX(-6vw) translateY(-12%) rotate(-8deg); }
  60%  { transform: translateX(-36vw) translateY(0) rotate(-4deg); }
  100% { transform: translateX(-90vw) translateY(-16%) rotate(-12deg); opacity: 0; }
}

/* ---------- Effects ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; }
.flyer, .float, .crumb, .confetti { position: absolute; left: 0; top: 0; will-change: transform; }
.flyer {
  font-family: var(--emoji); line-height: 1;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .15));
}
.float {
  font-family: var(--emoji); line-height: 1;
  animation: floatUp var(--dur, 2.2s) ease-out forwards;
}
@keyframes floatUp {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 0; }
  15%  { transform: translate(calc(-50% + var(--dx) * .2), calc(-50% - 30px)) scale(1.15) rotate(calc(var(--rot) * .3)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--rise))) scale(.9) rotate(var(--rot)); opacity: 0; }
}
.crumb { width: 10px; height: 10px; border-radius: 50%; }
.confetti { width: 12px; height: 18px; border-radius: 3px; }

.noscript {
  position: fixed; inset: auto 0 40% 0; text-align: center;
  font-size: 22px; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .sun, .cloud, .glow, .plate, .critter .c-body { animation: none !important; }
  .plate { animation: plateIn .3s backwards !important; }
}