/* 8win.games homepage: additions on top of the two original 8winmsia.com stylesheets
   (desk.css and mob.css are the untouched originals; only one applies at a time). */

/* ---- layout switch: keep in sync with the media="" on the two <link> tags ---- */
@media (min-width: 1200px) { #L-mob { display: none !important; } }
@media (max-width: 1199.98px) { #L-desk { display: none !important; } }

/* ---- desktop: sidebar collapse (the original sets this inline from its JS) ---- */
#L-desk .side-bar-components.sidebar-hidden .left-bar { translate: -100% 0; }

/* ---- desktop: the original content column is a fixed 1110px and overflows below ~1390px wide ---- */
@media (min-width: 1200px) and (max-width: 1389.98px) {
  html:root { --container-width: calc(100vw - 288px); }
}

/* ---- tablets get the mobile layout: cap its scaling at phone width and centre it ---- */
@media (min-width: 481px) and (max-width: 1199.98px) {
  html { font-size: 64px !important; }            /* 7.5rem = 480px column */
  body { background: #111; }
  #L-mob { max-width: 480px; margin: 0 auto; position: relative; min-height: 100vh; }
  #L-mob .footer-menu, #L-mob .download-bar, #L-mob .header-content {
    left: 50% !important; right: auto !important; width: 480px !important; transform: translateX(-50%);
  }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- links we added in place of the original clickable divs ---- */
a.nav-link { color: inherit; text-decoration: none; }
[data-href], [data-link] { cursor: pointer; }

/* ---- banners: one slide = full width, we drive the transform ---- */
#L-desk .page-banner .swiper-slide,
#L-mob .home-banner .swiper-slide { width: 100% !important; flex-shrink: 0; }
#L-desk .page-banner .swiper-wrapper { transition: transform 1000ms ease; }
#L-mob .home-banner .swiper-wrapper { transition: transform 400ms ease; }
#L-mob .home-banner, #L-desk .page-banner { touch-action: pan-y; }

/* ---- provider rows: native horizontal scroll (arrows on desktop, swipe on mobile) ---- */
.hscroll { overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > .swiper-wrapper { transform: none !important; }

/* ---- winners strips: continuous marquee driven by JS ---- */
.winners-track { will-change: transform; transition: none !important; }

/* ---- mobile slide-out menu (the original site renders this only on open) ---- */
.m-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s; }
.m-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 78%; max-width: 330px; z-index: 9999; background: #1b1b1b; padding: 14px 12px 24px; overflow-y: auto;
  transform: translateX(-102%); transition: transform .28s ease; font-family: Montserrat, sans-serif; box-shadow: 4px 0 24px rgba(0,0,0,.5); }
body.drawer-open .m-drawer { transform: translateX(0); }
body.drawer-open .m-drawer-backdrop { opacity: 1; pointer-events: auto; }
body.drawer-open { overflow: hidden; }
.m-drawer-top { display: flex; align-items: center; gap: 12px; margin: 2px 4px 16px; }
.m-drawer-x { width: 34px; height: 30px; display: flex; flex-direction: column; justify-content: space-between; background: none; border: 0; padding: 4px 2px; cursor: pointer; }
.m-drawer-x span { display: block; height: 3px; border-radius: 3px; background: #f5b82e; }
.m-drawer-x span:nth-child(2) { width: 80%; }
.m-drawer-logo img { height: 40px; width: auto; display: block; }
.m-card { display: flex; align-items: center; gap: 14px; height: 58px; margin-bottom: 9px; padding: 0 16px; border-radius: 12px; text-decoration: none;
  color: #fff; font-weight: 800; font-size: 18px; border: 1px solid #3a3a3a;
  background: linear-gradient(115deg, #2b2b2b 0%, #3a3a3a 45%, #262626 46%, #303030 100%); }
.m-card--gold { color: #2a2112; border-color: #e3a51f; background: linear-gradient(115deg, #f5b82e 0%, #ffc94d 55%, #f0ae22 100%); }
.m-card i, .m-list i { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; flex-shrink: 0; }
.m-card i img, .m-list i img { width: 28px; height: 28px; }

/* sidebar / menu icons (captured from the original 8winmsia sidebar) */
.nav-icon { display: block; width: 20px; height: 20px; object-fit: contain; }
#L-desk .side-game-icon .nav-icon, #L-desk .select-item-icon .nav-icon { width: 100%; height: 100%; }
.m-list { margin-top: 4px; background: #262626; border-radius: 12px; padding: 4px 0; }
.m-list a { display: flex; align-items: center; gap: 14px; padding: 13px 16px; color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; }