/* Mobile-first refinements shared by Lucky Family storefront and admin. */
@media (max-width: 767px) {
  html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
  body { min-width: 320px; padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  body.admin-page { padding-bottom: 12px; }
  img, video, canvas, iframe { max-width: 100%; }

  /* Compact two-row-safe header; desktop links are replaced by the bottom bar. */
  header.sticky > div.w-full {
    height: auto !important;
    min-height: 62px;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px !important;
  }
  header.sticky > div.w-full > a:first-child { min-width: 0; gap: 9px !important; }
  header.sticky > div.w-full > a:first-child > div:last-child { min-width: 0; }
  header.sticky > div.w-full > a:first-child span.text-2xl { font-size: 18px; line-height: 1.15; }
  header.sticky > div.w-full > a:first-child p { font-size: 9px; }
  #navAuthContainer { gap: 5px !important; }
  #navAuthContainer > button:first-child { display: none !important; }
  #navAuthContainer > a, #navAuthContainer > button { min-height: 40px; padding: 8px 10px !important; font-size: 11px !important; }
  header nav { display: none !important; }
  header:not(.sticky) { padding: 12px 14px !important; }
  header:not(.sticky) > a { gap: 9px !important; }

  main, .max-w-7xl, .max-w-\[1600px\] { max-width: 100% !important; }
  main { padding-left: 14px !important; padding-right: 14px !important; }
  section, article { scroll-margin-top: 78px; }
  h1 { font-size: clamp(1.45rem, 6vw, 2rem) !important; line-height: 1.18 !important; }
  h2 { line-height: 1.25; }

  /* Touch targets and readable form controls. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea { min-height: 46px; font-size: 16px !important; }
  textarea { min-height: 100px; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button:not(.icon-only):not([aria-label]), a.rounded-xl, a.rounded-2xl { touch-action: manipulation; }
  .overflow-x-auto { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }

  /* Store layouts: keep products tappable and prevent cards from becoming cramped. */
  #gamesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  /* The games page groups products into full-width category sections.
     Keep each section on its own row; only the cards inside it use 2 columns. */
  #gamesGrid > section { grid-column: 1 / -1 !important; min-width: 0; }
  .game-card { min-width: 0; border-radius: 16px !important; }
  .game-card:hover { transform: none; }
  .game-card img { max-height: 210px; }
  #newGamesSlider, #recentOrdersFeed { scroll-snap-type: x mandatory; padding-left: 2px; padding-right: 2px; }
  #newGamesSlider > *, #recentOrdersFeed > * { scroll-snap-align: start; }
  .cat-btn { min-height: 42px; }
  .nav-dropdown-menu { display: none !important; }

  /* Dialogs, order summaries, and large tables stay inside the viewport. */
  [role="dialog"], .fixed.inset-0 > .bg-white, .fixed.inset-0 > div.bg-white {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  table { min-width: 620px; }
  .overflow-x-auto table { font-size: 12px; }

  /* Admin navigation becomes a compact two-column launcher above the panel. */
  .max-w-\[1600px\] > aside { width: 100% !important; }
  .max-w-\[1600px\] > aside > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px !important;
  }
  .max-w-\[1600px\] > aside > div:first-child > div { grid-column: 1 / -1; padding: 5px 7px !important; }
  .max-w-\[1600px\] > aside > div:first-child > button {
    min-width: 0;
    min-height: 44px;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    line-height: 1.25;
    text-align: left;
  }
  .max-w-\[1600px\] > aside > div:first-child > button > span { min-width: 0; }
  .max-w-\[1600px\] > aside > div:first-child > button > span:last-child:not(:first-child) { margin-left: auto; }
  .max-w-\[1600px\] > aside > div:nth-child(2) { display: none; }
  .max-w-\[1600px\] { padding: 14px 12px !important; gap: 14px !important; }
  .max-w-\[1600px\] > main { padding: 0 !important; }

  /* The floating promo should not cover the mobile navigation or the chat button. */
  .lf-floating-ad {
    left: 10px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(220px, calc(100vw - 88px)) !important;
    border-radius: 14px !important;
  }
  .lf-floating-ad__image { aspect-ratio: 16 / 9; }
  .lf-floating-ad__close { width: 28px; height: 28px; top: 6px; right: 6px; }

  /* Persistent, thumb-friendly primary navigation. */
  .lf-mobile-nav {
    position: fixed;
    z-index: 45;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dbeafe;
    background: rgba(255,255,255,.97);
    box-shadow: 0 -8px 28px rgba(15,45,80,.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .lf-mobile-nav a {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 12px;
    color: #73849a;
    text-decoration: none;
    font: 600 10px/1.2 system-ui, sans-serif;
  }
  .lf-mobile-nav a i { font-size: 17px; }
  .lf-mobile-nav a[aria-current="page"] { color: #0284c7; background: #eff9ff; }
  .lf-mobile-nav a:active { transform: scale(.96); }
}

@media (min-width: 768px) {
  .lf-mobile-nav { display: none; }
}

@media (max-width: 380px) {
  #navAuthContainer > a { padding-inline: 8px !important; }
  .game-card img { max-height: 170px; }
  .lf-mobile-nav { padding-inline: 4px; }
  .lf-mobile-nav a { font-size: 9px; }
}