/* Cross-device phone refinements. Desktop (769px and wider) is intentionally untouched. */
@media (max-width: 768px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.mobile-type-unified {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    body.mobile-type-unified {
      overflow-x: clip;
    }
  }

  body.mobile-type-unified main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.mobile-type-unified :where(.container, .content-container, .main-container, .footer-container) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: max(clamp(0.75rem, 3.5vw, 1rem), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(0.75rem, 3.5vw, 1rem), env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  body.mobile-type-unified :where(
    .grid,
    .category-grid,
    .promo-grid,
    .vip-grid,
    .game-grid,
    .faq-grid,
    .article-grid,
    .articles-grid,
    .cards-grid,
    .stats-grid,
    .benefits-grid,
    .feature-grid,
    .hero-grid,
    .footer-grid,
    .payment-grid,
    .payments-grid,
    .related-grid,
    .home-recom-grid
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.mobile-type-unified :where(
    .grid,
    .category-grid,
    .promo-grid,
    .vip-grid,
    .game-grid,
    .faq-grid,
    .article-grid,
    .articles-grid,
    .cards-grid,
    .stats-grid,
    .benefits-grid,
    .feature-grid,
    .hero-grid,
    .footer-grid,
    .payment-grid,
    .payments-grid,
    .related-grid,
    .home-recom-grid
  ) > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.mobile-type-unified :where(
    .card,
    .cat-card,
    .seo-card,
    .game-card,
    .promo-card,
    .vip-card,
    .info-card,
    .article-card,
    .guide-card,
    .faq-item,
    .live-table-card,
    .home-recom-card
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.mobile-type-unified :where(h1, h2, h3, h4, h5, h6, p, li, a, button, strong, td, th) {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
  }

  body.mobile-type-unified :where(img, video, canvas) {
    max-width: 100%;
    height: auto;
  }

  body.mobile-type-unified :where(.btn, .btn-primary, .btn-gold, .btn-outline, .btn-action, .btn-cta, .btn-secondary) {
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Homepage casino hub: retain the two-column iPhone design on normal phones. */
  body.mobile-type-unified .category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(0.5rem, 2vw, 0.75rem) !important;
  }

  body.mobile-type-unified .category-grid .cat-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: clamp(0.7rem, 2.4vw, 1rem) !important;
    overflow: hidden !important;
  }

  body.mobile-type-unified .category-grid .cat-icon {
    width: clamp(2.125rem, 9vw, 2.5rem) !important;
    height: clamp(2.125rem, 9vw, 2.5rem) !important;
    margin-bottom: clamp(0.4rem, 1.5vw, 0.65rem) !important;
    font-size: clamp(1.05rem, 4.5vw, 1.3rem) !important;
    flex: 0 0 auto !important;
  }

  body.mobile-type-unified .category-grid .cat-card h3 {
    margin-bottom: clamp(0.3rem, 1.2vw, 0.45rem) !important;
    font-size: clamp(0.84rem, 3.7vw, 1rem) !important;
    line-height: 1.28 !important;
  }

  body.mobile-type-unified .category-grid .cat-card p {
    margin-bottom: clamp(0.55rem, 2vw, 0.8rem) !important;
    font-size: clamp(0.72rem, 3.15vw, 0.82rem) !important;
    line-height: 1.45 !important;
  }

  body.mobile-type-unified .category-grid .cat-link {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    max-width: 100% !important;
    margin-top: auto !important;
    font-size: clamp(0.7rem, 3.05vw, 0.8rem) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
}

/* Ultra-narrow Android and legacy phones need a single readable column. */
@media (max-width: 349px) {
  body.mobile-type-unified .category-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.mobile-type-unified .category-grid .cat-card {
    padding: 0.9rem !important;
  }

  body.mobile-type-unified .category-grid .cat-card h3 {
    font-size: 1rem !important;
  }

  body.mobile-type-unified .category-grid .cat-card p {
    font-size: 0.8125rem !important;
  }

  body.mobile-type-unified .category-grid .cat-link {
    font-size: 0.78rem !important;
  }
}

/* Mobile header: keep the complete navigation and provider strip in one sticky box. */
@media (max-width: 768px) {
  body.mobile-type-unified > header.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    background: rgba(9, 5, 17, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    isolation: isolate;
  }

  body.mobile-type-unified > header.site-header > .nav-wrapper {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    flex: 0 0 64px !important;
  }

  body.mobile-type-unified > header.site-header > .provider-marquee-header {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Keep the sticky shell and its close button visible while the menu is open. */
  body.mobile-type-unified > header.site-header.mobile-nav-active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 10050 !important;
  }

  body.mobile-type-unified > header.site-header.mobile-nav-active .nav-wrapper {
    z-index: 10020 !important;
  }

  body.mobile-type-unified > header.site-header.mobile-nav-active .mobile-menu-btn {
    position: relative !important;
    z-index: 10030 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-type-unified > header.site-header .nav-menu.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Casino ranking logos: restore a contained logo box after the global image safeguard. */
  body.mobile-type-unified .home-recom-card .recom-brand-col {
    display: grid !important;
    grid-template-columns: clamp(2.25rem, 10vw, 2.75rem) minmax(0, 1fr) clamp(2.25rem, 10vw, 2.75rem) !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: clamp(0.35rem, 2vw, 0.75rem) !important;
  }

  body.mobile-type-unified .home-recom-card .recom-rank {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  body.mobile-type-unified .home-recom-card .recom-logo-img {
    grid-column: 2 !important;
    display: block !important;
    justify-self: center !important;
    width: auto !important;
    height: clamp(2.75rem, 13vw, 3.25rem) !important;
    max-width: min(52vw, 9.0625rem) !important;
    max-height: 3.25rem !important;
    margin: 0 auto !important;
    padding: 0.25rem !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.mobile-type-unified .home-recom-card.featured-bybet .recom-brand-col {
    padding-top: clamp(0.2rem, 1vw, 0.4rem) !important;
  }
}