/* ---------- paseo con tu mascota (js/pet-walk.js) y su ficha en la tarjeta ---------- */
/* Solo se mueven transform y opacity (ver css/perf.css). */

/* el nombre de la mascota que te acompaña (o la de otro oso): bajo sus pies, a la MISMA altura que el
   nombre del oso (.label .nametag en css/style.css: top 10px bajo los pies) */
.pet-follower:not(.home) > .pet-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 10px;
  padding: 2px 10px; border-radius: 12px; background: rgba(255,255,255,.92); border: 2px solid #9cc3e6;
  font: 700 18px/1.2 var(--font); color: #10233d; white-space: nowrap; pointer-events: none; }

/* 💭🍖: solo cuando tiene hambre; sube y baja un poquito */
.pet-think { display: none; position: absolute; left: 72%; bottom: 96%; font-size: 30px; line-height: 1; white-space: nowrap; pointer-events: none; }
.pet-follower.hungry > .pet-think { display: block; animation: petThink 2.4s ease-in-out infinite; }
@keyframes petThink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* "¡+12 🪙!": sube encima de tu mascota cuando encuentra algo */
.pet-find { position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px; padding: 4px 12px; border-radius: 14px;
  background: #2f7d4a; color: #fff; border: 3px solid #fff; font: 800 20px/1.2 var(--font); white-space: nowrap; pointer-events: none;
  transform: translateX(-50%); animation: petFind 2.4s ease-out forwards; }
@keyframes petFind { 0% { opacity: 0; transform: translate(-50%, 8px); } 15% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -18px); } }
@media (prefers-reduced-motion: reduce) { .pet-follower.hungry > .pet-think, .pet-find { animation: none; } }