.resources { grid-template-columns: repeat(2, 1fr); }
.animal-display { position: absolute; left: 50%; bottom: 28px; width: 150px; height: 150px; transform: translateX(-50%); }
.animal-motion { position: relative; width: 100%; height: 100%; transform-origin: 50% 90%; animation: friend-breathe 3.8s ease-in-out infinite; transition: scale .3s; }
.animal-display.egg .animal-motion { animation: egg-wiggle 6s ease-in-out infinite; }
.animal-display.egg-ready .animal-motion { animation: egg-wiggle-ready 3s ease-in-out infinite; }
.animal-display.growing .animal-motion { scale: 1.08; }
.animal-display.thriving .animal-motion { scale: 1.16; }
#animal-art { display: block; width: 100%; height: 100%; }
.animal-display.mint #animal-art { filter: sepia(.55) saturate(1.3) hue-rotate(70deg); }
.animal-display.lavender #animal-art { filter: sepia(.55) saturate(1.4) hue-rotate(210deg); }
.animal-display.peach #animal-art { filter: sepia(.5) saturate(1.4) hue-rotate(320deg); }
#animal-accessory { position: absolute; top: 4px; right: 8px; font-size: 30px; line-height: 1; }
@keyframes friend-breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.025); } }
@keyframes egg-wiggle { 0%, 72%, 100% { transform: rotate(0); } 77%, 87% { transform: rotate(-4deg); } 82%, 92% { transform: rotate(4deg); } 96% { transform: rotate(-1deg); } }
@keyframes egg-wiggle-ready { 0%, 55%, 100% { transform: rotate(0); } 60%, 70%, 80% { transform: rotate(-8deg) translateY(-2px); } 65%, 75%, 85% { transform: rotate(8deg) translateY(-2px); } 90% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .animal-motion, .animal-display.egg .animal-motion, .animal-display.egg-ready .animal-motion { animation: none; transition: none; } }
.collection-section { margin-top: 40px; }
.collection-section h2 { font-size: 24px; }
.collection-section .section-title > div > p:not(.eyebrow) { color: #87968a; font-size: 13px; margin-top: 8px; }
.collection-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.collection-list button { background: #fffefa; border: 1px solid #e0e9d9; color: #3b5741; border-radius: 11px; padding: 11px 14px; font-weight: 700; }
.collection-list button[aria-pressed="true"] { border-color: #789a6c; background: #eaf3e5; }
.customize { background: #fffefa; border: 1px solid #e8ebde; border-radius: 16px; padding: 20px; }
.customize h3 { font-size: 17px; }
.customize p:not(.eyebrow) { margin-top: 7px; color: #87968a; font-size: 12px; }
.cosmetic-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cosmetic-list button { background: #f5f7ef; color: #496149; border: 1px solid #dfe8da; border-radius: 9px; padding: 9px 11px; font-size: 12px; }
.cosmetic-list button[aria-pressed="true"] { background: #dcebd4; border-color: #789a6c; font-weight: 700; }
.cosmetic-list button:disabled { opacity: .6; cursor: not-allowed; }
.science-card { background: #e8f1f3; border-color: #d7e8eb; grid-column: 1 / -1; }
.science-icon { background: #d4e8ec; }
.science-card .quest-content small { color: #769fa6; }
@media(max-width: 560px) { .collection-section .section-title { flex-direction: column; } .collection-section .primary { margin-top: 4px; } }