/* 스탯스토리 — 펫(js/pets.js): 주인공 오른발 바깥쪽 땅 위를 짧게 오간다. 날거나 어깨 곁에 뜨면 산만하고 주인공을 가리면 안 되어서,
   발 높이에서 몸과 조금 떨어져 있게 했다. 가는 쪽을 바라보고(.pet-face), 걸음마다 살짝 통통 튄다(.pet-bob). */
.act:has(> .pet-orbit) { position: relative; }
.pet-orbit {
  position: absolute; left: calc(100% + 4%); bottom: 3%; z-index: 3; /* 발바닥이 주인공 발과 같은 땅에 오게 */ width: 36%; aspect-ratio: 1; pointer-events: none;
  animation: pet-pace 9s ease-in-out infinite;
}
.pet-face, .pet-bob { width: 100%; height: 100%; }
.pet-face { animation: pet-face 9s linear infinite; }
.pet-bob { transform-origin: 50% 100%; animation: pet-step .5s ease-in-out infinite; }
/* 그림 칸은 늘 펫 칸 크기(그림을 불러오기 전에도 같아서 장비 화면이 크기를 잴 때 흔들리지 않는다). 그림은 칸 안 아래 가운데에 */
.pet-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 2px 1px rgba(30, 20, 50, .35)); }
/* 주인공 곁(0)에서 쉬다가 바깥으로 걸어 나가(70%) 잠깐 쉬고 다시 걸어온다 */
@keyframes pet-pace {
  0%, 10% { transform: translateX(0); }
  45%, 55% { transform: translateX(70%); }
  90%, 100% { transform: translateX(0); }
}
/* 그림은 오른쪽을 본다: 나갈 때·주인공 곁에서는 오른쪽(몬스터 쪽), 바깥 끝에서 돌아서 올 때는 왼쪽(주인공 쪽) */
@keyframes pet-face { 0%, 46% { transform: none; } 50%, 91% { transform: scaleX(-1); } 95%, 100% { transform: none; } }
@keyframes pet-step { 50% { transform: translateY(-5%) scaleY(.97); } }
/* 정답을 맞히면 깡충 */
.pet-bob.hop { animation: pet-hop .55s ease-out; }
@keyframes pet-hop { 35% { transform: translateY(-38%) scale(1.08); } 70% { transform: translateY(0) scale(1.04, .94); } }
/* 지도의 작은 주인공 표시 곁 */
.pet-orbit.small { width: 44%; }
@media (prefers-reduced-motion: reduce) {
  .pet-orbit, .pet-face, .pet-bob, .pet-bob.hop { animation: none; }
}
/* 펫(종 모양 해파리)이 HP 를 채울 때 뜨는 초록 숫자(js/battle.js 의 floater) */
.dmg.heal { font-size: clamp(26px, 3.6vw, 38px); }
.dmg.heal span { background: linear-gradient(180deg, #eaffea 0%, #7be495 45%, #1fa95e 100%); -webkit-background-clip: text; background-clip: text; }