.pet-initial,
.activity-card-initial,
.camera-media-avatar-fallback {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--color-selection-soft);
  color: var(--color-brand-emphasis);
  font-weight: var(--font-weight-bold);
}

.pet-card > .pet-card-avatar {
  width: 92px;
  height: 108px;
  align-self: center;
  border-radius: var(--radius-compact);
}

.scope-pet-avatar {
  width: 34px;
  height: 34px;
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-circle);
}

.pet-progress-avatar {
  width: 64px;
  height: 64px;
  border: 3px solid var(--color-bg-surface);
  border-radius: var(--radius-circle);
  box-shadow: var(--elevation-card);
}

.adventure-pet-avatar,
.camera-pet-avatar {
  width: var(--control-min-size);
  height: var(--control-min-size);
  border-radius: var(--radius-circle);
}

.activity-card-initial {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  font-size: var(--font-size-label);
}

.camera-media-avatar-fallback {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  font-size: var(--font-size-micro);
}

.activity-moments-empty {
  display: grid;
  min-height: 148px;
  grid-column: 1 / -1;
  place-content: center;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  text-align: center;
}

.activity-moments-empty svg {
  width: 28px;
  height: 28px;
  color: var(--color-brand-emphasis);
}

.activity-moments-empty strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.activity-moments-empty span {
  font-size: var(--font-size-caption);
}

.activity-card-note--pending {
  color: var(--color-warning);
}

.activity-card-note--pending svg {
  animation: mock-spin var(--motion-loading-spin) linear infinite;
}

.feed-post--published {
  animation: phase11-post-in var(--motion-panel) var(--ease-emphasized) both;
}

@keyframes phase11-post-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--space-3))); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 360px) {
  .pet-card > .pet-card-avatar {
    width: 80px;
    height: 96px;
  }
}