.pet-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
}

.pet-type-tile {
  width: 200px;
  min-height: 150px;
  background: var(--color-button);
  border: 3px solid var(--color-button-border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px;
}

.pet-type-tile:active {
  transform: scale(0.96);
}

.pet-type-emoji {
  font-size: 56px;
}

.pet-type-title {
  font-size: 26px;
  font-weight: bold;
  color: var(--color-accent);
}

.pet-name-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

.pet-name-input {
  width: 100%;
  max-width: 360px;
  font-size: 24px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 3px solid var(--color-button-border);
  background: var(--color-bg-panel);
  color: var(--color-text);
  text-align: center;
}

.pet-balance {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: var(--color-accent);
  margin: 4px 0 12px;
}

.pet-stage {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.pet-play-area {
  position: relative;
  width: 100%;
  max-width: min(94vw, 760px);
  height: min(52vh, 380px);
  min-height: 260px;
  margin: 0 auto;
  border: 3px solid var(--color-button-border);
  border-radius: 18px;
  overflow: hidden;
}

.pet-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pet-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pet-display-wrap {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: left 1.8s ease-in-out, top 1.8s ease-in-out;
}

.pet-character {
  transition: width 0.3s ease, transform 0.5s ease;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.3));
}

.pet-character.facing-left {
  transform: scaleX(-1);
}

/* 名前を呼んで近づいてくる間、少し大きく見せる(近づいてきた感じを出す) */
.pet-character.pet-approach-size {
  transform: scale(1.35);
}

.pet-character.facing-left.pet-approach-size {
  transform: scaleX(-1.35) scaleY(1.35);
}

.pet-character svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 常時ループする歩行アニメ(前脚・後脚が交互に上下する簡易ウォークサイクル) */
.pet-leg {
  transform-box: fill-box;
  transform-origin: top center;
}

.pet-leg-a {
  animation: pet-walk-a 0.6s ease-in-out infinite;
}

.pet-leg-b {
  animation: pet-walk-b 0.6s ease-in-out infinite;
}

@keyframes pet-walk-a {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(-10deg);
  }
}

@keyframes pet-walk-b {
  0%, 100% {
    transform: translateY(-3px) rotate(10deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
}

.pet-tail {
  animation: pet-tail-wag 0.9s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: right center;
}

@keyframes pet-tail-wag {
  0%, 100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

.pet-bounce {
  animation: pet-bounce-anim 0.4s ease;
}

@keyframes pet-bounce-anim {
  0% {
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.12) translateY(-14px);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}

/* レベルアップのお祝い、または呼ばれて芸を見せる時のくるっと回転 */
.pet-trick {
  animation: pet-trick-anim 1s ease;
}

@keyframes pet-trick-anim {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1.3);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}

.pet-name-label {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-text);
}

.pet-stats {
  width: 100%;
  max-width: 420px;
  margin: 12px auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pet-stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pet-stat-label {
  width: 70px;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}

.pet-stat-bar {
  flex: 1;
  height: 24px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid var(--color-button-border);
  border-radius: 12px;
  overflow: hidden;
}

.pet-stat-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.pet-stat-hunger {
  background: #ff9d4d;
}

.pet-stat-happiness {
  background: #7dff9c;
}

.pet-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.pet-action-btn {
  min-height: 72px;
  padding: 0 24px;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-text);
  background: var(--color-button);
  border: 3px solid var(--color-button-border);
  border-radius: 16px;
  cursor: pointer;
}

.pet-action-btn:active {
  transform: scale(0.95);
}

.pet-call-btn {
  background: var(--color-accent);
  color: #2a1a06;
  border-color: var(--color-accent-dark, var(--color-button-border));
}