/* ============================================================
   Pet puppy — side-view CSS sprite (no image assets).
   Sleeps at a home spot; wakes, walks to a fallen treat, eats
   it, then walks back and lies down until the next word falls.

   Drop-in module: include pet.css + pet.js, then call
   PetGame.init(stageEl) and PetGame.feedWord(word) whenever a
   word is mastered. See pet-demo.html for a working example.
   ============================================================ */

.pet-stage {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.pet-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  background: var(--border, #E3D9D4);
  opacity: 0.6;
}

.pet-score {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted, #6B5C58);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E3D9D4);
  border-radius: var(--radius-pill, 999px);
  padding: 4px 10px;
  z-index: 3;
}

/* ---------------- treats (falling words) ---------------- */

.pet-treat {
  position: absolute;
  top: -40px;
  transform: translateY(0) rotate(-8deg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--brand, #7A2E3A);
  color: var(--on-brand, #fff);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.609rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.15));
  z-index: 1;
  animation-name: pet-fall;
  animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  animation-fill-mode: forwards;
}

@keyframes pet-fall {
  0%   { transform: translateY(0) rotate(-8deg); }
  85%  { transform: translateY(var(--fall-distance, 180px)) rotate(4deg); }
  100% { transform: translateY(var(--fall-distance, 180px)) rotate(0deg); }
}

.pet-treat.is-eaten {
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: translateY(var(--fall-distance, 180px)) scale(0.4);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pet-treat { animation: none; top: var(--fall-distance, 180px); }
}

/* ---------------- puppy ---------------- */

.pet-puppy {
  --fur: #D8A465;
  --fur-dark: #B9803F;
  --snout: #F6E9D3;
  --ink: #33210F;
  --tongue: #E8899B;

  position: absolute;
  bottom: 14px;
  width: 130px;
  height: 90px;
  z-index: 2;
  transition-property: left;
  transition-timing-function: linear;
}

.puppy-sprite {
  position: absolute;
  inset: 0;
  opacity: 1;
  transform-origin: 50% 100%;
  transform: scaleX(1) scaleY(1);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.pet-puppy.is-glancing .puppy-sprite { opacity: 0; }

/* Front-facing pose shown briefly while "looking at the user" — rendered
   30% smaller so it reads as stepping back from the screen to face you. */
.puppy-sprite-front {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.7);
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.pet-puppy.is-glancing .puppy-sprite-front { opacity: 1; }

.puppy-f-body {
  position: absolute;
  left: 23px; bottom: 0;
  width: 84px; height: 44px;
  background: var(--fur);
  border-radius: 42px 42px 30px 30px;
}
.puppy-f-paw {
  position: absolute;
  bottom: -3px;
  width: 18px; height: 14px;
  background: var(--fur-dark);
  border-radius: 50%;
}
.puppy-f-paw--left { left: 32px; }
.puppy-f-paw--right { left: 80px; }
.puppy-f-head {
  position: absolute;
  left: 35px; bottom: 26px;
  width: 60px; height: 56px;
  background: var(--fur);
  border-radius: 50%;
}
.puppy-f-ear {
  position: absolute;
  top: -8px;
  width: 24px; height: 32px;
  background: var(--fur-dark);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: top center;
}
.puppy-f-ear--left { left: -6px; transform: rotate(-16deg); }
.puppy-f-ear--right { right: -6px; transform: rotate(16deg); }
.puppy-f-eye {
  position: absolute;
  top: 20px;
  width: 9px; height: 11px;
  background: var(--ink);
  border-radius: 50%;
  animation: eye-blink 4.5s ease-in-out infinite;
}
.puppy-f-eye--left { left: 14px; }
.puppy-f-eye--right { right: 14px; }
.puppy-f-snout {
  position: absolute;
  left: 16px; top: 32px;
  width: 28px; height: 18px;
  background: var(--snout);
  border-radius: 50% 50% 55% 55% / 55% 55% 50% 50%;
}
.puppy-f-nose {
  position: absolute;
  left: 10px; top: 2px;
  width: 9px; height: 7px;
  background: var(--ink);
  border-radius: 50% 50% 60% 60%;
}
.puppy-f-mouth {
  position: absolute;
  left: 7px; top: 10px;
  width: 14px; height: 5px;
  border-bottom: 2px solid var(--ink);
  border-radius: 0 0 50% 50%;
}

.puppy-bark {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translate(-50%, 4px) scale(0.7);
  font-family: var(--font-display, serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand, #7A2E3A);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E3D9D4);
  border-radius: var(--radius-pill, 999px);
  padding: 2px 10px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.pet-puppy.is-glancing.is-barking .puppy-bark {
  animation: bark-pop 1.1s ease-out;
}
@keyframes bark-pop {
  0%   { opacity: 0; transform: translate(-50%, 4px) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, -6px) scale(1.05); }
  25%  { transform: translate(-50%, -8px) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -16px) scale(0.9); }
}
.pet-puppy.facing-left .puppy-sprite { transform: scaleX(-1); }
.pet-puppy.is-sitting .puppy-sprite { transform: scaleY(0.82); }
.pet-puppy.is-sitting.facing-left .puppy-sprite { transform: scaleX(-1) scaleY(0.82); }
.pet-puppy.is-sleeping .puppy-sprite { transform: scaleX(0.82) scaleY(0.62); }
.pet-puppy.is-sleeping.facing-left .puppy-sprite { transform: scaleX(-0.82) scaleY(0.62); }

.puppy-zzz {
  position: absolute;
  left: 74px; top: -14px;
  font-family: var(--font-display, serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-muted, #6B5C58);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pet-puppy.is-sleeping .puppy-zzz {
  opacity: 1;
  animation: zzz-float 2.4s ease-in-out infinite;
}
@keyframes zzz-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  30%  { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(1.1); }
}

.puppy-tail {
  position: absolute;
  left: -4px; bottom: 26px;
  width: 24px; height: 12px;
  background: var(--fur-dark);
  border-radius: 40% 60% 60% 40% / 60% 60% 40% 40%;
  transform-origin: right center;
  transform: rotate(-15deg);
  transition: transform 0.25s ease;
  animation: tail-idle 0.9s ease-in-out infinite;
}
@keyframes tail-idle {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(-4deg); }
}
.pet-puppy.is-happy .puppy-tail { animation: tail-happy 0.15s linear infinite; }
@keyframes tail-happy {
  0%, 100% { transform: rotate(-30deg); }
  50%      { transform: rotate(10deg); }
}
.pet-puppy.is-sleeping .puppy-tail {
  animation: none;
  transform: rotate(-135deg) translate(12px, -14px);
}

.puppy-leg {
  position: absolute;
  bottom: 0;
  width: 10px; height: 22px;
  background: var(--fur-dark);
  border-radius: 0 0 6px 6px;
  transform-origin: top center;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.puppy-leg--back { left: 26px; }
.puppy-leg--front { left: 88px; }

/* Sleeping: curled up, no legs showing at all. */
.pet-puppy.is-sleeping .puppy-leg { opacity: 0; }

/* Sitting: both legs tuck up and in under the body instead of vanishing. */
.pet-puppy.is-sitting .puppy-leg {
  transform: scaleY(0.5) translateY(-5px) rotate(-10deg);
}
.pet-puppy.is-sitting .puppy-leg--front {
  transform: scaleY(0.5) translateY(-5px) rotate(10deg);
}

.pet-puppy.is-walking .puppy-leg--back { animation: leg-walk-a 0.3s linear infinite; }
.pet-puppy.is-walking .puppy-leg--front { animation: leg-walk-b 0.3s linear infinite; }
@keyframes leg-walk-a {
  0%, 100% { transform: rotate(24deg); }
  50%      { transform: rotate(-24deg); }
}
@keyframes leg-walk-b {
  0%, 100% { transform: rotate(-24deg); }
  50%      { transform: rotate(24deg); }
}

.puppy-body {
  position: absolute;
  left: 20px; bottom: 16px;
  width: 82px; height: 42px;
  background: var(--fur);
  border-radius: 40px 40px 30px 30px;
}

.puppy-head {
  position: absolute;
  left: 78px; bottom: 34px;
  width: 46px; height: 42px;
  background: var(--fur);
  border-radius: 50%;
  transform-origin: 15% 100%;
  transition: transform 0.2s ease;
}
.pet-puppy.is-looking-up .puppy-head {
  transform: rotate(-28deg) translateY(-2px);
}
.pet-puppy.is-sleeping .puppy-head {
  transform: rotate(30deg) translate(-10px, 3px);
}

.puppy-ear {
  position: absolute;
  left: -2px; top: -6px;
  width: 18px; height: 24px;
  background: var(--fur-dark);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: top center;
  transform: rotate(-20deg);
  animation: ear-idle 2.4s ease-in-out infinite;
}
@keyframes ear-idle {
  0%, 100% { transform: rotate(-20deg); }
  50%      { transform: rotate(-13deg); }
}
.pet-puppy.is-sleeping .puppy-ear {
  animation: none;
  transform: rotate(-95deg);
}

.puppy-eye {
  position: absolute;
  left: 30px; top: 14px;
  width: 6px; height: 6px;
  background: var(--ink);
  border-radius: 50%;
  transition: transform 0.2s ease;
  animation: eye-blink 4.5s ease-in-out infinite;
}
@keyframes eye-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.15); }
}
.pet-puppy.is-sleeping .puppy-eye {
  animation: none;
  transform: scaleY(0.15);
}

.puppy-snout {
  position: absolute;
  left: 38px; top: 20px;
  width: 20px; height: 14px;
  background: var(--snout);
  border-radius: 40% 55% 55% 40% / 55% 50% 50% 55%;
}
.puppy-nose {
  position: absolute;
  left: 14px; top: 4px;
  width: 6px; height: 5px;
  background: var(--ink);
  border-radius: 50%;
}
.puppy-mouth-closed {
  position: absolute;
  left: 2px; top: 9px;
  width: 12px; height: 4px;
  border-bottom: 2px solid var(--ink);
  border-radius: 0 0 50% 50%;
  opacity: 1;
}
.puppy-mouth-open {
  position: absolute;
  left: 2px; top: 7px;
  width: 11px; height: 8px;
  background: var(--ink);
  border-radius: 0 0 50% 50% / 0 0 70% 70%;
  opacity: 0;
}
.puppy-tongue {
  position: absolute;
  left: 2px; top: 2px;
  width: 6px; height: 4px;
  background: var(--tongue);
  border-radius: 0 0 50% 50%;
}

.pet-puppy.is-eating .puppy-mouth-closed { animation: chomp-closed 0.3s steps(1, end) 3; }
.pet-puppy.is-eating .puppy-mouth-open   { animation: chomp-open 0.3s steps(1, end) 3; }
@keyframes chomp-closed { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes chomp-open   { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pet-puppy,
  .pet-puppy * { animation: none !important; transition: none !important; }
}