
/* =====================================================
   BRIGHT PREMIUM HOME — CONSOLIDATED STAGE 9/FINAL
   ===================================================== */

/* HOME CLEAN FIX V2 — hanya tampilan Home */
#main-route.home-fixed-v2 { width:100%; box-sizing:border-box; }
#main-route.home-fixed-v2 * { box-sizing:border-box; }
.home-auth-fixed-v2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 16px}
.home-auth-fixed-v2 a{position:relative;z-index:20;pointer-events:auto!important;cursor:pointer;min-height:78px;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(145deg,#F3F0FF,#F8FAFF);border:1px solid rgba(124,58,237,.18);color:#172554!important;text-decoration:none!important}
.home-auth-fixed-v2 .hcf-icon{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(145deg,#6D28D9,#6D28D9);color:#111}
.home-auth-fixed-v2 .hcf-title{font-weight:900;font-size:14px;line-height:1.2}.home-auth-fixed-v2 .hcf-desc{color:#aaa;font-size:10px;line-height:1.35}
.home-promo-fixed-v2{margin:16px 0}.home-promo-fixed-v2 .hpf-title{display:flex;align-items:center;gap:9px;margin:0 0 9px;font-size:17px;font-weight:900}.home-promo-fixed-v2 .hpf-line{height:2px;flex:1;max-width:70px;background:linear-gradient(90deg,#6D28D9,transparent)}
.home-promo-fixed-v2 .hpf-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.home-promo-fixed-v2 .hpf-card{min-height:105px;padding:12px;border-radius:11px;background:linear-gradient(145deg,#F3F0FF,#F8FAFF);border:1px solid rgba(124,58,237,.18)}
.home-promo-fixed-v2 .hpf-badge{display:inline-block;padding:3px 7px;border-radius:999px;background:rgba(124,58,237,.13);color:#6D28D9;font-size:9px;font-weight:900}.home-promo-fixed-v2 .hpf-card strong{display:block;margin:8px 0 4px;font-size:13px;color:#fff}.home-promo-fixed-v2 .hpf-card p{margin:0;color:#aaa;font-size:10px;line-height:1.35}.home-promo-fixed-v2 .hpf-card a{display:inline-block;margin-top:7px;color:#6D28D9!important;text-decoration:none!important;font-size:10px;font-weight:800}
.home-footer-fixed-v2{margin-top:20px;padding:18px 12px;text-align:center;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#F3F0FF,#FFFFFF);border:1px solid rgba(124,58,237,.16)}.home-footer-fixed-v2 .hff-logo{color:#6D28D9;font-weight:900;letter-spacing:1px}.home-footer-fixed-v2 .hff-copy{margin-top:8px;color:#666;font-size:10px}
@media(max-width:768px){#main-route.home-fixed-v2{overflow-x:hidden;padding-bottom:92px}.home-auth-fixed-v2{gap:7px;margin:9px 0 12px}.home-auth-fixed-v2 a{min-height:72px;padding:9px;gap:8px}.home-auth-fixed-v2 .hcf-icon{width:34px;height:34px;flex-basis:34px}.home-auth-fixed-v2 .hcf-title{font-size:13px}.home-auth-fixed-v2 .hcf-desc{font-size:9px}.home-promo-fixed-v2 .hpf-list{grid-template-columns:1fr;gap:7px}.home-promo-fixed-v2 .hpf-card{min-height:0;padding:12px}}



/* FINAL: mobile category strip — 3 wide tiles like the reference */
@media (max-width: 768px){
  #main-route .mobile__category{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    padding:28px 28px 24px !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#EEF2FF !important;
  }
  #main-route .mobile__category > .container{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  #main-route .mobile__category .category-container{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:112px !important;
    width:100% !important;
    max-width:none !important;
    height:112px !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  #main-route .mobile__category .category-container > a{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:112px !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  #main-route .mobile__category .category-container > a:nth-child(n+4){display:none !important}
  #main-route .mobile__category .category-item{
    position:relative !important;
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:112px !important;
    min-height:112px !important;
    padding:0 !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#F7F8FF !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }
  #main-route .mobile__category .category-container > a + a .category-item{
    border-left:3px solid #6D28D9 !important;
  }
  #main-route .mobile__category .category-item .icon{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    overflow:hidden !important;
    z-index:1 !important;
  }
  #main-route .mobile__category .category-item .icon img{
    display:block !important;
    width:115% !important;
    max-width:none !important;
    height:100% !important;
    object-fit:cover !important;
    opacity:.88 !important;
    transform:translateX(10%) !important;
    filter:none !important;
  }
  #main-route .mobile__category .category-container > a:nth-child(2) .category-item .icon img,
  #main-route .mobile__category .category-container > a:nth-child(3) .category-item .icon img{transform:translateX(12%) !important}
  #main-route .mobile__category .category-item .name{
    position:relative !important;
    z-index:3 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 7px !important;
    color:#172554 !important;
    text-shadow:none !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-align:left !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !important;
  }
  #main-route .mobile__category .category-container > a:nth-child(2) .category-item .name{font-size:14px !important}
}



@media(max-width:767.98px){
  .home-auth-fixed-v2 a{
    border-color:rgba(124,58,237,.78)!important;
    background:linear-gradient(145deg,#F7F8FF,#FFFFFF)!important;
    color:#172554!important;
  }
  .home-auth-fixed-v2 .hcf-icon{
    background:linear-gradient(145deg,#6D28D9,#2563EB)!important;
    color:#172554!important;
    box-shadow:0 0 10px rgba(124,58,237,.25)!important;
  }
  .home-promo-fixed-v2 .hpf-line{background:linear-gradient(90deg,#6D28D9,transparent)!important}
  .home-promo-fixed-v2 .hpf-card{border-color:rgba(124,58,237,.65)!important}
  .home-promo-fixed-v2 .hpf-badge{background:rgba(124,58,237,.14)!important;color:#38BDF8!important}
  .home-promo-fixed-v2 .hpf-card a{color:#38BDF8!important}
  .home-footer-fixed-v2{border-color:rgba(124,58,237,.55)!important}
  .home-footer-fixed-v2 .hff-logo{color:#38BDF8!important}
}



@media (max-width:768px){
  /* Header: Daftar + hamburger */
  .header-mobile__top .mobile-button .mobile-button--register{
    background:#FFFFFF!important;
    border:1px solid #6D28D9!important;
    color:#172554!important;
    box-shadow:0 0 8px rgba(124,58,237,.12)!important;
  }
  .header-mobile__top .mobile-button .mobile-button--register span{
    color:#38BDF8!important;
  }
  .header-mobile__top .mobile-button .mobile-button--menu{
    background:linear-gradient(145deg,#EEF2FF,#FFFFFF)!important;
    border:1px solid #6D28D9!important;
    color:#172554!important;
  }
  .header-mobile__top .mobile-button .mobile-button--menu i{
    color:#172554!important;
  }

  /* Marquee strip */
  .header-mobile__marquee{
    background:#FFFFFF!important;
    border-color:#6D28D9!important;
  }
  .header-mobile__marquee i{
    background:#2563EB!important;
    color:#172554!important;
  }
  .header-mobile__marquee .marquee{
    color:#172554!important;
  }

  /* Home Masuk / Daftar cards — exact selectors */
  .home-auth-fixed-v2 a{
    border:1px solid rgba(124,58,237,.82)!important;
    background:linear-gradient(145deg,#F7F8FF,#FFFFFF)!important;
  }
  .home-auth-fixed-v2 .hcf-icon{
    background:linear-gradient(145deg,#6D28D9,#2563EB)!important;
    color:#172554!important;
  }

  /* Category icon SVG/PNG filter: yellow -> #6D28D9 */
  .mobile__category .category-item .icon img{
    filter:brightness(0) saturate(100%) invert(48%) sepia(92%) saturate(3100%) hue-rotate(248deg) brightness(101%) contrast(101%)!important;
  }
}



@media (max-width:768px){
  /* Definitive banner spacing: keep a real gap below the mobile header. */
  #main-route.home-fixed-v2 .main-content.home{
    padding-top:14px !important;
    box-sizing:border-box !important;
  }
  #main-route.home-fixed-v2 .home__slider{
    margin-top:0 !important;
    margin-bottom:16px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  #main-route.home-fixed-v2 .home__slider .main-slider,
  #main-route.home-fixed-v2 .home__slider .swiper-wrapper,
  #main-route.home-fixed-v2 .home__slider .swiper-slide{
    width:100% !important;
    box-sizing:border-box !important;
  }
}



:root{
  --magenta-primary:#6D28D9;
  --magenta-accent:#6D28D9;
  --magenta-deep:#2563EB;
}



.jackpot-modern-magenta{
  width:100%;
  max-width:100%;
  display:block;
  height:auto;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 0 22px rgba(124,58,237,.20);
}



@media (max-width:768px){
  .mobile__category{
    padding:10px 8px 14px!important;
    background:linear-gradient(180deg,#EEF2FF 0%,#EEF2FF 48%,#F6F4FF 100%)!important;
    border-top:1px solid rgba(124,58,237,.38)!important;
    border-bottom:1px solid rgba(37,99,235,.45)!important;
  }

  .mobile__category .category-container{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px 10px!important;
    padding:7px 4px 9px!important;
  }

  .mobile__category .category-container>a{
    display:block!important;
    min-width:0!important;
    text-decoration:none!important;
    perspective:700px!important;
  }

  .mobile__category .category-item{
    position:relative!important;
    min-height:91px!important;
    height:91px!important;
    padding:9px 3px 8px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 0%,rgba(124,58,237,.13),transparent 55%),
      linear-gradient(145deg,#E5E7EB 0%,#F7F8FF 52%,#F7F8FF 100%)!important;
    border:1.5px solid #6D28D9!important;
    border-radius:18px!important;
    box-shadow:
      0 9px 0 rgba(109,40,217,.18),
      0 13px 22px rgba(30,41,59,.10),
      0 0 16px rgba(124,58,237,.18),
      inset 0 1px 0 rgba(255,255,255,.12)!important;
    transform:translateY(0)!important;
    transition:transform .16s ease,box-shadow .16s ease!important;
  }

  .mobile__category .category-item:before{
    content:""!important;
    position:absolute!important;
    left:10px!important;
    right:10px!important;
    top:6px!important;
    height:2px!important;
    border-radius:99px!important;
    background:linear-gradient(90deg,transparent,#6D28D9,transparent)!important;
    opacity:.7!important;
  }

  .mobile__category .category-item:after{
    content:""!important;
    position:absolute!important;
    width:72px!important;
    height:72px!important;
    top:-32px!important;
    right:-30px!important;
    border-radius:50%!important;
    background:rgba(37,99,235,.16)!important;
    filter:blur(2px)!important;
  }

  .mobile__category .category-item .icon{
    width:45px!important;
    height:45px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    position:relative!important;
    z-index:2!important;
    filter:drop-shadow(0 4px 5px rgba(30,41,59,.10))!important;
  }

  .mobile__category .category-item .icon img{
    width:39px!important;
    height:39px!important;
    object-fit:contain!important;
    filter:brightness(0) saturate(100%) invert(43%) sepia(86%) saturate(2700%) hue-rotate(248deg) brightness(91%) contrast(97%)!important;
  }

  .mobile__category .category-item .name{
    position:relative!important;
    z-index:2!important;
    color:#172554!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.15px!important;
    text-align:center!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    text-shadow:0 2px 3px #000!important;
  }

  .mobile__category .category-container>a:active .category-item{
    transform:translateY(5px)!important;
    box-shadow:
      0 4px 0 rgba(109,40,217,.18),
      0 7px 13px rgba(30,41,59,.08),
      0 0 14px rgba(124,58,237,.16),
      inset 0 1px 0 rgba(255,255,255,.10)!important;
  }
}



@media (max-width:768px){
  .mobile__popular{
    position:relative!important;
    margin:10px 10px 0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(124,58,237,.55)!important;
    border-radius:16px!important;
    background:
      radial-gradient(circle at 18% 50%,rgba(124,58,237,.22),transparent 27%),
      radial-gradient(circle at 82% 50%,rgba(37,99,235,.22),transparent 30%),
      linear-gradient(135deg,#F5F7FF 0%,#E5E7EB 48%,#F5F7FF 100%)!important;
    box-shadow:
      0 8px 18px rgba(30,41,59,.08),
      0 0 18px rgba(124,58,237,.12),
      inset 0 1px 0 rgba(255,255,255,.10)!important;
  }

  .mobile__popular:before{
    content:""!important;
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    top:0!important;
    height:2px!important;
    background:linear-gradient(90deg,transparent,#2563EB,#6D28D9,#2563EB,transparent)!important;
    box-shadow:0 0 8px rgba(124,58,237,.5)!important;
  }

  .mobile__popular:after{
    content:""!important;
    position:absolute!important;
    width:120px!important;
    height:120px!important;
    right:-55px!important;
    top:-65px!important;
    border-radius:50%!important;
    background:rgba(37,99,235,.18)!important;
    filter:blur(5px)!important;
  }

  .mobile__popular .container{
    padding:0!important;
  }

  .mobile__popular .popular-title{
    position:relative!important;
    z-index:2!important;
    min-height:58px!important;
    padding:10px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    color:#172554!important;
    font-size:18px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.2px!important;
    text-shadow:0 2px 5px rgba(30,41,59,.14)!important;
  }

  .mobile__popular .popular-title i{
    width:34px!important;
    height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:11px!important;
    color:#172554!important;
    background:linear-gradient(135deg,#6D28D9,#2563EB)!important;
    box-shadow:0 5px 12px rgba(37,99,235,.35),0 0 12px rgba(124,58,237,.22)!important;
    font-size:16px!important;
  }

  .mobile__popular .popular-title span{
    position:relative!important;
  }

  .mobile__popular .popular-title span:after{
    content:""!important;
    display:block!important;
    width:58px!important;
    height:2px!important;
    margin:7px auto 0!important;
    border-radius:99px!important;
    background:linear-gradient(90deg,#6D28D9,#2563EB)!important;
    box-shadow:0 0 7px rgba(124,58,237,.35)!important;
  }
}



@media (max-width:768px){
  /* Susunan referensi: 4 kartu di atas, 3 kartu di bawah dan baris bawah benar-benar di tengah. */
  .mobile__category .category-container{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:flex-start!important;
    gap:18px 10px!important;
  }
  .mobile__category .category-container>a{
    flex:0 0 calc(25% - 8px)!important;
    width:calc(25% - 8px)!important;
    max-width:calc(25% - 8px)!important;
    transform:none!important;
  }
  .mobile__category .category-container>a:nth-child(5),
  .mobile__category .category-container>a:nth-child(6),
  .mobile__category .category-container>a:nth-child(7){
    transform:none!important;
  }
  .mobile__category .category-container>a:nth-child(5) .category-item,
  .mobile__category .category-container>a:nth-child(6) .category-item,
  .mobile__category .category-container>a:nth-child(7) .category-item{
    box-shadow:
      0 9px 0 rgba(109,40,217,.18),
      0 13px 22px rgba(30,41,59,.10),
      0 0 18px rgba(124,58,237,.22),
      inset 0 1px 0 rgba(255,255,255,.12)!important;
  }
  .mobile__category .category-container>a:active .category-item{
    transform:translateY(4px)!important;
  }
}



@media (max-width:768px){
  .mobile__category{width:100%!important;overflow:visible!important;box-sizing:border-box!important;}
  .mobile__category .container{width:100%!important;max-width:none!important;padding:0 8px!important;margin:0!important;box-sizing:border-box!important;}
  .mobile__category .category-container{
    width:100%!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:flex-start!important;
    gap:12px 8px!important;padding:8px 0 12px!important;margin:0!important;box-sizing:border-box!important;
  }
  .mobile__category .category-container>a{
    flex:0 0 calc((100% - 24px)/4)!important;width:calc((100% - 24px)/4)!important;max-width:calc((100% - 24px)/4)!important;
    min-width:0!important;margin:0!important;padding:0!important;display:block!important;box-sizing:border-box!important;
    grid-column:auto!important;grid-row:auto!important;
  }
  .mobile__category .category-item{
    width:100%!important;min-width:0!important;height:92px!important;min-height:92px!important;max-height:92px!important;
    margin:0!important;padding:8px 3px!important;box-sizing:border-box!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;
    overflow:hidden!important;
  }
  .mobile__category .category-item .name{font-size:9px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
}



@media (max-width:768px){
#main-route .mobile__category .category-container>a .category-item{
 position:relative!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-end!important;
 height:112px!important; min-height:112px!important; max-height:112px!important; padding:0 3px 8px!important; margin:0!important; gap:0!important; overflow:hidden!important; box-sizing:border-box!important;
}
#main-route .mobile__category .category-container>a .category-item .icon{
 position:absolute!important; top:8px!important; left:0!important; right:0!important; bottom:27px!important; width:100%!important; height:auto!important; margin:0!important; padding:0!important;
 display:flex!important; align-items:center!important; justify-content:center!important; z-index:1!important; overflow:hidden!important;
}
#main-route .mobile__category .category-container>a .category-item .icon img{
 display:block!important; width:58px!important; height:58px!important; max-width:58px!important; max-height:58px!important; min-width:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; opacity:1!important; filter:none!important;
}
#main-route .mobile__category .category-container>a .category-item .name{
 position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; transform:none!important; z-index:5!important;
 width:100%!important; height:22px!important; min-height:22px!important; max-height:22px!important; margin:0!important; padding:0!important;
 display:flex!important; align-items:center!important; justify-content:center!important; color:#172554!important; font-size:13px!important; line-height:22px!important; font-weight:900!important; text-align:center!important; text-transform:uppercase!important;
 white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; text-shadow:none!important; box-sizing:border-box!important;
}
#main-route .mobile__category .category-container>a:nth-child(2) .category-item .name{font-size:12px!important;}
}



/* BANNER ONLY — no header/card/navbar changes */
@media (max-width:767.98px){
  #main-route.home-fixed-v2 .home__slider{
    width:calc(100% - 20px)!important;
    margin:12px 10px 20px!important;
    padding:0 0 22px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    position:relative!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
    background:#F5F7FF!important;
  }

  #main-route.home-fixed-v2 .home__slider .main-slider,
  #main-route.home-fixed-v2 .home__slider .swiper-container{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
    background:#F5F7FF!important;
  }

  #main-route.home-fixed-v2 .home__slider .swiper-wrapper{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:stretch!important;
    box-sizing:border-box!important;
  }

  #main-route.home-fixed-v2 .home__slider .swiper-slide{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    flex:0 0 100%!important;
    display:flex!important;
    align-items:stretch!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    line-height:0!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
  }

  #main-route.home-fixed-v2 .home__slider .swiper-slide>a{
    display:block!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    line-height:0!important;
    box-sizing:border-box!important;
  }

  #main-route.home-fixed-v2 .home__slider .swiper-slide img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
  }

  #main-route.home-fixed-v2 .home__slider .swiper-pagination{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:22px!important;
    min-height:22px!important;
    max-height:22px!important;
    margin:0!important;
    padding:5px 0 3px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:0!important;
    box-sizing:border-box!important;
    z-index:8!important;
  }

  #main-route.home-fixed-v2 .home__slider .swiper-pagination-bullet{
    width:5px!important;
    height:5px!important;
    min-width:5px!important;
    min-height:5px!important;
    margin:0 4px!important;
  }

  #main-route.home-fixed-v2 .home__slider .swiper-button-next,
  #main-route.home-fixed-v2 .home__slider .swiper-button-prev{
    top:50%!important;
    margin-top:-18px!important;
    z-index:9!important;
  }

  @media (max-width:380px){
    #main-route.home-fixed-v2 .home__slider{
      width:calc(100% - 16px)!important;
      margin-left:8px!important;
      margin-right:8px!important;
      margin-bottom:18px!important;
    }
  }
}



@media (max-width:768px){
  /* Keep every existing link/function intact; only restyle the first 3 tiles. */
  #main-route.home-fixed-v2 .mobile__category{
    padding:18px 10px 20px!important;
    margin:0!important;
    background:linear-gradient(180deg,#EEF2FF 0%,#F1F5FF 100%)!important;
    border-top:1px solid rgba(124,58,237,.18)!important;
    border-bottom:1px solid rgba(124,58,237,.12)!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    height:126px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a{
    display:block!important;
    height:126px!important;
    min-width:0!important;
    text-decoration:none!important;
    perspective:700px!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(n+4){
    display:none!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:126px!important;
    min-height:126px!important;
    padding:10px 5px 9px!important;
    margin:0!important;
    overflow:hidden!important;
    border:1px solid rgba(124,58,237,.42)!important;
    border-radius:12px!important;
    background:
      radial-gradient(circle at 50% 8%,rgba(124,58,237,.13),transparent 48%),
      linear-gradient(145deg,#EEF2FF 0%,#F7F8FF 72%,#F7F8FF 100%)!important;
    box-shadow:
      0 5px 12px rgba(30,41,59,.08),
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 12px rgba(124,58,237,.08)!important;
    transform:none!important;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item:before{
    content:""!important;
    position:absolute!important;
    top:7px!important;
    left:18%!important;
    right:18%!important;
    height:2px!important;
    border-radius:99px!important;
    background:linear-gradient(90deg,transparent,#6D28D9,transparent)!important;
    opacity:.75!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item:after{
    content:""!important;
    position:absolute!important;
    width:70px!important;
    height:70px!important;
    top:-38px!important;
    right:-30px!important;
    border-radius:50%!important;
    background:rgba(37,99,235,.18)!important;
    filter:blur(5px)!important;
    pointer-events:none!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item .icon{
    position:relative!important;
    inset:auto!important;
    z-index:2!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:58px!important;
    height:58px!important;
    margin:0 0 10px!important;
    padding:0!important;
    overflow:visible!important;
    filter:none!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item .icon img{
    display:block!important;
    width:48px!important;
    height:48px!important;
    max-width:48px!important;
    object-fit:contain!important;
    opacity:1!important;
    transform:none!important;
    filter:brightness(0) saturate(100%) invert(43%) sepia(86%) saturate(2700%) hue-rotate(248deg) brightness(91%) contrast(97%) drop-shadow(0 0 7px rgba(124,58,237,.20))!important;
  }

  /* Different neon accents without changing the underlying assets. */
  #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(2) .category-item{
    border-color:rgba(124,58,237,.52)!important;
    background:
      radial-gradient(circle at 50% 8%,rgba(124,58,237,.12),transparent 48%),
      linear-gradient(145deg,#EEF2FF 0%,#FFFFFF 72%,#F8FAFF 100%)!important;
  }
  #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(2) .category-item:before{
    background:linear-gradient(90deg,transparent,#38BDF8,transparent)!important;
  }
  #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(2) .category-item .icon img{
    filter:brightness(0) saturate(100%) invert(69%) sepia(76%) saturate(2200%) hue-rotate(244deg) brightness(105%) contrast(103%) drop-shadow(0 0 7px rgba(56,189,248,.24))!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(3) .category-item{
    border-color:rgba(56,189,248,.42)!important;
    background:
      radial-gradient(circle at 50% 8%,rgba(14,165,233,.15),transparent 48%),
      linear-gradient(145deg,#EEF2FF 0%,#F7F8FF 72%,#F7F8FF 100%)!important;
  }
  #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(3) .category-item:before{
    background:linear-gradient(90deg,transparent,#38bdf8,transparent)!important;
  }
  #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(3) .category-item .icon img{
    filter:brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(1700%) hue-rotate(166deg) brightness(105%) contrast(102%) drop-shadow(0 0 7px rgba(56,189,248,.30))!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item .name{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0 2px!important;
    color:#172554!important;
    font-size:11px!important;
    line-height:1.05!important;
    font-weight:900!important;
    letter-spacing:.25px!important;
    text-align:center!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-shadow:none!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(2) .category-item .name{
    font-size:10px!important;
  }

  #main-route.home-fixed-v2 .mobile__category .category-container>a:active .category-item{
    transform:translateY(1px) scale(.985)!important;
    box-shadow:0 3px 8px rgba(30,41,59,.08),0 0 15px rgba(124,58,237,.14)!important;
  }
}


/* FINAL HOME VISUAL SYSTEM — desktop + mobile */
html body #main-route.home-fixed-v2,
html body #main-route.home-fixed-v2 .main-content.home{background:#F7F8FF!important;color:#172554!important;}

@media (max-width:768px){
  html body #main-route.home-fixed-v2 .header-mobile__top{min-height:64px!important;padding:7px 10px!important;}
  html body #main-route.home-fixed-v2 .header-mobile__top .mobile-logo{width:120px!important;}
  html body #main-route.home-fixed-v2 .header-mobile__top .mobile-logo img{width:100px!important;max-width:100px!important;}
  html body #main-route.home-fixed-v2 .header-mobile__top .mobile-button{gap:6px!important;}
  html body #main-route.home-fixed-v2 .header-mobile__top .mobile-button .mobile-button--transaksi,
  html body #main-route.home-fixed-v2 .header-mobile__top .mobile-button .mobile-button--register{
    height:44px!important;min-height:44px!important;border-radius:12px!important;padding:7px 12px!important;
    background:#FFFFFF!important;color:#6D28D9!important;border:1px solid rgba(255,255,255,.92)!important;
    box-shadow:0 5px 14px rgba(30,41,99,.12)!important;
  }
  html body #main-route.home-fixed-v2 .header-mobile__top .mobile-button .mobile-button--transaksi span,
  html body #main-route.home-fixed-v2 .header-mobile__top .mobile-button .mobile-button--register span{color:#6D28D9!important;-webkit-text-fill-color:#6D28D9!important;}
  html body #main-route.home-fixed-v2 .header-mobile__marquee{height:42px!important;background:#FFFFFF!important;border:0!important;border-top:1px solid #E0E7FF!important;border-bottom:1px solid #D9D6FE!important;}
  html body #main-route.home-fixed-v2 .header-mobile__marquee i{height:42px!important;background:linear-gradient(135deg,#6D28D9,#2563EB)!important;color:#FFFFFF!important;display:flex!important;align-items:center!important;padding:0 12px!important;}
  html body #main-route.home-fixed-v2 .header-mobile__marquee .marquee{color:#172554!important;-webkit-text-fill-color:#172554!important;font-weight:800!important;}

  /* Banner */
  html body #main-route.home-fixed-v2 .home__slider{width:calc(100% - 28px)!important;margin:16px 14px 20px!important;border:1px solid #C7D2FE!important;border-radius:16px!important;background:#FFFFFF!important;box-shadow:0 8px 24px rgba(37,99,235,.08)!important;}
  html body #main-route.home-fixed-v2 .home__slider .swiper-slide img{border-radius:15px!important;}

  /* Category: three clean tiles */
  html body #main-route.home-fixed-v2 .mobile__category{padding:18px 18px 20px!important;background:#F7F8FF!important;border-top:1px solid #E0E7FF!important;border-bottom:1px solid #E0E7FF!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;height:auto!important;padding:0!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a{height:126px!important;max-width:none!important;flex:none!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(n+4){display:none!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item{height:126px!important;min-height:126px!important;border:1px solid #C7D2FE!important;border-radius:16px!important;background:linear-gradient(145deg,#FFFFFF 0%,#F1F5FF 100%)!important;box-shadow:0 8px 20px rgba(37,99,235,.09)!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item:before{background:linear-gradient(90deg,transparent,#7C3AED,transparent)!important;opacity:.65!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item:after{background:rgba(37,99,235,.08)!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item .icon{height:62px!important;bottom:35px!important;top:8px!important;filter:none!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item .icon img{width:50px!important;height:50px!important;max-width:50px!important;max-height:50px!important;filter:none!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a .category-item .name{color:#172554!important;-webkit-text-fill-color:#172554!important;text-shadow:none!important;font-size:12px!important;font-weight:900!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(1) .category-item .icon img{filter:brightness(0) saturate(100%) invert(25%) sepia(71%) saturate(3334%) hue-rotate(255deg) brightness(88%) contrast(101%)!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(2) .category-item .icon img{filter:brightness(0) saturate(100%) invert(42%) sepia(88%) saturate(2538%) hue-rotate(215deg) brightness(91%) contrast(96%)!important;}
  html body #main-route.home-fixed-v2 .mobile__category .category-container>a:nth-child(3) .category-item .icon img{filter:brightness(0) saturate(100%) invert(50%) sepia(88%) saturate(1305%) hue-rotate(158deg) brightness(94%) contrast(94%)!important;}

  /* Popular section */
  html body #main-route.home-fixed-v2 .mobile__popular{padding:18px 20px 10px!important;background:#F7F8FF!important;border-top:1px solid #E0E7FF!important;}
  html body #main-route.home-fixed-v2 .mobile__popular .popular-title{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin:0 auto 14px!important;padding:12px 16px!important;max-width:100%!important;border:1px solid #C7D2FE!important;border-radius:16px!important;background:linear-gradient(145deg,#FFFFFF,#EEF2FF)!important;box-shadow:0 8px 20px rgba(37,99,235,.08)!important;}
  html body #main-route.home-fixed-v2 .mobile__popular .popular-title i{color:#6D28D9!important;background:linear-gradient(135deg,#6D28D9,#2563EB)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;font-size:25px!important;}
  html body #main-route.home-fixed-v2 .mobile__popular .popular-title span{color:#6D28D9!important;-webkit-text-fill-color:#6D28D9!important;font-size:20px!important;font-weight:900!important;text-shadow:none!important;}
  html body #main-route.home-fixed-v2 .mobile__popular .popular-title span:after{background:#6D28D9!important;box-shadow:none!important;height:3px!important;}

  /* Popular games */
  html body #main-route.home-fixed-v2 .mobile__games{padding:0 20px 28px!important;background:#F7F8FF!important;}
  html body #main-route.home-fixed-v2 .mobile__games .games-list{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  html body #main-route.home-fixed-v2 .mobile__games .games-holder{background:#FFFFFF!important;border:1px solid #C7D2FE!important;border-radius:16px!important;overflow:hidden!important;box-shadow:0 7px 18px rgba(37,99,235,.08)!important;}
  html body #main-route.home-fixed-v2 .mobile__games .games-img{background:#EEF2FF!important;aspect-ratio:16/7!important;overflow:hidden!important;}
  html body #main-route.home-fixed-v2 .mobile__games .games-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
  html body #main-route.home-fixed-v2 .mobile__games .games-name{padding:11px 12px 13px!important;background:#FFFFFF!important;color:#172554!important;-webkit-text-fill-color:#172554!important;font-size:15px!important;line-height:1.25!important;font-weight:800!important;text-align:center!important;text-shadow:none!important;}

  /* Floating chat: don't cover the game title */
  html body #main-route.home-fixed-v2 #liveChatFloating{right:14px!important;bottom:78px!important;width:58px!important;height:58px!important;}
}

@media (min-width:769px){
  #main-route.home-fixed-v2 .mobile__popular,
  #main-route.home-fixed-v2 .mobile__games{max-width:1200px!important;margin-left:auto!important;margin-right:auto!important;}
}


/* FINAL AUDIT — homepage contrast, spacing and active palette */
@media(max-width:768px){
  #main-route.home-fixed-v2 .home-auth-fixed-v2 a{color:#172554!important;-webkit-text-fill-color:#172554!important;}
  #main-route.home-fixed-v2 .home-auth-fixed-v2 .hcf-title{color:#172554!important;-webkit-text-fill-color:#172554!important;}
  #main-route.home-fixed-v2 .home-auth-fixed-v2 .hcf-desc{color:#64748B!important;-webkit-text-fill-color:#64748B!important;}
  #main-route.home-fixed-v2 .home-auth-fixed-v2 .hcf-icon{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;}
  #main-route.home-fixed-v2 .home-promo-fixed-v2 .hpf-card strong{color:#172554!important;-webkit-text-fill-color:#172554!important;}
  #main-route.home-fixed-v2 .home-promo-fixed-v2 .hpf-card p{color:#64748B!important;-webkit-text-fill-color:#64748B!important;}
  #main-route.home-fixed-v2 .home-promo-fixed-v2 .hpf-card a{color:#2563EB!important;-webkit-text-fill-color:#2563EB!important;}
  #main-route.home-fixed-v2 .mobile__category .category-item .name{color:#172554!important;-webkit-text-fill-color:#172554!important;text-shadow:none!important;}
  #main-route.home-fixed-v2 .mobile__games .games-name{color:#172554!important;-webkit-text-fill-color:#172554!important;}
  #main-route.home-fixed-v2 .games-button .btn-custom-sm{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;}
}

/* GAME POPULER — COMPACT 3-COLUMN LAYOUT (REFERENCE STYLE) */
@media (max-width: 768px){
  html body #main-route.home-fixed-v2 .mobile__games{
    padding:0 18px 24px!important;
    background:#F7F8FF!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .container{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-list{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:start!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-holder{
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    background:#FFFFFF!important;
    border:1px solid #C7D2FE!important;
    border-radius:12px!important;
    overflow:hidden!important;
    box-shadow:0 5px 14px rgba(37,99,235,.08)!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-holder:active{
    transform:scale(.985)!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1.55/1!important;
    min-height:0!important;
    background:#EEF2FF!important;
    overflow:hidden!important;
    border:0!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-img img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-name{
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:7px 4px 8px!important;
    background:#FFFFFF!important;
    color:#172554!important;
    -webkit-text-fill-color:#172554!important;
    font-size:11px!important;
    line-height:1.2!important;
    font-weight:800!important;
    text-align:center!important;
    text-shadow:none!important;
    word-break:normal!important;
    overflow:hidden!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-button{
    margin:14px 0 0!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-button .btn-custom-sm{
    min-height:36px!important;
    padding:8px 16px!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,#6D28D9,#2563EB)!important;
    color:#FFFFFF!important;
    -webkit-text-fill-color:#FFFFFF!important;
    box-shadow:0 6px 14px rgba(37,99,235,.16)!important;
  }
  html body #main-route.home-fixed-v2 .mobile__popular{
    padding:16px 18px 10px!important;
  }
  html body #main-route.home-fixed-v2 .mobile__popular .popular-title{
    margin-bottom:12px!important;
    padding:10px 14px!important;
    border-radius:14px!important;
  }
  html body #main-route.home-fixed-v2 .mobile__popular .popular-title span{
    font-size:18px!important;
  }
  html body #main-route.home-fixed-v2 .mobile__popular .popular-title i{
    font-size:23px!important;
  }
  html body #main-route.home-fixed-v2 #liveChatFloating{
    right:12px!important;
    bottom:76px!important;
    width:58px!important;
    height:58px!important;
  }
}

@media (max-width:340px){
  html body #main-route.home-fixed-v2 .mobile__games{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-list{gap:7px!important;}
  html body #main-route.home-fixed-v2 .mobile__games .games-name{font-size:10px!important;}
}

/* =========================================================
   GAME POPULER V2 — AUTHORITATIVE 3-COLUMN MOBILE GRID
   ========================================================= */
@media (max-width: 768px){
  html body #main-route.home-fixed-v2 .mobile__games .popular-games-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    align-items:start !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder{
    display:flex !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-img{
    display:block !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1.55 / 1 !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-img img{
    display:block !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-name{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    height:38px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:6px 3px !important;
    background:#fff !important;
    color:#172554 !important;
    -webkit-text-fill-color:#172554 !important;
    font-size:11px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}
@media (max-width:380px){
  html body #main-route.home-fixed-v2 .mobile__games .popular-games-grid{gap:7px !important;}
  html body #main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-name{font-size:10px !important;}
}



/* =========================================================
   GAME POPULER — FORCED FINAL LAYOUT
   Targets the actual .games-holder markup in home.php.
   ========================================================= */
@media (max-width: 767.98px){
  html body #main-route.home-fixed-v2 .mobile__games,
  html body #main-route.home-fixed-v2 .mobile__games > .container{
    background:#F7F8FF !important;
    color:#172554 !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-list.popular-games-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-list.popular-games-grid > .games-holder{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    background:#FFFFFF !important;
    border:1px solid #C7D2FE !important;
    border-radius:13px !important;
    box-shadow:0 5px 14px rgba(37,99,235,.09) !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-list.popular-games-grid > .games-holder > .games-img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1.45 / 1 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:#EEF2FF !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-list.popular-games-grid > .games-holder > .games-img > img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    min-height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
    padding:0 !important;
    margin:0 !important;
  }
  html body #main-route.home-fixed-v2 .mobile__games .games-list.popular-games-grid > .games-holder > .games-name{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:38px !important;
    height:38px !important;
    padding:5px 3px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    background:#FFFFFF !important;
    color:#172554 !important;
    -webkit-text-fill-color:#172554 !important;
    text-shadow:none !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* =========================================================
   GAME POPULER — REFERENCE LAYOUT (AUTHORITATIVE)
   Only affects the popular-games section on home.
   ========================================================= */
#main-route.home-fixed-v2 .mobile__games .popular-games-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  align-items:start !important;
}
#main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder{
  display:flex !important;
  flex-direction:column !important;
  flex:0 0 auto !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#fff !important;
  border:1px solid #d7ddf4 !important;
  border-radius:14px !important;
  box-shadow:0 5px 14px rgba(37,99,235,.09) !important;
}
#main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1.48 / 1 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  background:#eef2ff !important;
  box-sizing:border-box !important;
}
#main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  object-position:center !important;
}
#main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-name{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:5px 4px !important;
  box-sizing:border-box !important;
  background:#fff !important;
  color:#172554 !important;
  -webkit-text-fill-color:#172554 !important;
  text-shadow:none !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#main-route.home-fixed-v2 .mobile__games .games-button{
  display:block !important;
  width:100% !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  text-align:center !important;
}
#main-route.home-fixed-v2 .mobile__games .games-button .btn-custom-sm{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:150px !important;
  min-height:40px !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#6d28d9,#2563eb) !important;
  border:1px solid #6d28d9 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:0 5px 14px rgba(109,40,217,.18) !important;
}
#main-route.home-fixed-v2 .mobile__games .games-button .btn-custom-sm i{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
@media (min-width:769px){
  #main-route.home-fixed-v2 .mobile__games .popular-games-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  #main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-name{
    font-size:13px !important;
  }
}
@media (max-width:380px){
  #main-route.home-fixed-v2 .mobile__games .popular-games-grid{gap:7px !important;}
  #main-route.home-fixed-v2 .mobile__games .popular-games-grid > .games-holder > .games-name{font-size:10px !important;}
}
/* ========================================================= */
