/* ===== Responsive overrides (loaded last) ===== */
*,*:before,*:after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%}

/* ---- Banner slider: always 100% width ---- */
.banner{width:100%;max-width:100%;overflow:hidden;position:relative}
.banner #banner_carousel,
.banner .slick-list{width:100%;max-width:100%}
.banner #banner_carousel>a,
.banner .slick-slide{display:block}
.banner .slick-slide img,
.banner #banner_carousel>a img{display:block;width:100%;height:auto;max-width:100%;object-fit:fill}
.banner #banner_carousel:not(.slick-initialized)>a:not(:first-child){display:none}
.banner .carousel-indicators{position:absolute;left:0;right:0;bottom:10px;width:100%;margin:0;padding:0;text-align:center;list-style:none}
.banner .carousel-indicators li{float:none}

/* ---- Jackpot ---- */
.home-progressive-jackpot{width:100%}
.home-progressive-jackpot .border-container{min-width:0}
.home-progressive-jackpot .jackpot-container{min-width:0}
.home-progressive-jackpot .jackpot-border-container{min-width:0;white-space:nowrap}
#progressive_jackpot{min-width:0}

@media (max-width:991px){
  .container{width:100%;max-width:100%;padding-left:10px;padding-right:10px}
  .popular-games{flex-direction:column}
  .popular-games [data-section="left"]{margin-right:0;width:100%}
  .popular-games [data-section="left"] .section-title{height:44px}
  .popular-games [data-section="right"]{width:100%;min-width:0}
  .popular-games .scrtabs-tabs-fixed-container{max-width:100%}
  .popular-games{background-image:none!important}
  .popular-games [data-section="left"]>a{display:block}
  .popular-games [data-section="left"]>a img{width:100%;height:auto;max-height:none;object-fit:contain;display:block}
  .popular-games .animated-image{display:none}
  .popular-games .scrtabs-tab-container{position:relative;padding:0 24px}
  .popular-games .scrtabs-tab-scroll-arrow{position:absolute;top:0;bottom:0;width:24px;margin:0;display:flex;align-items:center;justify-content:center;z-index:3;height:auto}
  .popular-games .scrtabs-tab-scroll-arrow-left{left:0}
  .popular-games .scrtabs-tab-scroll-arrow-right{right:0}
  .popular-games .scrtabs-tabs-fixed-container{width:100%!important;overflow:hidden}
  .popular-games .jackpot-winners .winners-ticker-container{height:110px}
}

@media (max-width:767px){
  .home-progressive-jackpot{border-radius:18px;padding:5px}
  .home-progressive-jackpot .outer-container{padding:5px;border-radius:40px}
  .home-progressive-jackpot .inner-container{padding:5px;border-radius:40px}
  .home-progressive-jackpot .border-container{flex-direction:column;gap:6px;padding:10px 8px;border-radius:30px;border-width:2px}
  .home-progressive-jackpot .jackpot-play-section{flex-direction:row;align-items:center;justify-content:center;margin:0;gap:8px}
  .home-progressive-jackpot .jackpot-play-section img{width:44px}
  .home-progressive-jackpot .jackpot-play-section .jackpot-play-text{font-size:20px}
  .home-progressive-jackpot .jackpot-container{width:100%;flex-grow:1;font-size:clamp(18px,7vw,30px);letter-spacing:2px;padding:5px;border-radius:30px}
  .home-progressive-jackpot .jackpot-inner-container{width:100%;padding:5px;border-radius:25px}
  .home-progressive-jackpot .jackpot-border-container{width:100%;line-height:1.3;padding:4px 6px;border-width:2px;border-radius:22px;align-items:center}
  .home-progressive-jackpot .jackpot-currency{margin-right:6px}

  /* Game populer (horizontal scroll rows) */
  .popular-game-title-container .container-title span{padding:5px 30px;font-size:13px}
  .popular-game-title-container .container-content{padding:6px}
  .popular-game-title-container .container-content .game-list .game-item{width:100%}
  .popular-game-title-container .container-content .game-list .games-group{width:calc((100% - 6px*2)/3.3);gap:6px}
  .popular-game-title-container .container-content .game-list .game-item .game-name{font-size:11px}

  /* Provider game grid */
  .popular-games .popular-game-list{padding:0 6px}
  .popular-games .popular-game-list .game-item{width:calc(100%/3);padding:3px}
  .popular-games .popular-game-list .game-item .game-name,
  .popular-games .popular-game-list .game-name{font-size:11px}
  .popular-games .nav-tabs>li>a img{width:auto;height:34px}

  .announcement-container{flex-wrap:wrap}
  .game-list{padding:6px}
  .game-list .game-name,.game-list .provider-name{font-size:12px;padding:6px 0}
  .game-list .rtp-container{left:5px;right:5px;bottom:5px;padding:4px;font-size:10px}
}

@media (max-width:420px){
  .popular-games .popular-game-list .game-item{width:50%}
  .popular-game-title-container .container-content .game-list .games-group{width:calc((100% - 6px*2)/2.4)}
}

/* Banner fade: slides stacked, no horizontal movement */
.banner .slick-slide{background:#020518}
.banner .slick-slide img{min-height:1px}

/* Banner ratio = actual slide images (1024x205), so nothing is cropped/stretched */
.banner,
.banner .slick-slide img,
.banner #banner_carousel>a img{aspect-ratio:1024/205;height:auto}
.banner .slick-slide img{object-fit:fill}

/* ===== Mobile: topbar, header, main menu, announcement ===== */
@media (max-width:767px){
  /* Topbar: icons on row 1, login/register on row 2 */
  .topbar-container{padding:8px 0}
  .topbar-container .row{flex-wrap:wrap;margin:0;row-gap:8px}
  .topbar-left-container,.topbar-right-container{width:100%;padding:0}
  .topbar-left-section{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:4px}
  .topbar-left-section .topbar-item+.topbar-item{margin-left:0;padding-left:4px}
  .topbar-left-section .topbar-item a{padding:5px}
  .topbar-left-section .topbar-item a.telegram-btn{padding:5px 8px;font-size:11px;white-space:nowrap}
  .topbar-left-section [data-icon]{height:16px;width:16px}
  .login-panel{width:100%;justify-content:stretch;gap:8px}
  .login-panel .login-panel-item,.login-panel .login-panel-item+.login-panel-item{flex:1;margin:0}
  .login-panel .login-button,.login-panel .register-button{width:100%;line-height:20px;font-size:13px}

  /* Header + logo */
  .site-header .row{margin:0}
  .site-header .col-sm-3,.site-header .col-sm-9{width:100%;padding:0}
  .site-header .logo{max-width:220px;margin:0 auto}

  /* Main menu: swipeable icon row, no overlapping labels */
  .menu-slide{position:relative;padding:0 22px}
  .top-menu{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
  .top-menu::-webkit-scrollbar{display:none}
  .top-menu>li{flex:0 0 76px;width:76px;flex-basis:76px;scroll-snap-align:start}
  .top-menu>li>a{padding:10px 2px;font-size:10px;line-height:1.2;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
  .top-menu>li>a>img{height:28px;width:28px;margin-bottom:4px}
  .menu-slide>.glyphicon{position:absolute;top:50%;transform:translateY(-50%);z-index:3;font-size:14px;width:20px;text-align:center;line-height:1}
  .menu-slide>.left_trigger{left:0}
  .menu-slide>.right_trigger{right:0}
  .top-menu .game-list{display:none!important}

  /* Announcement / marquee */
  .announcement-container{flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px;margin:10px 0}
  .announcement-container>[data-section="title"],.announcement-container>[data-section="date"]{justify-content:center;text-align:center;font-size:13px}
  .announcement-container>[data-section="announcements"]{width:100%;border-radius:8px}
  .announcement-container .tickercontainer{border-radius:8px!important;padding:6px 0!important}
  .announcement-container .announcement-list li{padding:0 16px;font-size:13px!important;color:#f4e082!important}
  .announcement-container [data-icon="announcement"]{height:24px;width:24px}
}