/* Companion creature: idle animation, the Den screen's few own bits (it otherwise reuses .shop-* from shop.css
   — same sidebar/tabs/grid layout, same card/button language), and the species+name picker. */

/* ---------- creature idle animation (B.pet.svg adds .pt-anim for sizes >= 44 px) ---------- */
.pet { overflow: visible; }
.pt-anim { animation: pt-bob 2.6s var(--pt-d, 0s) ease-in-out infinite alternate; }
.pt-anim .pt-aura { animation: pt-twinkle 1.6s var(--pt-d, 0s) ease-in-out infinite alternate; }
.pt-anim .pt-ray { animation: pt-twinkle 1.1s var(--pt-d, 0s) ease-in-out infinite alternate; }
@keyframes pt-bob { from { transform: none; } to { transform: translateY(-3px); } }
@keyframes pt-twinkle { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pt-anim, .pt-anim * { animation: none !important; } }

/* ---------- Den screen ---------- */
.den-stage { aspect-ratio: 340 / 210; } /* the den scene (340x210) is wider than the default .shop-stage square */
.den-empty { flex: 1; display: grid; place-items: start center; padding: 24px 16px; }
.den-growth { width: 100%; padding: 14px 16px; }
.den-growth .shop-sub { margin-bottom: 10px; }
.den-bar i { background: linear-gradient(90deg, var(--green), var(--blue)); }

/* ---------- species + name picker (drop-in for profile creation) ---------- */
.pet-pick { max-width: 620px; margin: 0 auto; padding: 24px 26px 28px; }
.pet-pick-grid-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.pet-pick-preview { flex: none; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #EEF5FF 72%); box-shadow: inset 0 0 0 2px var(--line); }
.pet-pick-preview svg { width: 88%; height: auto; }
.pet-pick-grid { flex: 1; min-width: 220px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pet-pick-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 10px; border-radius: 16px;
  background: #fff; box-shadow: 0 4px 0 var(--line), inset 0 0 0 2px var(--line); transition: transform .08s;
}
.pet-pick-card svg { width: 56px; height: 56px; }
.pet-pick-card small { font-weight: 800; font-size: 13px; line-height: 1.15; }
.pet-pick-card:active { transform: translateY(2px); }
.pet-pick-card.on { background: #EAF3FF; box-shadow: 0 4px 0 var(--blue), inset 0 0 0 2px var(--blue); }
.pet-pick-card:focus-visible { outline: 4px solid var(--ink); outline-offset: 2px; }
.pet-pick > .btn { display: flex; margin: 22px auto 0; }

@media (max-width: 640px) {
  .pet-pick { padding: 18px 16px 22px; }
  .pet-pick-grid-wrap { flex-direction: column; }
  .pet-pick-preview { width: 120px; height: 120px; }
  .pet-pick-grid { grid-template-columns: repeat(3, 1fr); width: 100%; }
}
/* phones: readable labels; the den scene keeps its own wide shape (its svg is drawn 300×300 around a 340×210 view) */
@media (max-width: 700px), (max-height: 500px) and (min-width: 560px) {
  .pet-pick-card { min-height: 48px; }
  .pet-pick-card small { font-size: 14px; }
  .den-stage svg { aspect-ratio: 340 / 210; }
}
@media (max-width: 600px) {
  .den-stage { width: 100%; max-width: 360px; } /* the den scene is wide: give it the whole row */
}
@media (max-height: 500px) and (min-width: 560px) {
  .pet-pick { max-width: 700px; padding: 14px 20px 16px; }
  .pet-pick-preview { width: 120px; height: 120px; }
  .pet-pick > .btn { margin-top: 12px; }
}