/* ============================================================
   PHMACAO mobile layer — loaded LAST so it wins over the site's
   own bundles. Below 1024px the fixed left rail becomes a
   slide-in drawer and the content column takes the full width.
   ============================================================ */

/* never let a wide game grid create a horizontal scrollbar */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* burger lives in the header on small screens only */
.phm-burger {
  display: none;
  position: fixed;
  top: 12px;
  left: 10px;
  z-index: 10000;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(249, 187, 34, .45);
  border-radius: 9px;
  background: rgba(13, 12, 10, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0;
  cursor: pointer;
}
.phm-burger svg { width: 21px; height: 21px; color: #f9bb22; display: block; }

.phm-rail-ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

@media (max-width: 1024px) {
  .phm-burger { display: inline-flex; }
  .phm-rail-ov { display: block; }
  body.rail-open .phm-rail-ov { opacity: 1; pointer-events: auto; }

  /* the rail slides in instead of occupying layout space */
  .side-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    width: 250px !important;
    max-width: 82vw;
    overflow-y: auto;
    z-index: 9999 !important;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }
  body.rail-open .side-wrapper { transform: translateX(0); }

  /* content column reclaims the rail's gutter */
  .view-wrapper,
  .view-container,
  .header-container,
  .page-center,
  .home-container,
  .footer-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
  }
  /* their layout shifts the content right with a translateX to clear the
     rail — with the rail off-canvas that gutter must go */
  .home-container,
  .main-content,
  .page-center,
  .footer-container,
  .view-container > * { transform: none !important; }

  /* keep a little breathing room at the page edges */
  .home-container, .footer-container { padding-left: 10px !important; padding-right: 10px !important; }

  /* leave room for the fixed burger */
  .header-container { padding-left: 56px !important; }

  /* horizontal rails (game rows, promo carousels) stay swipeable */
  .home-promo, .home-game, .winner-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* The site's carousels were laid out by JS we intentionally do not ship.
     Turn each swiper into a native scroll-snap rail so every real banner
     stays reachable by swipe instead of being clipped. */
  .swiper-wrapper {
    transform: none !important;
    display: flex !important;
    width: 100% !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .swiper-wrapper::-webkit-scrollbar { display: none; }
  .swiper-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: center;
  }
  .swiper-slide img,
  .home-banner img,
  .home-promo img { width: 100% !important; height: auto !important; object-fit: cover; }

  /* the jackpot odometer is a fixed 700px block — scale it to fit */
  .roll-num { zoom: .5; width: 100% !important; }
}

@media (max-width: 420px) {
  .roll-num { zoom: .42; }
}

@media (min-width: 1025px) {
  .phm-burger, .phm-rail-ov { display: none !important; }
}

/* small phones */
@media (max-width: 560px) {
  .seo-content { padding-left: 12px; padding-right: 12px; }
  .seo-content h1 { font-size: 23px; }
  .seo-content h2 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .side-wrapper, .phm-rail-ov { transition: none !important; }
}