/* AuraEpin homepage slider geometry
 * Loaded after the legacy homepage styles so mobile has one predictable layout.
 */
html,
body.jg-site.jg-home-page{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
}

body.jg-site.jg-home-page .stories,
body.jg-site.jg-home-page #game-category-list,
body.jg-site.jg-home-page #game-category-list .slick-list{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
}

/* Keep the story rail on the same desktop axis as the 1400px hero. */
body.jg-site.jg-home-page .stories .container{
    width:90vw!important;
    max-width:1400px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow:hidden!important;
}

body.jg-site.jg-home-page .stories,
body.jg-site.jg-home-page #game-category-list .slick-list{
    contain:layout paint!important;
    clip-path:inset(0)!important;
}

body.jg-site.jg-home-page .slider-frame-wrap,
body.jg-site.jg-home-page #homeSliderFrame,
body.jg-site.jg-home-page iframe.iframeslider{
    box-sizing:border-box!important;
}

/* BursaGB reference geometry: the desktop hero is 90vw (max 1400px) and 393px tall. */
body.jg-site.jg-home-page .slider-frame-wrap{
    width:90vw!important;
    max-width:1400px!important;
    height:393px!important;
    min-height:393px!important;
    max-height:393px!important;
    margin:5px auto 8px!important;
    padding:0!important;
    overflow:hidden!important;
}

body.jg-site.jg-home-page #homeSliderFrame,
body.jg-site.jg-home-page iframe.iframeslider{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:393px!important;
    min-height:393px!important;
    max-height:393px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
}

body.jg-site.jg-home-page .jg-mid-slider-section,
body.jg-site.jg-home-page .jg-mid-slider-section .container,
body.jg-site.jg-home-page .jg-mid-slider,
body.jg-site.jg-home-page .jg-mid-slider .slick-list,
body.jg-site.jg-home-page .jg-mid-slider .slick-track,
body.jg-site.jg-home-page .jg-mid-slider .slick-slide,
body.jg-site.jg-home-page .jg-mid-slider .slick-slide > div,
body.jg-site.jg-home-page .jg-mid-slide{
    min-width:0!important;
}

body.jg-site.jg-home-page .jg-mid-slider{
    position:relative!important;
    overflow:hidden!important;
}

body.jg-site.jg-home-page .jg-mid-slider:not(.slick-initialized) > .jg-mid-slide:not(:first-child){
    display:none!important;
}

body.jg-site.jg-home-page .jg-mid-slide,
body.jg-site.jg-home-page .jg-mid-slide-media{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
}

body.jg-site.jg-home-page .jg-mid-slide-media{
    object-fit:cover!important;
    object-position:center center!important;
}

@media (max-width:767.98px){
    body.jg-site.jg-home-page{
        /* Mobile shows only the main 1600x635 artwork at its native ratio. */
        --jg-home-slider-width:90vw;
        --jg-home-slider-height:calc(var(--jg-home-slider-width) * .396875);
    }

    body.jg-site.jg-home-page .slider-frame-wrap{
        width:var(--jg-home-slider-width)!important;
        max-width:1400px!important;
        height:var(--jg-home-slider-height)!important;
        min-height:var(--jg-home-slider-height)!important;
        max-height:var(--jg-home-slider-height)!important;
        margin:8px auto 10px!important;
        padding:0!important;
        border:1px solid rgba(46,190,238,.22)!important;
        border-radius:14px!important;
        overflow:hidden!important;
        background:var(--jg-base,#081220)!important;
        box-shadow:0 9px 22px rgba(3,10,24,.14)!important;
    }

    body.jg-site.jg-home-page #homeSliderFrame,
    body.jg-site.jg-home-page iframe.iframeslider{
        width:100%!important;
        height:var(--jg-home-slider-height)!important;
        min-height:var(--jg-home-slider-height)!important;
        max-height:var(--jg-home-slider-height)!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        border-radius:13px!important;
        overflow:hidden!important;
        background:transparent!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider-section{
        width:100%!important;
        margin:14px 0!important;
        padding:0!important;
        overflow:hidden!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider-section > .container{
        width:calc(100% - 18px)!important;
        max-width:calc(100% - 18px)!important;
        margin:0 auto!important;
        padding:0!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider{
        width:100%!important;
        /* BursaGB feature banner ratio: 340 x 110. */
        height:clamp(112px,calc((100vw - 18px) * .32353),202px)!important;
        min-height:clamp(112px,calc((100vw - 18px) * .32353),202px)!important;
        max-height:clamp(112px,calc((100vw - 18px) * .32353),202px)!important;
        aspect-ratio:auto!important;
        margin:0!important;
        padding:0!important;
        border-radius:14px!important;
        background:var(--jg-card,#101c30)!important;
        box-shadow:0 14px 34px rgba(3,10,24,.22)!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider .slick-list,
    body.jg-site.jg-home-page .jg-mid-slide,
    body.jg-site.jg-home-page .jg-mid-slide-media{
        width:100%!important;
        height:100%!important;
        min-height:100%!important;
        max-height:100%!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider .slick-track,
    body.jg-site.jg-home-page .jg-mid-slider .slick-slide,
    body.jg-site.jg-home-page .jg-mid-slider .slick-slide > div{
        height:100%!important;
        min-height:100%!important;
        max-height:100%!important;
        margin-top:0!important;
        margin-bottom:0!important;
        padding-top:0!important;
        padding-bottom:0!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider .slick-list,
    body.jg-site.jg-home-page .jg-mid-slider .slick-slide > div{
        overflow:hidden!important;
    }

    body.jg-site.jg-home-page .jg-mid-slide{
        border-radius:14px!important;
        background-position:center center!important;
        background-repeat:no-repeat!important;
        background-size:cover!important;
    }

    body.jg-site.jg-home-page .jg-mid-slide-media{
        border-radius:14px!important;
        object-fit:cover!important;
        object-position:center center!important;
        transform:none!important;
        transform-origin:center center!important;
        transition:transform .7s cubic-bezier(.22,.61,.36,1)!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider .slick-dots{
        left:50%!important;
        right:auto!important;
        bottom:9px!important;
        width:auto!important;
        margin:0!important;
        padding:5px 8px!important;
        transform:translateX(-50%)!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:6px!important;
        border-radius:999px!important;
        background:rgba(4,10,24,.58)!important;
        backdrop-filter:blur(8px)!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider .slick-dots li{
        width:6px!important;
        height:6px!important;
        margin:0!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider .slick-dots button{
        width:6px!important;
        height:6px!important;
        padding:0!important;
        border:0!important;
        border-radius:50%!important;
        background:rgba(255,255,255,.55)!important;
        font-size:0!important;
    }

    body.jg-site.jg-home-page .jg-mid-slider .slick-dots .slick-active button{
        width:18px!important;
        border-radius:10px!important;
        background:#19c7ee!important;
        box-shadow:0 0 12px rgba(25,199,238,.7)!important;
    }

}

@media (max-width:420px){
    body.jg-site.jg-home-page{
        --jg-home-slider-width:90vw;
        --jg-home-slider-height:calc(var(--jg-home-slider-width) * .396875);
    }

    body.jg-site.jg-home-page .jg-mid-slider{
        height:clamp(112px,calc((100vw - 18px) * .32353),132px)!important;
        min-height:clamp(112px,calc((100vw - 18px) * .32353),132px)!important;
        max-height:clamp(112px,calc((100vw - 18px) * .32353),132px)!important;
        border-radius:12px!important;
    }

    body.jg-site.jg-home-page .jg-mid-slide,
    body.jg-site.jg-home-page .jg-mid-slide-media{
        border-radius:12px!important;
    }

}

/* Mobile story rail: show whole circles only; the next page arrives by swipe. */
@media (max-width:767.98px){
    body.jg-site.jg-home-page .stories{
        padding:4px 0 0!important;
        margin:0!important;
    }

    body.jg-site.jg-home-page .stories .container,
    body.jg-site.jg-home-page .stories .row,
    body.jg-site.jg-home-page .stories .col-12{
        margin-bottom:0!important;
        padding-bottom:0!important;
    }

    body.jg-site.jg-home-page #game-category-list{
        width:656px!important;
        max-width:calc(100vw - 16px)!important;
        min-height:64px!important;
        margin:0 auto!important;
    }

    body.jg-site.jg-home-page #game-category-list .slick-list,
    body.jg-site.jg-home-page #game-category-list .slick-track,
    body.jg-site.jg-home-page #game-category-list .slick-slide{
        height:64px!important;
        min-height:64px!important;
    }

    body.jg-site.jg-home-page #game-category-list .slick-track{
        gap:8px!important;
        align-items:center!important;
    }

    body.jg-site.jg-home-page #game-category-list .item{
        width:64px!important;
        min-width:64px!important;
        max-width:64px!important;
        height:64px!important;
        min-height:64px!important;
        max-height:64px!important;
        flex:0 0 64px!important;
    }
}

@media (min-width:641px) and (max-width:720px){
    body.jg-site.jg-home-page #game-category-list{width:568px!important}
}

@media (min-width:721px) and (max-width:767.98px){
    body.jg-site.jg-home-page #game-category-list{width:640px!important}
}

@media (min-width:569px) and (max-width:640px){
    body.jg-site.jg-home-page #game-category-list{width:496px!important}
}

@media (min-width:497px) and (max-width:568px){
    body.jg-site.jg-home-page #game-category-list{width:424px!important}
}

@media (min-width:425px) and (max-width:496px){
    body.jg-site.jg-home-page #game-category-list{width:352px!important}
}

@media (max-width:424px){
    body.jg-site.jg-home-page #game-category-list{width:332px!important}
    body.jg-site.jg-home-page #game-category-list .item{
        width:60px!important;
        min-width:60px!important;
        max-width:60px!important;
        height:60px!important;
        min-height:60px!important;
        max-height:60px!important;
        flex-basis:60px!important;
    }
}

@media (max-width:363px){
    body.jg-site.jg-home-page #game-category-list{width:312px!important}
    body.jg-site.jg-home-page #game-category-list .item{
        width:56px!important;
        min-width:56px!important;
        max-width:56px!important;
        height:56px!important;
        min-height:56px!important;
        max-height:56px!important;
        flex-basis:56px!important;
    }
}

@media (max-width:343px){
    body.jg-site.jg-home-page #game-category-list{width:248px!important}
}

/* Mobile story icons stay crisp without the legacy heavy halo. */
@media (max-width:767.98px){
    html[data-theme] body.jg-site.jg-home-page #game-category-list .item{
        box-shadow:0 0 0 1px rgba(43,190,238,.15),0 2px 5px rgba(3,10,24,.08)!important;
        filter:none!important;
    }

    html[data-theme="light"] body.jg-site.jg-home-page #game-category-list .item{
        box-shadow:0 0 0 1px rgba(37,99,235,.16),0 2px 5px rgba(15,23,42,.065)!important;
    }

    body.jg-site.jg-home-page .slider-frame-wrap{
        margin-top:2px!important;
    }
}

@supports not (overflow:clip){
    body.jg-site.jg-home-page{
        overflow-x:hidden!important;
    }
}