@charset "utf-8";

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;}
		}
	}
}


h1{font-size:clamp(2em,5vw,3em);}
h2{font-size:clamp(1.5em,4.5vw,2em);}
h3{font-size:clamp(1.166667em,3vw,1.5em);}


#promotion_cover>.inner,
#promotion_content>.inner,
#promotion_tnc>.inner,
#promotion_btc>.inner{display:flex;flex-direction:column;gap:var(--spacing);max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;overflow:hidden;}


#promotion_cover{
	.art{
		& h1{text-align:center;}
	}
	#promotion_countdown{display:flex;flex-direction:column;gap:var(--spacing);align-items:center;
		#promotion_countdown_title{
			&>span{font-size:clamp(1.166667em,3vw,1.5em);font-weight:var(--SiteFW-EB);text-transform:uppercase;
				&[icon]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;
					&::before{content:attr(icon);font-size:1.5em;}
				}
			}
		}
		#promotion_timer{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;width:min(30em,100%);
			&>div{display:flex;flex-direction:column;gap:.5em;text-align:center;padding:1em;background-color:var(--background-color-L1);
				&::before{display:block;font-size:clamp(1.5em,4.5vw,2em);font-weight:var(--SiteFW-EB);line-height:1;}
				&::after{content:attr(data-title);display:block;color:var(--body-text-color-a50);text-transform:capitalize;white-space:nowrap;line-height:1;font-size:var(--SiteFS-S);}
				&[data-title="day"]::before{counter-reset:days var(--PromotionTimer-days,0);content:counter(days);}
				&[data-title="hour"]::before{counter-reset:hours var(--PromotionTimer-hours,0);content:counter(hours);}
				&[data-title="minute"]::before{counter-reset:minutes var(--PromotionTimer-minutes,0);content:counter(minutes);}
				&[data-title="second"]::before{counter-reset:seconds var(--PromotionTimer-seconds,0);content:counter(seconds);}
			}
			@media only screen and (max-width: 480px){width:min(25em,100%);
				&>div{padding:.75em .5em;}
			}
		}
	}
}


#promotion_winner{display:flex;flex-direction:column;gap:var(--spacing);
	& h3[icon]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;
		&::before{content:'celebration';font-size:1.5em;align-self:start;}
	}
	.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1em var(--spacing);padding:var(--spacing);background-color:var(--background-color-L1);
		.winner{display:grid;grid:"avatar name" "avatar entry"/auto 1fr;column-gap:1em;
			.avatar{grid-area:avatar;width:3em;height:3em;background-color:var(--body-background-color);box-shadow:var(--body-text-color-a10) 0 0 0 1px;border-radius:100%;overflow:hidden;
				&>img{display:block;width:100%;height:100%;object-fit:cover;}
			}
			.name{grid-area:name;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
			.entry{grid-area:entry;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color:var(--body-text-color-a50);font-size:var(--SiteFS-S);}
		}
	}
}


#promotion_rules_steps{display:flex;gap:var(--spacing);margin-block:var(--spacing);
	.step{flex:1;display:flex;flex-direction:column;align-items:center;gap:1em;text-align:center;
		&::before{content:'';aspect-ratio:var(--aspect-ratio,1);width:min(15em,100%);background-color:var(--step-bgc,var(--body-text-color-a5,rgba(0 0 0/5%)));background-image:var(--step-img,url('../images/placeholder/materialpic-7c4b3c1290.svg'));background-repeat:no-repeat;background-position:center;background-size:contain;}
		& span{font-weight:var(--SiteFW-EB);}
	}
	@media only screen and (max-width: 480px){flex-direction:column;gap:1em;width:min(25em,100%);margin-inline:auto;
		.step{display:grid;grid-template-columns:6em 1fr;gap:var(--spacing);text-align:start;}
	}
}

#promotion_task{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing);
	.task{display:flex;flex-direction:column;gap:1em;
		.title{text-align:center;
			& span{color:var(--body-text-color-a50);}
		}
		&:nth-child(1) .list{grid-template-columns:repeat(4,1fr);}
		&:nth-child(2) .list{grid-template-columns:repeat(4,1fr);}
		.list{display:grid;grid-template-columns:var(--columns,repeat(auto-fill,minmax(var(--unit-size,10em),1fr)));gap:1px;padding:1px;background-color:var(--background-color-L1);
			.item{display:flex;flex-direction:column;gap:2px;color:inherit;
				.img{padding-block-start:100%;background:var(--body-text-color-a5) url('../images/placeholder/materialpic-7c4b3c1290.svg') no-repeat center/contain;}
				.sku{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;height:var(--CPT-US);padding:.333334em 1em;background-color:var(--body-text-color-a5);
					&::before{content:attr(icon);font-size:1em;order:9;}
					&>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:2.5em;line-height:1.25;}
				}
			}
		}
	}
	@media only screen and (max-width: 1000px){display:flex;flex-direction:column;}
	@media only screen and (max-width: 480px){
		.task{
			.list{display:flex;flex-direction:column;
				.item{
					.img{display:none;}
					.sku{
						&::before{display:none;}
						&::after{content:'Top up';}
					}
				}
			}
		}
	}
}


#promotion_content article.docs{font-size:var(--SiteFS-L);
	@media only screen and (max-width: 480px){font-size:var(--SiteFS);}
}


#promotion_btc{position:sticky;inset-block-end:0;z-index:1;
	&>.inner{background-color:var(--background-color-L2);}
}
#entry_btc{display:flex;flex-direction:column;gap:1em;
	&>.inner{display:flex;align-items:center;justify-content:center;gap:var(--spacing);min-height:var(--CPT-US);}
	.timer{display:flex;align-items:center;gap:var(--gap,.5em);padding:1em;background-color:var(--body-text-color-a5);border-radius:.5em;
		&>div{display:flex;align-items:center;gap:var(--gap,.5em);
			&::before{display:block;font-size:clamp(1.166667em,3vw,1.5em);font-weight:var(--SiteFW-EB);line-height:1;min-width:1.333334em;text-align:center;white-space:nowrap;}
			&:not(:last-child)::after{content:':';font-weight:var(--SiteFW-EB);}
			&[data-title="day"]::before{counter-reset:days var(--PromotionTimer-days,0);content:counter(days);}
			&[data-title="hour"]::before{counter-reset:hours var(--PromotionTimer-hours,0);content:counter(hours);}
			&[data-title="minute"]::before{counter-reset:minutes var(--PromotionTimer-minutes,0);content:counter(minutes);}
			&[data-title="second"]::before{counter-reset:seconds var(--PromotionTimer-seconds,0);content:counter(seconds);}
		}
	}
	.btw:is(.login,.convert){--CPT-US:3em;--font-size:1.333334em;text-transform:uppercase;font-weight:var(--SiteFW-EB);}
	.chance,.entry{display:flex;flex-direction:column;gap:.25em;text-align:center;
		& b{font-size:2em;font-weight:var(--SiteFW-EB);line-height:1;}
		& span{font-size:var(--SiteFS-S);text-transform:uppercase;}
	}
	@media only screen and (max-width: 480px){
		&>.inner{justify-content:space-evenly;}
		.timer{padding:.75em 1em;--gap:.25em;}
	}
}


#promotion_tnc{
	& article.docs{font-size:var(--SiteFS-L);}
	@media only screen and (max-width: 480px){
		& article.docs{font-size:var(--SiteFS);}
	}
}


/* Promotion share */
.tukibox:has(#tukibox_PromotionShare){--tukibox-width:60em;
	#tukibox_PromotionShare{
		.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);}
		}
	}
}