@charset "utf-8";

#Breadcrumbs{}
#Breadcrumbs li{display:inline;}
#Breadcrumbs li:not(:last-child)::after{content:'/';margin-inline:.5em;opacity:.25;}
#Breadcrumbs a{display:inline-block;vertical-align:top;color:inherit;}


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

#game_list_menu{position:sticky;z-index:1;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));}
#game_list_menu>.inner{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:1em;background:var(--background-color-L2,#fff);max-height:calc(var(--VHeight) - var(--main-nav-height) * 1px - var(--spacing) * 2);}
#game_list_wrp{padding:var(--spacing);border-radius:1em;background:var(--background-color-L3,#fff);align-self:stretch;}
#game_list_wrp>.inner{display:flex;flex-direction:column;gap:var(--spacing);}

.product_list_menu_ctrl_on,
.product_list_menu_ctrl_off{display:none;}

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

	#game_list_content>.inner{display:block;}

	#game_list_title{display:flex;flex-wrap:wrap;gap:1em var(--spacing);align-items:center;}

	body:has(#game_list_menu.show){overflow:hidden;}
	#game_list_menu:not(.show){display:none;}
	#game_list_menu.show{opacity:1;transition:opacity 300ms;transition-behavior:allow-discrete;}
	#game_list_menu.show>.inner{transform:translateX(0);transition:transform 300ms;transition-behavior:allow-discrete;}
	@starting-style{
		#game_list_menu.show{opacity:0;}
		#game_list_menu.show>.inner{transform:translateX(calc(var(--translate-reverse,1) * -5em));}
	}
	#game_list_menu{position:fixed;inset:0;z-index:999;background:var(--background-color-mask-a50,rgba(255 255 255/75%));}
	#game_list_menu>.product_list_menu_ctrl_off{position:absolute;inset:0;z-index:-1;}
	#game_list_menu>.inner{max-width:min(25em,calc(100% - 5em));height:calc(100% - 2em);max-height:unset;box-shadow:rgba(0 0 0/10%) 0 0 2em;margin:1em;}
}
@media only screen and (max-width:480px){
	#game_list_wrp{margin-inline:calc(var(--spacing) * -1);}
	#game_list_title{flex-direction:column-reverse;align-items:start;}
	.product_list_menu_ctrl_on{--CPT-US:3em;}
}


.ItemMenu_title{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;height:5em;padding-inline:var(--spacing) 1em;box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0;}
.ItemMenu_title h3{font-size:var(--SiteFS);font-weight:var(--SiteFW);text-transform:uppercase;}
.ItemMenu_title .btw{--icon-opacity:.5;}
.ItemMenu{display:flex;flex-direction:column;gap:1px;padding:1em;overflow:hidden;overflow-y:auto;}
.ItemMenu .bt{flex:none;display:grid;grid-template-columns:auto 1fr auto;gap:1.5em;align-items:center;padding-inline:1.25em;height:var(--CPT-US);border-radius:var(--CPT-BDR);color:inherit;transition:background-color 300ms;}
.ItemMenu .bt::before{content:'';display:block;font-size:2em;width:1em;height:1em;background:url('../images/platform_icons-91b7acd68a.svg') no-repeat calc((var(--x,10) - 1) * -1em) calc((var(--y,5) - 1) * -1em)/10em 5em;opacity:.75;filter:invert(var(--brightness-filter,0));}
.ItemMenu .bt::after{content:attr(data-item-count);display:block;text-align:center;opacity:.5;min-width:2em;}
.ItemMenu .bt:hover{background-color:var(--SiteTHM-A10);}
.ItemMenu .bt.on{background-color:var(--SiteTHM-A10);font-weight:var(--SiteFW-B);}
.ItemMenu .bt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}


#hot_game_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(24em,1fr));gap:1em;--W:10em;}
#hot_game_list .game{display:grid;grid-template-columns:auto 1fr;border-radius:calc(var(--W) / 10);color:var(--color);box-shadow:var(--color-img-bdc) 0 0 0 1px;background-color:var(--background-color);background-size:cover;background-position:center;background-blend-mode:soft-light;overflow:hidden;}
#hot_game_list .img{width:var(--W);height:calc(var(--W) / 3 * 4);border-radius:calc(var(--W) / 10);background:var(--background-color-L4,#fff);overflow:hidden;}
#hot_game_list .img img{display:block;width:100%;height:100%;object-fit:cover;}
#hot_game_list .T{display:flex;flex-direction:column;gap:1em;padding:1.5em;overflow:hidden;}
#hot_game_list .name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);}
#hot_game_list .info{display:flex;flex-wrap:wrap;gap:.25em;opacity:.75;}
#hot_game_list .info span{font-size:var(--SiteFS-S);}
#hot_game_list .info span:not(:last-child)::after{content:' / ';opacity:.5;margin-inline:.25em;}

#game_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--W) + 2em),1fr));gap:1em;--W:10em;}
#game_list .game{display:flex;flex-direction:column;gap:1em;color:inherit;transition:color 300ms;}
#game_list .game:hover{color:var(--SiteTHM);}
#game_list .img{width:var(--W);height:calc(var(--W) / 3 * 4);border-radius:calc(var(--W) / 10);background:var(--background-color-L4,#fff);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 0 0 1px;overflow:hidden;}
#game_list .img img{display:block;width:100%;height:100%;object-fit:cover;}
#game_list .T{display:flex;flex-direction:column;gap:.5em;}
#game_list .name{font-weight:var(--SiteFW-B);}
#game_list .info{font-size:var(--SiteFS-S);color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#game_list .info span{display:inline-block;vertical-align:top;}
#game_list .info span:not(:last-child)::after{content:' / ';opacity:.5;}
@media only screen and (max-width:480px){
	#hot_game_list,
	#game_list{--W:8em;}
	#game_list .game{align-items:center;text-align:center;}
}


/*game home*/
#game_cover{color:var(--color);background:var(--background-color) linear-gradient(calc(var(--angle-reverse,1) * 135deg),hsl(var(--offset-h1) var(--offset-s1) var(--offset-l1)),hsl(var(--offset-h2) var(--offset-s2) var(--offset-l2))) center/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));mask-image:linear-gradient(90deg,rgba(0 0 0/0),rgba(0 0 0/50%),rgba(0 0 0/0));}
#game_cover>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;gap:var(--spacing) calc(var(--spacing) * 1.5);align-items:end;position:relative;}

#game_cover .cover{margin-block-end:calc(var(--spacing) * -2);}
#game_cover .cover .img{--W:15em;width:var(--W);height:calc(var(--W) / 3 * 4);border-radius:calc(var(--W) / 10);overflow:hidden;box-shadow:var(--color-img-bdc) 0 0 0 1px,rgba(0 0 0/10%) 0 0 2em;background:var(--body-text-color-a5,rgba(0 0 0/5%));}
#game_cover .cover .img img{display:block;width:100%;height:100%;object-fit:cover;}

#game_cover .info{display:flex;flex-wrap:wrap;gap:1em var(--spacing);}
#game_cover .name{flex:auto;width:100%;}
#game_cover .name h1{font-size:var(--SiteFS-XXXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
#game_cover .property{display:flex;flex-wrap:wrap;gap:.5em;}
#game_cover .property span:not(:last-child){display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5em;}
#game_cover .property span:not(:last-child)::after{content:'/';opacity:.5;}
#game_cover .platform{display:flex;flex-wrap:wrap;gap:.5em;}
#game_cover .platform span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;}
#game_cover .platform span::before{content:'';display:block;font-size:1.5em;width:1em;height:1em;background:url('../images/platform_icons-91b7acd68a.svg') no-repeat calc((var(--x,10) - 1) * -1em) calc((var(--y,5) - 1) * -1em)/10em 5em;filter:invert(var(--lightness-trend,0));}
#game_cover .platform span:not(:last-child){grid-template-columns:auto 1fr auto;}
#game_cover .platform span:not(:last-child)::after{content:'/';opacity:.5;margin-inline-start:.5em;}
@media only screen and (max-width:1280px){
	#game_cover .cover .img{--W:12em;}
}
@media only screen and (max-width:1000px){
	#game_cover .name h1{font-size:var(--SiteFS-XXL);}
	#game_cover .property{font-size:var(--SiteFS-S)}
	#game_cover .platform{font-size:var(--SiteFS-S)}
}
@media only screen and (max-width:800px){
	#game_cover>.inner{gap:1em var(--spacing);align-items:start;max-width:calc(var(--spacing) * 2 + 40em);padding-block-end:calc(var(--spacing) * 2);}
	#game_cover .cover{margin:unset;}
	#game_cover .cover .img{--W:10em;}
}
@media only screen and (max-width:480px){
	#game_cover .info{flex-direction:column;}
}


#game_content{flex:auto;padding-block-start:var(--spacing);}
#game_content>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;}
#game_content_tab{display:none;}
@media only screen and (min-width:1001px){
	#game_content>.inner{display:grid;grid-template-columns:clamp(30em,33%,35em) 1fr;grid-template-rows:auto auto 1fr;gap:var(--spacing) calc(var(--spacing) * 1.5);}
	#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:var(--spacing) calc(var(--spacing) * 1.5);}
}
@media only screen and (max-width:1000px){
	#game_content_tab.float{}
	#game_content_tab.float>.inner{visibility:visible;opacity:1;transform:none;transition:opacity 300ms,transform 300ms;}
	#game_content_tab{display:block;position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px);inset-inline:0;z-index:3;height:0;}
	#game_content_tab>.inner{display:flex;align-items:center;justify-content:center;overflow:hidden;overflow-x:auto;scroll-snap-type:x mandatory;background-color:var(--background-color-L2,#fff);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0 inset,var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0;visibility:hidden;opacity:0;transform:translateY(-2em);}
	#game_content_tab .tab{display:flex;align-items:center;height:5em;padding-inline:var(--spacing);color:inherit;position:relative;scroll-snap-align:center;}
	#game_content_tab .tab span{display:block;white-space:nowrap;}

	#game_content>.inner{display:flex;flex-direction:column;gap:var(--spacing);}
}
@media only screen and (max-width:800px){
	#game_content{padding:unset;}
	#game_content>.inner{max-width:40em;padding-inline:0;gap:1em;}
}
@media only screen and (max-width:480px){
	#game_content_tab>.inner{justify-content:start;}
}


#game_explain{}
#game_explain>.inner{}
#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;}
#game_channel{display:flex;flex-direction:column;gap:1em;}
#game_channel h2{font-size:var(--SiteFS-XL);font-weight:var(--SiteFW);}
#game_channel .youtube-player{margin:unset;max-width:40em;}
@media only screen and (max-width:1280px){
	#game_explain .youtube-player{max-width:40em;}
}
@media only screen and (max-width:1000px){
	#game_explain{scroll-margin-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));}
}
@media only screen and (max-width:800px){
	#game_explain{position:relative;margin-block-start:calc(var(--spacing) * -2);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1,#fff);}
	#game_explain:not(:has(>.inner>*)){display:none;}
	#game_explain:not(:has(>.inner>*))+*{margin-block-start:calc(var(--spacing) * -2);position:relative;}
}

#game_topup,
#game_card{display:flex;flex-direction:column;gap:1em;}
#game_topup h2,
#game_card h2{font-size:var(--SiteFS-XL);font-weight:var(--SiteFW);}
#game_topup .ItemList,
#game_card .ItemList{background:var(--background-color-L3,#fff);padding:var(--spacing);border-radius:1em;--itemlist-gap:1em 1.5em;}
@media only screen and (max-width:1000px){
	#game_card,
	#game_topup{scroll-margin-block-start:calc(var(--main-nav-height) * 1px + var(--spacing) + 5em);}
}
@media only screen and (max-width:800px){
	#game_topup,
	#game_card{gap:var(--spacing);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1,#fff);}
	#game_topup .ItemList,
	#game_card .ItemList{background:unset;padding:0;border-radius:unset;}
}


#game_news{display:flex;flex-direction:column;gap:1em;}
#game_news h2{font-size:var(--SiteFS-XL);font-weight:var(--SiteFW);}
#game_news .NewsList{--newslist-column:20em;}
@media only screen and (max-width:1000px){
	#game_news{scroll-margin-block-start:calc(var(--main-nav-height) * 1px + var(--spacing) + 5em);}
}
@media only screen and (max-width:800px){
	#game_news{gap:var(--spacing);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1,#fff);}
	#game_news .NewsList{--newslist-column:15em;}
}