.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.gathering { max-width: 1200px; margin: auto; padding: 0 clamp(16px, 3vw, 40px); }
.pet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gathering-more { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 0; }
.gathering-more > .small:last-child { width: 100%; margin: 0; }
.pet-preview { position: relative; display: grid; place-items: center; }
.pet-preview canvas, .pet-preview img { width: 100%; height: auto; display: block; }
.preview-status { font: 12px/1.6 var(--mono); color: var(--muted); text-align: center; padding: 16px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; }
.pet-preview-large { aspect-ratio: 1; background: linear-gradient(#19191905 1px, transparent 1px), linear-gradient(90deg, #19191905 1px, transparent 1px), var(--paper); background-size: 40px 40px; }
@media (max-width: 950px) { .pet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px) {
    .pet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pet-preview-large { aspect-ratio: 4/3; }
}