/* Named animals and ambient world life: large, calm, mouse-first panels. */

/* The engine spreads a panel across a two-page book. Give the left plate the
   painted animal so the spread reads as a field-book entry, and drop the small
   inline portrait that would otherwise repeat it. */
#modal-card.book.remscape-animal-book .book-plate {
  background-color: rgba(103, 76, 42, 0.08);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 8px rgba(54, 36, 18, 0.22));
  animation: remscape-animal-portrait-in 320ms ease-out both;
}
#modal-card.book.remscape-animal-book .remscape-animal-portrait { display: none; }
#modal-card.book.remscape-animal-book .remscape-animal-head { grid-template-columns: minmax(0, 1fr); }

@keyframes remscape-animal-portrait-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  #modal-card.book.remscape-animal-book .book-plate { animation: none; }
}

.remscape-animal-panel { color: #493821; }
.remscape-animal-head {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px;
  align-items: center; margin-bottom: 12px;
}
.remscape-animal-portrait {
  width: 96px; height: 96px; border-radius: 12px;
  border: 1px solid rgba(100, 73, 37, 0.34);
  background: rgba(255, 248, 224, 0.42) center/86% no-repeat;
}
.remscape-animal-titles { min-width: 0; }
.remscape-animal-titles .modal-title { margin: 0 0 4px; color: #3a2a16; }
.remscape-animal-species {
  margin: 0; color: #7a5a32; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.remscape-animal-speech {
  margin: 0 0 10px; padding: 12px 14px;
  border-left: 3px solid rgba(224, 173, 93, 0.72); border-radius: 0 10px 10px 0;
  background: rgba(255, 248, 224, 0.38);
  color: #4a3820; font: italic 1rem/1.5 var(--serif);
}
.remscape-animal-note { margin: 0; color: #5f4b32; font-size: 0.9rem; line-height: 1.45; }
.remscape-animal-close { width: 100%; min-height: 48px; margin-top: 14px; }

@media (max-width: 560px) {
  .remscape-animal-head { grid-template-columns: 72px minmax(0, 1fr); }
  .remscape-animal-portrait { width: 72px; height: 72px; }
}

@media (max-height: 520px) {
  .remscape-animal-head { margin-bottom: 8px; }
  .remscape-animal-portrait { width: 64px; height: 64px; }
  .remscape-animal-speech { padding: 9px 11px; }
  .remscape-animal-close { min-height: 42px; margin-top: 10px; }
}