@charset "utf-8";

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

#game_list_content{flex:auto;
	&>.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));
		&>.inner{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:1em;background:var(--background-color-L0);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);align-self:stretch;
		&>.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:1000px){
		&>.inner{display:block;}
		.product_list_menu_ctrl_on,
		.product_list_menu_ctrl_off{display:inherit;}
		#game_list_menu{position:fixed;inset:0;z-index:999;background:var(--background-color-mask-a50);
			&:not(.show){display:none;}
			&.show{opacity:1;transition:opacity 300ms;transition-behavior:allow-discrete;
				@starting-style{opacity:0;}
				&>.inner{transform:translateX(0);transition:transform 300ms;transition-behavior:allow-discrete;
					@starting-style{transform:translateX(calc(var(--translate-reverse,1) * -5em));}
				}
			}
			&>.product_list_menu_ctrl_off{position:absolute;inset:0;z-index:-1;}
			&>.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;}
		}
		#game_list_title{display:flex;flex-wrap:wrap;gap:1em var(--spacing);align-items:center;}
	}
	@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;}
		}
	}
}
@media only screen and (max-width:1000px){body:has(#game_list_menu.show){overflow:hidden;}}


/* game menu */
.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) 0 1px 0;
	& h3{font-size:var(--SiteFS);font-weight:var(--SiteFW);}
	.btw{--icon-opacity:.5;}
}
.ItemMenu{display:flex;flex-direction:column;gap:1px;padding:1em;overflow:hidden;overflow-y:auto;
	.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;
		&::after{content:attr(data-item-count);display:block;text-align:center;color:var(--body-text-color-a50);min-width:2em;}
		&>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		&[data-platform-icon]{
			&:hover{background-color:var(--SiteTHM-A10);}
			&.on{background-color:var(--SiteTHM-A10);font-weight:var(--SiteFW-B);}
		}
	}
}
/* game list */
.ItemList{
	&:not(:has(img.GamePic)){--itemlist-column-size:15em;}
	&:has(img.GamePic){--itemlink-img-w:10em;--itemlist-column-size:calc(var(--itemlink-img-w) + 1em);--itemlist-gap:var(--spacing);}
	@media only screen and (max-width:480px){
		&:has(img.GamePic){--itemlist-column-fill:2;--itemlist-column-count:1fr;--itemlink-img-w:8em;}
		.ItemLink:has(img.GamePic){justify-items:center;text-align:center;
			.T{align-items:center;}
			.tags{justify-content:center;}
		}
	}
	&:is(#hot_game_list){--itemlist-column-size:20em;--itemlist-gap:1em;
		.ItemLink{display:grid;grid-template-columns:auto 1fr;grid-template-rows:unset;gap:unset;align-items:unset;border-radius:calc(var(--itemlink-img-w,10em) / 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;
			.T{padding:1.5em;
				.name{font-size:var(--SiteFS-L);}
				.tags>span{color:inherit;opacity:.7;}
				.data{margin-block-start:auto;display:flex;flex-wrap:wrap;gap:.5em 1em;
					&>span{opacity:.7;
						&[icon]{display:grid;grid-template-columns:auto 1fr;gap:.5em;
							&::before{content:attr(icon);display:block;font-size:1.5em;}
						}
					}
				}
			}
		}
		@media only screen and (max-width:480px){--itemlist-column-fill:1;--itemlist-column-count:1fr;
			.ItemLink{justify-items:unset;text-align:start;
				.T{align-items:start;
					.name{font-size:var(--SiteFS);}
				}
			}
		}
	}
}


/*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;
	&>.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));}
	&>.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);align-items:end;position:relative;aspect-ratio:var(--aspect-ratio,inherit);}
	.cover{margin-block-end:calc(var(--spacing) * -1 - 1em);
		.img{--cover-width:12em;width:var(--cover-width);height:calc(var(--cover-width) / 3 * 4);border-radius:calc(var(--cover-width) / 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);
			&>img{display:block;width:100%;height:100%;object-fit:cover;}
		}
	}
	.info{display:flex;flex-wrap:wrap;gap:1em var(--spacing);
		.name{flex:auto;width:100%;
			& h1{font-size:var(--SiteFS-XXXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
		}
		.property{display:flex;flex-wrap:wrap;gap:.5em;
			& span:not(:last-child){display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5em;
				&::after{content:'/';opacity:.5;}
			}
		}
		.platform{display:flex;flex-wrap:wrap;gap:.5em;
			& span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;
				&::before{--platform-icon-size:1.5em;filter:invert(var(--lightness-trend));}
				&:not(:last-child){grid-template-columns:auto 1fr auto;
					&::after{content:'/';opacity:.5;margin-inline-start:.5em;}
				}
			}
		}
	}
	@media only screen and (max-width:1000px){
		.info{
			.name h1{font-size:var(--SiteFS-XXL);}
			.property{font-size:var(--SiteFS-S);}
			.platform{font-size:var(--SiteFS-S);}
		}
	}
	@media only screen and (max-width:800px){
		&>.inner{column-gap:var(--spacing);align-items:start;max-width:calc(var(--spacing) * 2 + 40em);padding-block-end:calc(var(--spacing) * 2);}
		.cover{margin:unset;
			.img{--cover-width:10em;}
		}
		.info .name h1{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;}

	}
	@media only screen and (max-width:480px){
		.cover .img{--cover-width:8em;}
		.info{flex-direction:column;
			.name h1{font-size:var(--SiteFS-XL);}
		}
	}
}
#game_content{flex:auto;
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;}
	@media only screen and (min-width:1001px){
		&>.inner{display:grid;align-items:start;gap:var(--spacing);
			&:has(#game_explain:only-child){grid-template-columns:1fr;}
			&:has(#game_explain~div){grid-template-columns:clamp(30em,33%,35em) 1fr;
				&:has(#game_explain~div:nth-child(3)){grid-template-rows:auto 1fr;
					#game_explain{grid-row:span 2;}
				}
				&:has(#game_explain~div:nth-child(4)){grid-template-rows:auto auto 1fr;
					#game_explain{grid-row:span 3;}
				}
				&:has(#game_explain~div:nth-child(5)){grid-template-rows:auto auto auto 1fr;
					#game_explain{grid-row:span 4;}
				}
			}
		}
	}
	@media only screen and (max-width:1000px){
		&>.inner{display:flex;flex-direction:column;gap:var(--spacing);}
	}
	@media only screen and (max-width:800px){
		&>.inner{max-width:40em;padding-inline:0;gap:1em;}
	}
}

#game_content_tab{
	@media only screen and (min-width:1001px){display:none;}
	@media only screen and (max-width:1000px){display:block;position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px);inset-inline:0;z-index:3;height:0;
		&>.inner{display:flex;align-items:center;justify-content:center;overflow:hidden;overflow-x:auto;scroll-snap-type:x mandatory;background-color:var(--background-color-L3);box-shadow:var(--body-text-color-a5) 0 1px 0 inset,var(--body-text-color-a5) 0 1px 0;visibility:hidden;opacity:0;transform:translateY(-2em);}
		&.float{
			&>.inner{visibility:visible;opacity:1;transform:none;transition:opacity 300ms,transform 300ms;}
		}
		.tab{display:flex;align-items:center;height:5em;padding-inline:var(--spacing);color:inherit;position:relative;scroll-snap-align:center;
			& span{display:block;white-space:nowrap;}
		}
	}
	@media only screen and (max-width:480px){
		&>.inner{justify-content:start;}
	}
}
#game_explain{
	& article.docs{margin-block-end:var(--spacing);}
	#game_channel{display:flex;flex-direction:column;gap:1em;
		& h2{font-size:var(--SiteFS-L);font-weight:var(--SiteFW);}
		& .youtube-player{margin:unset;max-width:40em;}
	}
	@media only screen and (max-width:1280px){
		.youtube-player{max-width:40em;}
	}
	@media only screen and (max-width:1000px){scroll-margin-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));}
	@media only screen and (max-width:800px){position:relative;margin-block-start:calc(var(--spacing) * -2);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1);
		&:not(:has(>.inner>*)){display:none;
			&+*{margin-block-start:calc(var(--spacing) * -2);position:relative;}
		}
	}
}
#game_card,#game_topup,#game_cdk,#game_news{display:flex;flex-direction:column;gap:var(--spacing);background:var(--background-color-L3);padding:var(--spacing);border-radius:1em;
	& h2{font-size:var(--SiteFS-L);font-weight:var(--SiteFW);
		& b{font-weight:var(--SiteFW-EB);}
	}
	.NewsList{--newslist-column:20em;}
	@media only screen and (max-width:1000px){scroll-margin-block-start:calc(var(--main-nav-height) * 1px + var(--spacing) + 5em);}
	@media only screen and (max-width:800px){
		.NewsList{--newslist-column:15em;}
	}
}