/* GameMandi — responsive layer.
   The pages are built with desktop-first inline styles. Everything here is
   gated behind a max-width media query, so it can ONLY take effect on
   tablets/phones and can never alter the desktop layout. Overrides use
   !important because they have to beat inline styles. */

@media (max-width: 820px) {

  /* final safety net against sideways scroll from decorative bleed */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* ---- Left rail → scrollable bottom tab bar ---- */
  header[data-screen-label="Rail nav"] {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    padding: 6px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    z-index: 250 !important;
  }
  header[data-screen-label="Rail nav"] > a:first-child img {
    height: 40px !important;
    width: 40px !important;
    margin: 0 !important;
  }
  header[data-screen-label="Rail nav"] a {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 6px 9px !important;
  }

  /* ---- Main content reclaims the rail's space; leave room for the bar ---- */
  main {
    margin-left: 0 !important;
    padding: 18px 14px 92px !important;
  }

  /* ---- Collapse multi-column grids. minmax(0,1fr) (not 1fr) lets the column
         shrink BELOW its content — without this, big headlines / fixed-width
         children force the grid wider than the screen and get clipped. ---- */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-column: span"] { grid-column: auto !important; }
  [style*="grid-row: span"] { grid-row: auto !important; }
  [style*="grid-auto-rows"] { grid-auto-rows: auto !important; }

  /* let TEXT/flex containers shrink, but never the big display numbers/prices
     (shrinking a gradient-clipped number slices off its last digits) */
  main p, main h1, main h2, main h3, aside div { min-width: 0; }

  /* homepage bento: the span-2 hero card spawns a narrow phantom column on
     phones — force a clean single column and stop the spanning */
  [data-screen-label="Game keys"] > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
  }
  [data-screen-label="Game keys"] article {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 156px !important;
  }

  /* ---- Trim the big desktop padding on phones (sections + inner wrappers) ---- */
  main section { padding-left: 14px !important; padding-right: 14px !important; }
  main section > div { padding-left: 14px !important; padding-right: 14px !important; }

  /* ---- Re-centre fixed modals / toasts that nudged right for the rail ---- */
  [style*="calc(50% + 43px)"] { left: 50% !important; }

  /* width-clamped cards/modals/drawers (min(…px, …vw)) must count their own
     padding, or it spills past the screen edge on phones */
  [style*="vw)"] { box-sizing: border-box !important; max-width: 100vw !important; }

  /* media never wider than its box */
  main img, aside img { max-width: 100% !important; }

  /* ---- Hero: it's an absolutely-composed two-column showcase on desktop.
         On phones, collapse it and tame the floating console artwork. ---- */
  [data-screen-label="Hero"] { min-height: auto !important; gap: 18px !important; }
  [data-screen-label="Hero"] > div:last-child { height: clamp(300px, 80vw, 380px) !important; }
  [data-screen-label="Hero"] img { max-width: 80% !important; height: auto !important; }
  /* the dashed spinning ring's animation drops its centering transform and
     bleeds off-screen — it's purely decorative, so hide it on phones */
  [data-screen-label="Hero"] [style*="gm-spin"] { display: none !important; }

  /* ---- Horizontal "media + text" cards (compact rentals, rent rack) cram and
         overlap on phones — stack them vertically. ---- */
  [data-screen-label="Console rentals"] article[style*="align-items: center"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  /* rent rack: keep the compact thumb + text row, but on very narrow phones let
     it wrap rather than squish */
  [data-screen-label="Rental rack"] article { flex-wrap: wrap !important; }
}

@media (max-width: 480px) {
  main { padding-left: 12px !important; padding-right: 12px !important; }
  /* keep big display headlines from spilling on tiny screens */
  h1, h2 { word-break: break-word; overflow-wrap: anywhere; }
}