/* 仮ペット（P1-10）。アセットは差し替え前提なので、絵柄側にサイズ指定を寄せている。 */
.pet-card {
  position: relative;
  background: linear-gradient(180deg, #1d2340, #171b2e);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.pet-touch {
  width: 64px; height: 64px; flex: 0 0 64px; margin: 0; padding: 0;
  border-radius: 50%; background: #232a4a; display: grid; place-items: center;
}
.pet-art { font-size: 2rem; line-height: 1; display: block; }
.pet-art.big { font-size: 2.2rem; }
.pet-art.huge { font-size: 4.4rem; }
img.pet-art { width: 40px; height: 40px; object-fit: contain; }
img.pet-art.huge { width: 96px; height: 96px; }
.pet-main { flex: 1; min-width: 0; }
.pet-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pet-stage { font-size: .72rem; padding: 2px 9px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-weight: 400; }
.pet-bar { height: 6px; border-radius: 999px; background: #2a3050; margin: 8px 0 6px; overflow: hidden; }
.pet-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.pet-sub { color: var(--muted); font-size: .78rem; }
.pet-more { width: auto; margin: 0; padding: 8px 12px; font-size: .78rem; }
.pet-bubble {
  position: absolute; left: 12px; bottom: -10px;
  background: var(--panel2); color: var(--fg); font-size: .82rem;
  padding: 7px 12px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.pet-card.hop .pet-touch { animation: pet-hop .7s ease; }
@keyframes pet-hop {
  0% { transform: translateY(0); }
  30% { transform: translateY(-10px) rotate(-6deg); }
  55% { transform: translateY(0) rotate(4deg); }
  75% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.pet-sheet { position: fixed; inset: 0; background: rgba(8,10,20,.85); z-index: 800; display: grid; place-items: center; padding: 20px; }
.pet-sheet-card { width: 100%; max-width: 360px; background: var(--panel); border-radius: var(--radius); padding: 22px 20px; text-align: center; }
.pet-hero { margin-bottom: 8px; }
.pet-hero-name { font-size: 1.15rem; font-weight: 700; display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 12px; }
.pet-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 12px; }
.pet-facts div { background: var(--panel2); border-radius: 10px; padding: 9px 6px; font-size: .78rem; color: var(--muted); }
.pet-facts b { display: block; font-size: 1.1rem; color: var(--fg); }
.pet-note { color: var(--muted); font-size: .78rem; margin-top: 6px; }

body.easy .pet-art.big { font-size: 2.8rem; }
body.easy .pet-touch { width: 84px; height: 84px; flex: 0 0 84px; }
body.easy .pet-sub { font-size: .95rem; }