@charset "utf-8";#Breadcrumbs li {
    display: inline
}

#Breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin: 0 .5em;
    opacity: .25
}

#Breadcrumbs a {
    display: inline-block;
    vertical-align: top;
    color: currentColor;
    opacity: .7
}

#game_list_content {
    flex: auto
}

#game_list_content>.inner {
    max-width: var(--MaxContentWidth);
    padding: 0 2em;
    margin: 0 auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: clamp(25em,25%,30em) 1fr;
    gap: 4em;
    align-items: flex-start
}
#trending_game_account>.inner {
    max-width: var(--MaxContentWidth);
    padding: 0 2em;
    margin: 0 auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4em;
    align-items: flex-start
}

#game_list_menu {
    position: sticky;
    z-index: 1;
    top: calc((var(--site-header-height) - var(--global-nav-height)) * 1px + 2em);
    margin: 3em 0
}

#game_list_menu>.inner {
    max-height: calc(var(--VHeight) - 9em);
    overflow: hidden;
    overflow-y: auto
}

#game_list_wrp {
    margin: 3em 0
}

#game_list_menu>.inner>.title,.product_list_menu_ctrl_off,.product_list_menu_ctrl_on {
    display: none
}

@media only screen and (max-width: 1280px) {
    #game_list_content>.inner {
        gap:2em
    }

    #game_list_menu,#game_list_wrp {
        margin: 2em 0
    }
}

@media only screen and (max-width: 1000px) {
    .product_list_menu_ctrl_off,.product_list_menu_ctrl_on {
        display:inherit
    }

    #game_list_content>.inner {
        display: block
    }

    body.show_product_list_menu {
        overflow: hidden
    }

    #game_list_menu.show {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s
    }

    #game_list_menu.show>.inner {
        margin-inline-start:1em;transition: .3s
    }

    #game_list_menu {
        position: fixed;
        inset: 0;
        z-index: 999;
        background: var(--background-color-mask-a50,rgba(255 255 255/50%));
        visibility: hidden;
        opacity: 0;
        margin: 0
    }

    #game_list_menu>.product_list_menu_ctrl_off {
        position: absolute;
        inset: 0;
        z-index: -1
    }

    #game_list_menu>.inner {
        max-height: calc(100% - 2em);
        width: calc(100% - 2em);
        max-width: 25em;
        box-sizing: border-box;
        background: var(--background-color-L2,#fff);
        box-shadow: rgba(0 0 0/10%) 0 0 2em;
        overflow: hidden;
        display: grid;
        grid-template-rows: auto 1fr;
        margin: 1em auto;
        margin-inline-start:-2em;border-radius: 1em
    }

    #game_list_menu>.inner>.title {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1em;
        align-items: center;
        padding: 1em 2em;
        box-shadow: var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0
    }

    #game_list_menu>.inner>.title h3 {
        font-size: 1em;
        font-weight: 800
    }

    #game_list_menu>.inner>.title .product_list_menu_ctrl_off {
        margin-inline-end:-1em;opacity: .5
    }
}

@media only screen and (max-width: 480px) {
    #game_list_wrp .title .product_list_menu_ctrl_on>span {
        --padding-inline:1.5em;
        display: block;
        height: 3em;
        width: 5em
    }

    #game_list_wrp .title .product_list_menu_ctrl_on>span::before {
        margin: 0 auto
    }
}

.ItemMenu ul li~li {
    margin-block-start:1px}

.ItemMenu ul a {
    display: block;
    color: currentColor
}

.ItemMenu ul span {
    display: grid;
    grid-template-columns: 2.5em 1fr;
    gap: 1.5em;
    align-items: center;
    padding: .5em 1em;
    border-radius: 3em;
    transition: background .3s
}

/* .ItemMenu ul span::before {
    content: '';
    display: block;
    font-size: 2.5em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    margin: 0 auto;
    background-image: var(--bg-url);
    background-repeat: no-repeat;
    background-size: 10em 5em;
    background-position: calc((var(--x,10) - 1) * -1em) calc((var(--y,5) - 1) * -1em);
    opacity: .5;
    filter: brightness(var(--brightness-filter,0))
} */

.ItemMenu ul span[data-item-count] {
    grid-template-columns: 2.5em 1fr auto
}

.ItemMenu ul span[data-item-count]::after {
    content: attr(data-item-count);
    display: block;
    text-align: center;
    opacity: .5;
    min-width: 2em
}

.ItemMenu ul span>b {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: inherit
}

.ItemMenu ul a:hover span {
    background: var(--body-text-color-a5,rgba(0 0 0/5%))
}

.ItemMenu ul a.on {
    pointer-events: none
}

.ItemMenu ul a.on span {
    background: linear-gradient(var(--angle,-90deg),var(--body-text-color-a5,rgba(0 0 0/5%)),var(--body-text-color-a0,rgba(0 0 0/0)))
}

.ItemMenu ul a.on span::before {
    opacity: 1
}

.ItemMenu ul a.on span>b {
    font-weight: 800
}

[lang*=ar] .ItemMenu ul a.on span {
    --angle: 90deg
}

@media only screen and (min-width: 1001px) {
    .ItemMenu {
        background:var(--background-color-L2,#fff);
        border-radius: 1em;
        padding: 1.5em 1em
    }
}

@media only screen and (max-width: 1000px) {
    .ItemMenu {
        padding:1.5em 1em;
        overflow: hidden;
        overflow-y: auto
    }
}

#hot_game_list {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(25em,1fr));
    gap: 2em;
    margin: 3em 0
}

#hot_game_list>li>a {
    display: grid;
    grid-template-columns: 10em 1fr;
    border-radius: 1em;
    overflow: hidden;
    color: var(--color-text);
    background-color: var(--background-color);
    background-size: cover;
    background-position: center;
    box-shadow: var(--color-img-bdc,rgba(0 0 0/5%)) 0 0 0 1px;
    position: relative;
    height: calc(160 / 120 * 10em);
    transform: translate3d(0,0,0);
    background-blend-mode: soft-light
}

#hot_game_list .img {
    --W: 10em;
    width: var(--W);
    height: calc(var(--W) * 1.333334);
    background: var(--body-text-color-a5,rgba(0 0 0/5%));
    box-shadow: var(--color-img-bdc,rgba(0 0 0/5%)) 0 0 0 1px,rgba(0 0 0/10%) 0 0 1em;
    overflow: hidden
}

#hot_game_list .img img {
    vertical-align: top;
    width: 100%;
    height: 100%;
    transition: transform .3s
}

#hot_game_list .T {
    padding: 1.5em 2em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 1em
}

#hot_game_list .name {
    word-break: break-word;
    font-weight: 800;
    font-size: 1.166667em;
    text-transform: uppercase;
    color: #fff;
}

#hot_game_list .info {
    opacity: .5;
    mix-blend-mode: plus-lighter;
    color: #FFFFFF;
}

#hot_game_list .info span {
    display: inline-block;
    vertical-align: top
}

#hot_game_list .info span:not(:last-child)::after {
    content: ' / ';
    opacity: .25;
    margin: 0 .25em
}

#hot_game_list>li>a:hover .img>img {
    transform: scale(1.05)
}

#game_list {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(var(--column,11em),1fr));
    gap: 2em;
    justify-content: space-evenly;
    margin: 3em 0
}

#game_list a {
    display: block;
    color: currentColor
}

#game_list .img {
    --W: 10em;
    width: var(--W);
    height: calc(var(--W) * 1.333334);
    background: var(--body-text-color-a5,rgba(0 0 0/5%));
    box-shadow: var(--body-text-color-a5,rgba(0 0 0/5%)) 0 0 0 1px;
    border-radius: calc(var(--W)/ 10);
    overflow: hidden;
    transition: transform .3s
}

#game_list .img img {
    vertical-align: top;
    width: 100%;
    height: 100%
}

#game_list .T {
    margin-block-start:1em}

#game_list .name {
    word-break: break-word;
    font-weight: 800
}

#game_list .info {
    opacity: .5;
    margin-block-start:.5em}

#game_list .info span {
    display: inline-block;
    vertical-align: top
}

#game_list .info span:not(:last-child)::after {
    content: ' / ';
    opacity: .25
}

#game_list a:focus .img,#game_list a:hover .img {
    transform: scale(1.05)
}

@media only screen and (max-width: 1280px) {
    #hot_game_list {
        margin:2em 0
    }

    #game_list {
        margin: 2em 0;
        --column: 10em
    }
}

@media only screen and (max-width: 1000px) {
    #game_list_wrp .title {
        display:grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 2em;
        justify-content: space-between
    }
}

[data-game-theme] {
    --r: var(--d-r,255);
    --g: var(--d-g,255);
    --b: var(--d-b,255);
    --h: var(--d-h,0);
    --s: var(--d-s,0%);
    --l: var(--d-l,100%);
    --threshold: .72;
    --background-color: rgba(var(--r), var(--g), var(--b), var(--background-alpha,1));
    --red: calc(var(--r) * .2126);
    --green: calc(var(--g) * .7152);
    --blue: calc(var(--b) * .0722);
    --sum: calc(var(--red) + var(--green) + var(--blue));
    --lightness: calc(var(--sum) / 255);
    --lightness-trend: clamp(0%,calc((var(--lightness) - var(--threshold)) * -999999999%),100%);
    --color-text: hsl(0 0% var(--lightness-trend));
    --color-img-bdc: hsl(0 0% var(--lightness-trend)/5%);
    --color-img-bgc: hsl(0 0% var(--lightness-trend)/10%);
    --offset-h1: calc(var(--h) + 10);
    --offset-h2: calc(var(--h) - 10);
    --offset-s1: calc(var(--s) * .9);
    --offset-s2: calc(var(--s) * .9);
    --offset-l1: max(calc(var(--l) - 25%),10%);
    --offset-l2: min(calc(var(--l) + 10%),80%)
}

#game_cover {
    color: var(--color-text);
    background-color: var(--background-color);
    background-image: linear-gradient(135deg,hsl(var(--offset-h1) var(--offset-s1) var(--offset-l1)),hsl(var(--offset-h2) var(--offset-s2) var(--offset-l2)));
    background-size: cover;
    position: relative
}

#game_cover>.bg {
    background-size: cover;
    background-position: center;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    max-width: 160em;
    margin: auto;
    -webkit-mask-image: linear-gradient(90deg,rgba(0 0 0/0),rgba(0 0 0/50%),rgba(0 0 0/0))
}

#game_cover>.inner {
    --W: 15em;
    margin: 0 auto;
    max-width: var(--MaxContentWidth);
    padding: 2em;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--W) 1fr;
    grid-template-rows: 1fr auto;
    gap: 0 3em;
    align-items: end;
    position: relative
}

#game_cover .cover {
    margin-block-end:-4em}

#game_cover .cover .img {
    width: var(--W);
    border-radius: calc(var(--W)/ 12);
    position: relative;
    overflow: hidden;
    background: var(--color-img-bgc);
    box-shadow: var(--color-img-bdc) 0 0 0 1px,rgba(0 0 0/10%) 0 1em 2em
}

#game_cover .cover .img::before {
    content: '';
    display: block;
    padding-block-start:calc(640 / 480 * 100%)}

#game_cover .cover .img img {
    vertical-align: top;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto
}

#game_cover .info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em 2em
}

#game_cover .name {
    grid-column: 1/-1
}

#game_cover .name h1 {
    font-size: 2.5em;
    font-weight: 800;
    text-transform: uppercase
}

#game_cover .links {
    display: flex;
    align-items: center;
    gap: 1em
}

#game_cover .links a {
    display: block;
    color: currentColor
}

#game_cover .links a:not(:hover) {
    opacity: .7
}

#game_cover .links span {
    display: block;
    width: 1.5em;
    height: 1.5em;
    overflow: hidden
}

#game_cover .links span::before {
    display: block;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden
}

#game_cover .links span[icon]::before {
    content: attr(icon)
}

#game_cover .property {
    opacity: .7;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1em
}

#game_cover .property span {
    display: inline-block;
    vertical-align: top
}

#game_cover .property span:not(:last-child)::after {
    content: ' / ';
    opacity: .25;
    margin-inline:1em}

#game_cover .property .platform {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1em
}

#game_cover .property .platform b {
    font-weight: 600;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .5em
}

#game_cover .property .platform b::before {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    font-size: 1.5em;
    background-image: url(../images/platform_icons-ed9f794459.svg);
    background-repeat: no-repeat;
    background-size: 10em 5em;
    background-position: calc((var(--x,10) - 1) * -1em) calc((var(--y,5) - 1) * -1em);
    filter: brightness(clamp(0,calc((var(--lightness) - var(--threshold)) * -999999),1))
}

@media only screen and (max-width: 1000px) {
    #game_cover>.inner {
        --W:12em;
        gap: 0 2em
    }

    #game_cover .name h1 {
        font-size: 2em
    }

    #game_cover .info {
        grid-template-columns: 1fr;
        gap: .5em
    }

    #game_cover .links {
        margin-block:.5em}
}

@media only screen and (max-width: 480px) {
    #game_cover>.bg {
        background-size:200%
    }

    #game_cover>.inner {
        display: block;
        text-align: center;
        --W: 12em
    }

    #game_cover .cover {
        margin: 0 0 1.5em
    }

    #game_cover .cover .img {
        margin: 0 auto
    }

    #game_cover .name h1 {
        font-size: 1.75em
    }

    #game_cover .links {
        justify-content: center;
        margin-block-start:.5em}

    #game_cover .property {
        justify-content: center;
        column-gap: 2em
    }

    #game_cover .property span:not(:last-child)::after {
        content: none
    }
}

#game_content {
    flex: auto
}

#game_content>.inner {
    margin: 0 auto;
    max-width: var(--MaxContentWidth);
    padding: 4em 2em;
    box-sizing: border-box
}

#game_content_tab {
    display: none
}

@media only screen and (min-width: 1001px) {
    #game_content>.inner {
        display:grid;
        gap: 2em 4em;
        grid-template-columns: clamp(30em,33%,35em) 1fr;
        grid-template-rows: auto auto 1fr
    }

    #game_explain {
        grid-row: span 3
    }

    #game_card {
        grid-column: 2/-1
    }

    #game_topup {
        grid-column: 2/-1
    }

    #game_news {
        grid-column: 2/-1
    }

    #game_explain:only-child {
        grid-column: 1/-1
    }

    #game_explain:only-child>.inner {
        display: grid;
        grid-template-columns: clamp(30em,33%,35em) 1fr;
        gap: 2em 4em
    }
}

@media only screen and (max-width: 1000px) {
    #game_content>.inner {
        padding:2em
    }

    #game_content_tab.float>.inner {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .3s,transform .3s
    }

    #game_content_tab {
        display: block;
        position: sticky;
        top: calc((var(--site-header-height) - var(--global-nav-height)) * 1px);
        z-index: 3;
        height: 0
    }

    #game_content_tab>.inner {
        background: var(--background-color-L3,#fff);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-2em)
    }

    #game_content_tab ul {
        display: flex;
        align-items: center;
        gap: 2em;
        padding: 0 2em;
        overflow: hidden;
        overflow-x: auto;
        scroll-snap-type: x mandatory
    }

    #game_content_tab ul>li {
        scroll-snap-align: center
    }

    #game_content_tab a {
        display: block;
        color: currentColor;
        padding: 1.75em 0;
        position: relative
    }

    #game_content_tab span {
        display: block;
        white-space: nowrap;
        font-weight: 800;
        text-transform: uppercase
    }
}

@media only screen and (max-width: 640px) {
    #game_content_tab ul {
        -webkit-overflow-scrolling:touch;
        scrollbar-color: transparent;
        scrollbar-width: none
    }

    #game_content_tab ul::-webkit-scrollbar {
        height: 0;
        width: 0;
        display: none
    }
}

#game_card h2,#game_channel h2,#game_news h2,#game_topup h2 {
    font-size: 1.5em;
    margin-block-end:1em}

#game_card h2 b,#game_channel h2 b,#game_news h2 b,#game_topup h2 b {
    font-weight: 800
}

#game_card .ItemList,#game_topup .ItemList {
    margin: 1.5em 0;
    background: var(--background-color-L3,#fff);
    padding: 2em;
    border-radius: 1em;
    --itemlist-column: 18em
}

@media only screen and (max-width: 1000px) {
    #game_explain {
        margin:2em 0 0;
        scroll-margin-block-start: calc((var(--site-header-height) - var(--global-nav-height)) * 1px + 2em)
    }

    #game_card,#game_news,#game_topup {
        margin: 3em 0 0;
        scroll-margin-block-start: calc((var(--site-header-height) - var(--global-nav-height)) * 1px + 6.5em)
    }

    #game_card .ItemList,#game_topup .ItemList {
        background: unset;
        padding: 0;
        border-radius: unset;
        --itemlist-column: 16em;
        --itemlist-gap: 1em 2em
    }
}

@media only screen and (max-width: 480px) {
    #game_explain {
        margin:0
    }
}

#game_explain article:not([lang*=ar]) {
    direction: ltr
}

#game_explain article {
    margin-block-end:2em}

#game_explain article h2 {
    font-size: 1.5em;
    font-weight: 800;
    font-family: inherit;
    margin: 1em 0
}

#game_explain article h2:first-child {
    margin-block-start:0}

#game_explain article h3 {
    font-size: 1.25em;
    font-weight: 800;
    font-family: inherit;
    margin: 1em 0
}

#game_explain article ul {
    margin: 1em 0;
    padding-inline-start:2em}

#game_explain article ul>li {
    margin: 1em 0;
    list-style: disc
}

#game_explain article ol {
    margin: 1em 0;
    padding-inline-start:2em}

#game_explain article ol>li {
    margin: 1em 0;
    list-style: decimal
}

#game_explain article p {
    margin: 1em 0
}

#game_explain article a:not(.btw) {
    display: inline-block;
    font-weight: 800;
    text-decoration: underline
}

#game_explain article img {
    vertical-align: top;
    max-width: 100%;
    width: auto;
    height: auto
}

#game_explain article .youtube-player {
    margin: 2em 0
}

#game_explain article>iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 1em;
    margin-block:1em}

@media only screen and (max-width: 1280px) {
    #game_explain .youtube-player {
        max-width:40em
    }
}

@media only screen and (max-width: 1280px) {
    .ItemList {
        --W:4.5em
    }
}

#game_news ul {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(20em,1fr));
    gap: 2em
}

#game_news ul a {
    display: block;
    color: currentColor
}

#game_news ul .img {
    overflow: hidden;
    border-radius: 1em;
    background: var(--body-text-color-a10,#fff);
    box-shadow: var(--body-text-color-a10,rgba(0 0 0/5%)) 0 0 0 1px;
    transform: translate3d(0,0,0)
}

#game_news ul .img img {
    vertical-align: top;
    width: 100%;
    height: 100%;
    aspect-ratio: 2/1;
    object-fit: cover;
    transition: transform .3s
}

#game_news ul h3 {
    font-size: 1em;
    margin-block-start:1em}

#game_news ul a:hover .img img {
    transform: scale(1.05)
}

@media only screen and (max-width: 1000px) {
    #game_news ul {
        display:flex;
        overflow: hidden;
        overflow-x: auto;
        margin: 0 -2em;
        padding: 0 2em 1em;
        scroll-snap-type: x mandatory
    }

    #game_news ul>li {
        flex: none;
        width: min(27.5em,calc(var(--VWidth) - 6em));
        scroll-snap-align: center
    }
}

@media only screen and (max-width: 800px) {
    #game_news ul {
        -webkit-overflow-scrolling:touch;
        scrollbar-color: transparent;
        scrollbar-width: none
    }

    #game_news ul::-webkit-scrollbar {
        height: 0;
        width: 0;
        display: none
    }
}
#hot_game_list > li > a::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* filter: blur(6px); */
    transform: scale(1.1);
    z-index: 0;
}
#hot_game_list > li > a > * {
    position: relative;
    z-index: 1;
}