/* Performance-focused utilities */

/* Offscreen rendering optimization */
.deferred-section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px 800px;
}

/* Large scrollable regions */
.autocomplete-users-list,
.created-images-list,
.page-content {
  content-visibility: auto;
  contain-intrinsic-size: 600px 800px;
}

/* Avoid reflow jank on lazy images */
img[loading="lazy"] {
  contain: content;
}

/* Common avatar/icon classes are square; reserve aspect ratio to reduce CLS */
.ai-avatar-icon,
.ai-avatar-icon-category,
.elf-style-icon,
.mdl-list__item-avatar,
.chat-one-to-one-icon {
  aspect-ratio: 1 / 1;
}

/* Contain the game wrapper to prevent internal shifts from affecting the page */
.main-game-wrapper {
  overflow: hidden;
  position: relative;
}

/* Prevent footer from shifting during layout initialization */
#footerbody {
  contain: layout style;
}

/* Category grid images - prevent layout shift */
.ai-avatar-icon-category {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Featured game card images */
.featured-card img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

/* Prevent FOIT for Material Icons */
.material-icons {
  font-display: block;
}

/* Prefer reduced motion users */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}