@charset "UTF-8";

@media (prefers-color-scheme: dark),(prefers-color-scheme: light) {
	:root{
		--CPT-THM-R: 0;
		--CPT-THM-G: 191;
		--CPT-THM-B: 255;
		--CPT-THM-H: 195.06;
		--CPT-THM-S: 100%;
		--CPT-THM-L: 50%;
		--SiteTHM-text-invert: black;

		--body-background-color: hsl(var(--CPT-THM-H,0) calc(var(--CPT-THM-S,100%)/10) 10%);
		--background-color-L0: hsl(var(--CPT-THM-H,0) calc(var(--CPT-THM-S,100%)/10) 24%);
		--background-color-L1: hsl(var(--CPT-THM-H,0) calc(var(--CPT-THM-S,100%)/10) 21%);
		--background-color-L2: hsl(var(--CPT-THM-H,0) calc(var(--CPT-THM-S,100%)/10) 18%);
		--background-color-L3: hsl(var(--CPT-THM-H,0) calc(var(--CPT-THM-S,100%)/10) 15%);

		--body-text-color: rgba(255 255 255/100%);
		--body-text-color-a0: rgba(255 255 255/0%);
		--body-text-color-a5: rgba(255 255 255/5%);
		--body-text-color-a10: rgba(255 255 255/10%);
		--body-text-color-a25: rgba(255 255 255/25%);
		--body-text-color-a50: rgba(255 255 255/50%);
		--body-text-color-a75: rgba(255 255 255/75%);

		--color-warning-r: 238;
		--color-warning-g: 130;
		--color-warning-b: 238;
		--color-warning-h: 300;
		--color-warning-s: 76.06%;
		--color-warning-l: 72.16%;

		--color-alert-r: 255;
		--color-alert-g: 69;
		--color-alert-b: 0;
		--color-alert-h: 16.24;
		--color-alert-s: 100%;
		--color-alert-l: 50%;

		--color-complete-r: 154;
		--color-complete-g: 205;
		--color-complete-b: 50;
		--color-complete-h: 79.74;
		--color-complete-s: 60.78%;
		--color-complete-l: 50%;

		--color-promotion-r: 154;
		--color-promotion-g: 205;
		--color-promotion-b: 50;
		--color-promotion-h: 79.74;
		--color-promotion-s: 60.78%;
		--color-promotion-l: 50%;

		--CPT-BDC: rgba(255 255 255/10%);

		--CPT-COLOR: rgba(255 255 255/100%);
		--CPT-COLOR-A5: rgba(255 255 255/5%);
		--CPT-COLOR-A10: rgba(255 255 255/10%);
		--CPT-COLOR-A25: rgba(255 255 255/25%);
		--CPT-COLOR-A50: rgba(255 255 255/50%);
		--CPT-COLOR-A75: rgba(255 255 255/75%);

		--CPT-BGC: rgba(255 255 255/10%);

		--brightness-filter: 1;
		color-scheme: dark;
	}
	[data-hue] {
		--d-r: 0;
		--d-g: 0;
		--d-b: 0;
		--d-h: 0;
		--d-s: 0%;
		--d-l: 0%;
	}
}

body{--MaxContentWidth:100em;}

#site_header{transition:box-shadow 300ms,background-color 300ms;
	&:not(.float){background-color:transparent;}
	.main_nav_logo{display:none;
		@media only screen and (max-width:1000px){display:block;width:var(--CPT-US);height:var(--CPT-US);background:url('../images/seagm_logo_2020_shield-a28166db3a.svg') no-repeat center/auto 2em;
			&>span{display:none;}
		}
	}
}

#content>.inner{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);}


#landing_content_intro{--ui-size:clamp(1em,2vw,2em);
	&>.inner{width:min(80em,100%);min-height:min(40em,calc(var(--VHeight) / 2));margin-inline:auto;display:flex;flex-direction:column;justify-content:center;gap:var(--spacing);}
	& h1{font-size:calc(var(--ui-size) * 1.666667);}
	& h2{font-size:calc(var(--ui-size) * 1.166667);}
	.intro{display:flex;flex-direction:column;gap:1em;
		&>p{margin:unset;}
	}
	@media only screen and (max-width: 480px){
		&>.inner{min-height:unset;}
	}
}
#landing_content_item{
	&>.inner{display:flex;flex-direction:column;gap:var(--spacing);}
	@media only screen and (max-width:480px){margin-inline:calc(var(--spacing) * -1);}
	.LandingItemList,.LandingGameList,.LandingSkuList{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1);
		& h3{font-size:var(--SiteFS-XL);}
	}
	.ItemList{
		&:not(:has(img:is(.CardPic,.MaterialPic))){--itemlist-column-size:20em;}
		&:has(img:is(.CardPic,.MaterialPic)){--itemlist-column-size:13em;
			&:has(img.CardPic){--itemlink-img-w:10em;}
			&:has(img.MaterialPic){--itemlink-img-w:11.5em;}
		}
		@media only screen and (max-width:480px){
			&:has(img:is(.CardPic,.MaterialPic)){--itemlist-column-fill:2;--itemlist-column-count:1fr;
				&:has(img.CardPic){--itemlink-img-w:8em;}
				&:has(img.MaterialPic){--itemlink-img-w:9.166667em;}
				.ItemLink{justify-items:center;text-align:center;
					.T{align-items:center;}
					.tags{justify-content:center;}
				}
			}
		}
		.ItemLink .T{
			.data{display:flex;flex-wrap:wrap;gap:.5em 1em;height:1.5em;overflow:hidden;
				&>span{color:var(--body-text-color-a50);
					&[icon]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;
						&::before{content:attr(icon);font-size:1.5em;}
					}
				}
			}
		}
	}
}
#landing_content_description{padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1);
	& article{font-size:var(--SiteFS-L);
		& h3{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;margin-block:1.5em;
			&:first-child{margin-block-start:.5em;}
			&::before{content:'';display:block;width:1.5em;height:1.5em;background:var(--landing-icon2,var(--landing-icon,url('../images/seagm_logo_2020_shield_white-3d42ff0b91.svg'))) no-repeat center/contain;align-self:start;}
			&~*:not(h3){margin-inline-start:3.333334em;}
		}
	}
	@media only screen and (max-width:480px){margin-inline:calc(var(--spacing) * -1);
		& article{font-size:var(--SiteFS);}
	}
}
#landing_content_news{padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1);
	@media only screen and (max-width:480px){margin-inline:calc(var(--spacing) * -1);}
}


/* Ladding share */
.tukibox:has(#tukibox_LadingShare){--tukibox-width:60em;
	#tukibox_LadingShare{
		.img{aspect-ratio:1200/630;margin-block:1px;background-color:var(--background-color-L3);box-shadow:var(--body-text-color-a10) 0 0 0 1px;border-radius:.5em;overflow:hidden;
			&>img{display:block;width:100%;height:100%;object-fit:cover;}
		}
		.info{display:flex;flex-direction:column;gap:1em;
			.headline1{font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);}
			.headline2{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:4.5em;color:var(--body-text-color-a50);}
		}
	}
}