/* Final mobile QA layer. Keep this file last in the cascade. */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: max(16px, env(safe-area-inset-left));
    --mobile-gutter-right: max(16px, env(safe-area-inset-right));
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  main,
  .growth-page,
  .game-page,
  .creator-directory,
  .guide-layout,
  .article-layout,
  .codes-page,
  .action-page main,
  .media-kit-page main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter-right) !important;
  }

  .hero,
  .guide-hero,
  .creator-hero,
  .article-hero,
  .growth-hero,
  .game-detail-hero,
  .discover-intro,
  .finder-section,
  .results-section,
  .collections-section,
  .recent-section,
  .faq-section,
  .home-entry-grid,
  .home-featured-links,
  .home-trust-strip,
  .home-bottom-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero-copy,
  .hero-showcase,
  .section-heading,
  .results-heading,
  .section-heading > div,
  .results-heading > div,
  .growth-hero > div,
  .guide-hero > div,
  .creator-hero > div,
  .article-hero > div,
  .game-detail-hero > div {
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
  }

  h1,
  h2,
  h3,
  .hero h1,
  .guide-hero h1,
  .creator-hero h1,
  .article-hero h1,
  .growth-hero h1,
  .game-detail-hero h1,
  .discover-intro h1,
  .section-heading h2,
  .results-heading h2 {
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    line-height: 1.04 !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    word-break: normal !important;
    text-wrap: balance;
  }

  p,
  li,
  a,
  button,
  label,
  summary,
  strong,
  span {
    overflow-wrap: anywhere;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
  }

  button,
  select,
  input,
  textarea,
  .primary-cta,
  .hero-random,
  .find-button,
  .roulette-button,
  .details-link,
  .play-link,
  .text-button,
  .site-saved-button,
  .mobile-menu-toggle {
    min-width: 0;
  }

  button,
  select,
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  .primary-cta,
  .hero-random,
  .find-button,
  .roulette-button,
  .details-link,
  .play-link {
    min-height: 44px;
  }

  .site-header,
  .site-header-inner {
    max-width: 100%;
  }

  .site-header {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter-right) !important;
  }

  .site-header-inner {
    width: 100%;
    min-width: 0;
  }

  .brand,
  .brand-name {
    min-width: 0;
  }

  .site-footer,
  footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter-right) !important;
  }

  .home-entry-grid,
  .home-featured-links,
  .home-trust-strip,
  .home-bottom-grid,
  .home-faq,
  .home-collaboration {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  .home-entry-cards,
  .home-featured-grid,
  .creator-directory-grid,
  .guide-category-grid,
  .media-kit-grid,
  .partnership-principle-grid,
  .contribution-types,
  .game-page-layout,
  .fit-grid,
  .game-media-gallery {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-entry-cards > *,
  .home-featured-grid > *,
  .creator-directory-grid > *,
  .guide-category-grid > *,
  .media-kit-grid > *,
  .partnership-principle-grid > *,
  .contribution-types > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  .action-page-shortcuts,
  .action-page-steps,
  .home-entry-cards,
  .home-featured-grid,
  .creator-directory-grid,
  .guide-category-grid {
    gap: 10px !important;
  }

  .action-page-shortcuts a,
  .action-page-steps li,
  .media-kit-card,
  .creator-directory-card,
  .guide-link-card,
  .home-entry-cards > a,
  .home-featured-grid > a {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .action-page .growth-hero,
  .guide-hero,
  .creator-hero,
  .article-hero,
  .game-detail-hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .motion-reveal,
  .motion-reveal[data-reveal="left"],
  .motion-reveal[data-reveal="right"],
  .motion-reveal.is-visible {
    transform: none !important;
    translate: none !important;
  }

  .discover-page main {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter-right) !important;
  }

  .discover-page .discover-intro,
  .discover-page .finder-section,
  .discover-page .results-section {
    width: 100% !important;
    margin-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .discover-page #finder > .section-heading,
  .discover-page .results-heading {
    padding-inline: 3px !important;
  }

  .discover-page .finder-panel,
  .discover-page .results-toolbar,
  .discover-page #gameGrid,
  .discover-page .game-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .discover-page #gameGrid,
  .discover-page .game-grid {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-content: start !important;
  }

  .discover-page .game-card,
  .discover-page .game-result-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  .discover-page .results-heading {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 34%) !important;
  }

  .discover-page .results-heading .search-box {
    width: 100% !important;
    min-width: 0 !important;
  }

  .discover-page .results-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 34%) !important;
  }

  .discover-page .collection-filter-wrap .discovery-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .discover-page .collection-filter-wrap .discovery-filter button,
  .discover-page .sort-control select {
    min-height: 42px !important;
  }

  .discover-page .mobile-filter-summary {
    width: 100% !important;
    max-width: 100% !important;
  }

  .discover-page .mobile-filter-summary-copy,
  .discover-page .mobile-filter-summary-picks {
    min-width: 0 !important;
  }

  .discover-page .mobile-filter-summary-picks {
    text-overflow: ellipsis;
  }

  .codes-page table,
  .guide-layout table,
  .article-layout table,
  .game-page table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 390px) {
  .discover-page .results-heading,
  .discover-page .results-toolbar {
    grid-template-columns: 1fr !important;
  }

  .discover-page .results-heading .search-box,
  .discover-page .results-filter-controls,
  .discover-page .sort-control {
    width: 100% !important;
  }

  .discover-page .collection-filter-wrap .discovery-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}