/* fitur pet — kartu "teman baru" saat peliharaan pertama datang */
.pet-card { position: fixed; left: 50%; top: 74px; z-index: 41; display: flex; align-items: center; gap: 14px; width: min(440px, calc(100vw - 24px)); padding: 12px 22px 13px 14px;
  background: var(--washi) var(--fibre) 0 0 / 320px; border-image: var(--deckle) 60 / 30px / 6px round; filter: drop-shadow(0 12px 20px rgba(10, 8, 5, 0.35));
  transform: translate(-50%, -24px); opacity: 0; transition: opacity 0.35s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); pointer-events: none; }
.pet-card.show { opacity: 1; transform: translate(-50%, 0); }
.pet-card .pet-seal { flex: none; display: grid; place-items: center; width: 50px; height: 50px; font: 400 30px/1 var(--kanji); color: var(--washi); background: var(--shu); transform: rotate(-4deg);
  -webkit-mask: var(--grain) 0 0 / 120px; mask: var(--grain) 0 0 / 120px; }
.pet-card small { display: block; font: 700 12.5px var(--sc); letter-spacing: 0.1em; color: var(--shu-d); }
.pet-card b { display: block; font: 800 20px/1.15 var(--display); color: var(--ink); }
.pet-card span:not(.pet-seal) { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 640px) { .pet-card { top: 60px; } .pet-card .pet-seal { width: 42px; height: 42px; font-size: 25px; } }