/* QA: performance + HUD mobile. Carrega por último. */

html {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

@media (max-width: 900px) {
  .bg-mesh {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
  .bg-grain {
    display: none !important;
  }
  body {
    background-attachment: scroll !important;
  }

  .header,
  .header.is-scrolled,
  .main-section-btn,
  .mobile-bottom-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .header,
  .header.is-scrolled {
    background: rgba(5, 10, 12, 0.97) !important;
  }

  /* Header que colapsa no scroll muda a altura e empurra a página. */
  .header.header-collapsed .header-body,
  .header.header-top-hidden .header-body {
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .header-compact-bar {
    display: none !important;
  }

  .anime-grid > .anime-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
    contain: layout paint style;
  }

  .browse-row-track,
  .trending-track,
  .card-detail-recs-track {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .card-hover-actions {
    display: none !important;
  }

  button,
  .btn,
  .mobile-nav-btn,
  .cat-btn,
  .main-section-btn,
  a.brand {
    touch-action: manipulation;
  }
}

@media (max-width: 768px) {
  .header {
    padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px !important;
    gap: 8px !important;
  }
  .header-body {
    gap: 8px !important;
    max-height: none !important;
  }
  .header-row,
  .header-row-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand nav tools"
      "search search search";
    align-items: center;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .header-row-top > .brand {
    grid-area: brand;
    flex: 0 0 auto !important;
    min-width: 0;
  }
  .header-row-top > .main-section-nav {
    grid-area: nav;
    min-width: 0;
    width: 100%;
  }
  .header-row-top > .header-search,
  .header-row-top > #header-search {
    grid-area: search;
    width: 100% !important;
    min-width: 0;
  }
  .header-row-top > .header-right {
    grid-area: tools;
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }

  .btn-tv-mode,
  .site-user-total {
    display: none !important;
  }

  .header-row-top .brand-icon,
  .header-row-top .brand-logo {
    width: 40px !important;
    height: 40px !important;
  }
  .brand-text {
    font-size: 0.95rem !important;
  }

  .mobile-bottom-nav {
    display: grid !important;
    z-index: 160;
    background: rgba(5, 8, 10, 0.98) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.28rem 0.1rem calc(0.28rem + env(safe-area-inset-bottom, 0px));
    min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  }
  body:not(.mode-watch):not(.mode-manga) {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 4px);
  }
  body.mode-watch .mobile-bottom-nav,
  body.mode-manga .mobile-bottom-nav,
  body.search-focused .mobile-bottom-nav,
  body.card-detail-open .mobile-bottom-nav {
    display: none !important;
  }
  body.search-focused:not(.mode-watch):not(.mode-manga),
  body.card-detail-open:not(.mode-watch):not(.mode-manga) {
    padding-bottom: 0;
  }

  .browse-filters-panel {
    z-index: 150;
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 18px) !important;
    max-height: min(70vh, calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px))) !important;
  }
  .header-tools-panel {
    z-index: 170 !important;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 10px) !important;
  }

  .back-to-top,
  .app-toast,
  #toast-container,
  .pwa-install-banner {
    bottom: var(--hud-bottom-offset, calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 0.75rem)) !important;
  }

  .search-bar input {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-mesh,
  .hero::before {
    animation: none !important;
  }
}