/*
  UX Mobile Layer
  ----------------
  This file is intentionally loaded last.
  Edit it when you need mobile/tablet changes without touching the main theme CSS.
*/

/* Mobile layout: prevent horizontal overflow on small screens. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  video,
  table {
    max-width: 100%;
  }
}

/* Mobile header: logo, navigation and CTA buttons stack cleanly. */
@media (max-width: 760px) {
  .topbar,
  .nova-topbar,
  .hd-top,
  .dnv-head,
  .sht-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  .brand,
  .nova-brand,
  .hd-mark,
  .dnv-logo,
  .sht-logo {
    justify-self: start !important;
  }

  .brand img,
  .nova-brand img,
  .hd-mark img,
  .dnv-logo img,
  .sht-logo img {
    width: min(132px, 42vw) !important;
    height: auto !important;
  }

  .topnav,
  .nova-links,
  .hd-nav,
  .dnv-nav,
  .sht-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 2px 0 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar,
  .nova-links::-webkit-scrollbar,
  .hd-nav::-webkit-scrollbar,
  .dnv-nav::-webkit-scrollbar,
  .sht-nav::-webkit-scrollbar {
    display: none;
  }

  .topnav a,
  .nova-links a,
  .hd-nav a,
  .dnv-nav a,
  .sht-nav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .ux-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .ux-action {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: clamp(10px, 3.2vw, 12px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Mobile hero: keep first screen readable, not oversized. */
@media (max-width: 760px) {
  .hero,
  .prime-hero,
  .hd-hero,
  .dnv-hero,
  .sht-hero {
    width: min(100% - 24px, 1280px) !important;
    min-height: auto !important;
    margin-top: 12px !important;
    padding: 30px 18px !important;
    align-items: flex-end !important;
  }

  .hero-copy,
  .prime-copy,
  .hd-hero-copy,
  .dnv-hero-inner,
  .sht-hero-copy {
    max-width: 100% !important;
  }

  .hero h1,
  .prime-copy h1,
  .hd-hero h1,
  .dnv-hero h1,
  .sht-hero h1 {
    max-width: 100% !important;
    margin-bottom: 14px !important;
    font-size: clamp(1.65rem, 7.6vw, 2.35rem) !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  .hero p,
  .prime-copy p,
  .hd-hero p,
  .dnv-hero p,
  .sht-hero p {
    max-width: 100% !important;
    font-size: .94rem !important;
    line-height: 1.55 !important;
  }
}

/* Mobile game cards: two columns on phones, one column on very narrow screens. */
@media (max-width: 760px) {
  .game-grid,
  .game-rail,
  .hd-games,
  .dnv-game-grid,
  .sht-game-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .spin-card,
  .game-card,
  .hd-game-tile,
  .dnv-game,
  .sht-game {
    min-height: 190px !important;
    border-radius: 8px !important;
  }

  .spin-card h3,
  .game-card h3,
  .hd-game-tile h3,
  .dnv-game h3,
  .sht-game h3 {
    font-size: .9rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 430px) {
  .game-grid,
  .game-rail,
  .hd-games,
  .dnv-game-grid,
  .sht-game-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile content: tables scroll, text blocks stay inside viewport. */
@media (max-width: 760px) {
  .clean-article,
  .content-flow,
  .section-grid,
  .hd-split,
  .hd-content-flow,
  .dnv-content,
  .sht-copy-flow,
  .faq-zone,
  .hd-faq-arc {
    width: min(100% - 24px, 1280px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .text-card,
  .section-note,
  .hd-money-card,
  .hd-promo-card,
  .hd-copy-panel,
  .dnv-copy,
  .sht-copy {
    padding: 18px !important;
    overflow-wrap: anywhere !important;
  }

  .data-table,
  .hd-table,
  .dnv-table,
  .sht-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile footer: single-column footer and icon rows. */
@media (max-width: 760px) {
  .footer,
  .site-basement,
  .hd-footer,
  .dnv-footer,
  .sht-footer {
    width: min(100% - 24px, 1280px) !important;
    margin-inline: auto !important;
  }

  .footer-main,
  .footer-strip,
  .site-basement,
  .hd-footer-grid,
  .hd-badge-row,
  .dnv-footer-top,
  .dnv-badges,
  .sht-footer-grid,
  .sht-badges {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .footer-icon-row,
  .hd-badge-row div,
  .dnv-badges div,
  .sht-badges div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}