/* GameAPKEntry Detail V6 */

/* ===== Purple banner ===== */

body.single-gae_app .gae-premium-banner{
    position:relative!important;
    min-height:620px!important;
    overflow:hidden!important;
    background:#241044!important;
    color:#fff!important;
}

body.single-gae_app .gae-premium-banner-bg{
    position:absolute!important;
    inset:-60px!important;
    z-index:0!important;

    background-image:var(--gae-app-bg)!important;
    background-repeat:no-repeat!important;
    background-position:88% 48%!important;
    background-size:560px auto!important;

    opacity:.36!important;
    filter:blur(18px) saturate(1.05)!important;
    transform:scale(1.15)!important;
}

body.single-gae_app .gae-premium-banner-overlay{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;

    background:
        radial-gradient(
            circle at 83% 45%,
            rgba(157,112,255,.22) 0%,
            rgba(111,64,213,.12) 26%,
            transparent 50%
        ),
        linear-gradient(
            108deg,
            rgba(22,10,48,.98) 0%,
            rgba(42,20,88,.95) 42%,
            rgba(86,42,177,.86) 100%
        )!important;
}

body.single-gae_app .gae-premium-banner-inner{
    position:relative!important;
    z-index:2!important;
    padding-top:34px!important;
    padding-bottom:48px!important;
}

body.single-gae_app .gae-banner-layout{
    display:grid!important;
    grid-template-columns:160px minmax(0,1fr) 315px!important;
    gap:26px!important;
    align-items:start!important;
}

body.single-gae_app .gae-banner-logo-area{
    padding-top:72px!important;
}

body.single-gae_app .gae-banner-logo{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:142px!important;
    height:142px!important;

    border:1px solid rgba(202,181,255,.42)!important;
    border-radius:28px!important;

    background:rgba(255,255,255,.11)!important;
    backdrop-filter:blur(14px)!important;

    box-shadow:0 22px 55px rgba(10,3,33,.28)!important;
}

body.single-gae_app .gae-banner-logo-img{
    width:118px!important;
    height:118px!important;
    max-width:118px!important;
    max-height:118px!important;

    object-fit:contain!important;
    object-position:center!important;

    border-radius:21px!important;
}


/* ===== Banner labels ===== */

body.single-gae_app .gae-banner-chips span{
    background:#eee7ff!important;
    color:#5f31d5!important;
}

body.single-gae_app .gae-banner-chips .checked{
    background:rgba(122,74,231,.40)!important;
    color:#fff!important;
    border:1px solid rgba(209,194,255,.30)!important;
}

body.single-gae_app .gae-banner-main h1{
    color:#fff!important;
    font-size:52px!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
}


/* ===== Promotion in banner ===== */

body.single-gae_app .gae-banner-offer{
    margin-bottom:15px!important;
    padding:16px 17px!important;

    border:1px solid rgba(192,165,255,.45)!important;
    border-radius:12px!important;

    background:linear-gradient(
        105deg,
        rgba(111,55,231,.28),
        rgba(153,92,246,.13)
    )!important;
}

body.single-gae_app .gae-banner-offer small{
    color:#d7c6ff!important;
}

body.single-gae_app .gae-banner-offer strong{
    color:#fff!important;
    font-size:24px!important;
}

body.single-gae_app .gae-banner-offer>span{
    background:#9b70f7!important;
    color:#fff!important;
}

body.single-gae_app .gae-banner-intro{
    color:rgba(255,255,255,.82)!important;
    font-size:16px!important;
    line-height:1.65!important;
}


/* ===== Stats ===== */

body.single-gae_app .gae-banner-stats>div{
    border:1px solid rgba(216,203,255,.16)!important;
    background:rgba(255,255,255,.09)!important;
}

body.single-gae_app .gae-banner-stats small{
    color:rgba(235,228,255,.60)!important;
}

body.single-gae_app .gae-banner-stats strong{
    color:#fff!important;
}


/* ===== Download ===== */

body.single-gae_app .gae-banner-download{
    background:linear-gradient(
        180deg,
        #8b59f5 0%,
        #6434e3 100%
    )!important;

    color:#fff!important;
    box-shadow:0 10px 30px rgba(70,30,165,.36)!important;
}

body.single-gae_app .gae-banner-checked{
    color:rgba(231,224,248,.66)!important;
}


/* ===== Right highlight card ===== */

body.single-gae_app .gae-banner-highlights{
    border:1px solid rgba(205,190,255,.20)!important;

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.11),
        rgba(126,77,223,.11)
    )!important;

    backdrop-filter:blur(14px)!important;
}

body.single-gae_app .gae-banner-highlights>h3{
    color:#ccb2ff!important;
}

body.single-gae_app .gae-highlight-item{
    border-top-color:rgba(218,207,255,.13)!important;
}

body.single-gae_app .gae-highlight-item small{
    color:rgba(229,220,249,.57)!important;
}

body.single-gae_app .gae-highlight-item strong{
    color:#fff!important;
}

body.single-gae_app .gae-highlight-item p{
    color:rgba(232,225,248,.64)!important;
}


/* ===== Bottom-only 18+ ===== */

body.single-gae_app .gae-detail-age{
    padding:0 20px 34px!important;
    background:#f5f6f9!important;
}

body.single-gae_app .gae-detail-age-inner{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;

    padding:14px 17px!important;

    border:1px solid #e4e1eb!important;
    border-radius:12px!important;

    background:#fff!important;
}

body.single-gae_app .gae-detail-age-badge{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;

    border-radius:11px!important;
    background:#21172f!important;

    color:#fff!important;
    font-size:15px!important;
    font-weight:900!important;
}

body.single-gae_app .gae-detail-age-copy strong{
    display:block!important;
    margin-bottom:3px!important;

    color:#26222e!important;
    font-size:12px!important;
}

body.single-gae_app .gae-detail-age-copy p{
    margin:0!important;

    color:#77747f!important;
    font-size:9px!important;
    line-height:1.5!important;
}

body.single-gae_app .gae-detail-age-copy a{
    display:inline-block!important;
    margin-top:4px!important;

    color:#6434e3!important;
    text-decoration:none!important;

    font-size:9px!important;
    font-weight:800!important;
}


/* ===== Mobile ===== */

@media(max-width:900px){

    body.single-gae_app .gae-premium-banner{
        min-height:auto!important;
    }

    body.single-gae_app .gae-premium-banner-bg{
        background-position:95% 25%!important;
        background-size:360px auto!important;
        opacity:.30!important;
    }

    body.single-gae_app .gae-banner-layout{
        grid-template-columns:105px minmax(0,1fr)!important;
    }

    body.single-gae_app .gae-banner-highlights{
        grid-column:1/-1!important;
    }
}

@media(max-width:680px){

    body.single-gae_app .gae-premium-banner-bg{
        background-position:110% 12%!important;
        background-size:260px auto!important;
        opacity:.28!important;
        filter:blur(12px)!important;
    }

    body.single-gae_app .gae-banner-layout{
        grid-template-columns:72px minmax(0,1fr)!important;
        gap:12px!important;
    }

    body.single-gae_app .gae-banner-logo-area{
        padding-top:44px!important;
    }

    body.single-gae_app .gae-banner-logo{
        width:70px!important;
        height:70px!important;
        border-radius:16px!important;
    }

    body.single-gae_app .gae-banner-logo-img{
        width:60px!important;
        height:60px!important;
    }

    body.single-gae_app .gae-banner-main h1{
        font-size:31px!important;
    }

    body.single-gae_app .gae-banner-offer strong{
        font-size:18px!important;
    }

    body.single-gae_app .gae-banner-intro{
        font-size:13px!important;
    }

    body.single-gae_app .gae-banner-stats{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    body.single-gae_app .gae-detail-age{
        padding:0 10px 24px!important;
    }

    body.single-gae_app .gae-detail-age-inner{
        align-items:flex-start!important;
        padding:12px!important;
    }
}


/* =========================================================
   GAE DETAIL HERO SWAP R9
   Large desktop:
   Highlights | Main information | Large APP logo
   ========================================================= */

@media (min-width:1200px){

    body.single-gae_app .gae-banner-layout{
        display:grid!important;

        grid-template-columns:
            260px
            minmax(0,1fr)
            280px!important;

        grid-template-areas:
            "highlights main logo"!important;

        gap:30px!important;
        align-items:center!important;
    }


    /* LEFT */
    body.single-gae_app .gae-banner-highlights{
        grid-area:highlights!important;

        width:100%!important;
        max-width:none!important;

        margin:0!important;
        align-self:center!important;
        justify-self:stretch!important;
    }


    /* CENTER */
    body.single-gae_app .gae-banner-main{
        grid-area:main!important;

        min-width:0!important;
        width:100%!important;
    }


    /* RIGHT */
    body.single-gae_app .gae-banner-logo-area{
        grid-area:logo!important;

        width:100%!important;
        min-width:0!important;

        display:flex!important;
        align-items:center!important;
        justify-content:center!important;

        margin:0!important;
        padding:0!important;
    }


    body.single-gae_app .gae-banner-logo{
        width:258px!important;
        height:258px!important;
        min-width:258px!important;
        max-width:258px!important;

        padding:12px!important;
        margin:0!important;

        display:flex!important;
        align-items:center!important;
        justify-content:center!important;

        border-radius:32px!important;

        background:rgba(20,10,42,.46)!important;

        border:
            1px solid rgba(255,255,255,.34)!important;

        box-shadow:
            0 22px 55px rgba(0,0,0,.35),
            inset 0 0 0 1px rgba(255,255,255,.07)!important;
    }


    body.single-gae_app .gae-banner-logo-img{
        display:block!important;

        width:234px!important;
        height:234px!important;

        max-width:234px!important;
        max-height:234px!important;

        object-fit:contain!important;
        object-position:center!important;

        border-radius:22px!important;

        margin:0!important;
        padding:0!important;
    }

}