@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-Semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('../fonts/Manrope-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

:root{
	--sky-top:#bfe0fb;
	--sky-mid:#e4f2fd;
	--sky-horizon:#fbfdff;
	--asphalt-1:#8790a1;
	--asphalt-2:#525a6c;
	--stand:#eef1f6;
	--stand-shade:#d7dce6;
	--stand-roof:#c3cadb;
	--line:#ffffff;
	--teal:#1fc7b3;
	--ink:#182238;
	--ink-dim:#71798e;
	--card:#ffffff;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
	width:100%; height:100%;
	overflow:hidden;
	background:var(--sky-mid);
	font-family:'Manrope', ui-sans-serif, system-ui, sans-serif;
	color:var(--ink);
	-webkit-tap-highlight-color:transparent;
	user-select:none;
	-webkit-user-select:none;
}

body{
	height:100vh; height:100dvh;
	display:flex; flex-direction:column;
	position:relative;
}

header{
	flex:0 0 auto;
	display:flex;
	justify-content:center;
	padding:clamp(14px,2.4vh,30px) clamp(12px,3vw,28px) clamp(6px,1vh,14px);
	position:relative;
	z-index:5;
}

.logo-bar{
	display:flex;
	align-items:center;
	gap:clamp(18px,4vw,38px);
}

.logo-bar .div{
	width:1px; align-self:stretch;
	background:linear-gradient(to bottom, transparent, rgba(24,34,56,.18), transparent);
}

.logo-bar img{
	display:block;
	height:clamp(34px,4.6vh,56px);
	width:auto;
}
.logo-bar img.zo{ height:clamp(38px,5.4vh,66px); }

main{
	flex:1;
	position:relative;
	min-height:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:clamp(6px,1vh,14px) clamp(4px,1vw,10px) 0;
	z-index:2;
}

.scene-wrap{
	position:relative;
	width:100%;
	height:100%;
	min-height:0;
	display:flex;
	align-items:center;
	justify-content:center;
}

#scene{
	width:100%;
	height:100%;
	min-height:0;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	border-radius:clamp(14px,2.2vh,26px);
}

#scene svg{
	width:100%;
	height:100%;
	overflow:visible;
	display:block;
}

.finish-msg{
	position:absolute;
	left:50%; top:24%;
	transform:translate(-50%,-40%);
	text-align:center;
	opacity:0;
	pointer-events:none;
	z-index:8;
	transition:opacity .8s ease, transform .8s ease;
}

.finish-msg.show{
	opacity:1;
	transform:translate(-50%,-50%);
}

.finish-msg .t1{
	font-size:clamp(26px,5vh,52px);
	font-weight:800;
	letter-spacing:.01em;
	color:var(--teal);
	text-shadow:0 4px 24px rgba(255,255,255,.9);
}

.control{
	position:absolute;
	left:50%; top:52%;
	width:0; height:0;
	z-index:9;
}

#startBtn{
	position:absolute;
	left:50%; top:50%;
	transform:translate(-50%,-50%);
	appearance:none; border:none; cursor:pointer;
	font-family:inherit;
	font-weight:800;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:#04241e;
	background:var(--teal);
	font-size:clamp(19px,3.1vh,30px);
	padding:clamp(15px,2.3vh,22px) clamp(38px,7vw,64px);
	border-radius:999px;
	white-space:nowrap;
	transition:transform .18s ease, box-shadow .3s ease, opacity .4s ease;
}
#startBtn::after{
	content:"";
	position:absolute; inset:-14px;
	border-radius:999px;
	animation:pulseRing 2.4s ease-out infinite;
	pointer-events:none;
}
@keyframes pulseRing{
	0%{ transform:scale(.94); opacity:.9; }
	80%{ transform:scale(1.16); opacity:0; }
	100%{ transform:scale(1.16); opacity:0; }
}
#startBtn:active{ transform:translate(-50%,-50%) scale(.95); }
#startBtn.hidden{
	opacity:0;
	pointer-events:none;
	transform:translate(-50%,-50%) scale(.8);
}

.countdown{
	position:absolute;
	left:50%; top:50%;
	width:clamp(120px,20vh,190px);
	height:clamp(120px,20vh,190px);
	border-radius:50%;
	background:radial-gradient(circle at 35% 30%, #ffffff 0%, #eaf7f5 55%, #d3ede8 100%);
	box-shadow:
		0 0 0 1px rgba(15,156,139,.25) inset,
		0 18px 40px rgba(24,34,56,.22),
		0 4px 60px rgba(31,199,179,.35);
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	transform:translate(-50%,-50%) scale(.7);
	pointer-events:none;
	transition:opacity .25s ease, transform .25s ease;
}
.countdown.show{
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
	pointer-events:auto;
}
.countdown span{
	font-size:clamp(52px,10vh,92px);
	font-weight:800;
	color:var(--teal);
	line-height:1;
}
.countdown.go span{
	font-size:clamp(30px,6vh,50px);
	letter-spacing:.02em;
}
.countdown .pop{
	animation:countPop .78s cubic-bezier(.2,1.4,.4,1);
}
@keyframes countPop{
	0%{ transform:scale(.35); opacity:0; }
	35%{ transform:scale(1.14); opacity:1; }
	60%{ transform:scale(1); }
	100%{ transform:scale(1); opacity:1; }
}

#resetBtn{
	position:fixed;
	right:clamp(10px,1.6vw,20px);
	bottom:clamp(10px,1.6vh,20px);
	width:clamp(36px,4.6vh,52px);
	height:clamp(36px,4.6vh,52px);
	border-radius:50%;
	border:1px solid rgba(24,34,56,.1);
	background:rgba(255,255,255,.85);
	color:var(--ink-dim);
	display:flex; align-items:center; justify-content:center;
	cursor:pointer;
	opacity:0;
	pointer-events:none;
	transform:scale(.85) rotate(-40deg);
	transition:opacity .5s ease, transform .5s ease;
	z-index:20;
	box-shadow:0 6px 18px rgba(24,34,56,.14);
}
#resetBtn.show{ opacity:.7; pointer-events:auto; transform:scale(1) rotate(0deg); }
#resetBtn:hover{ opacity:1; color:var(--ink); border-color:rgba(24,34,56,.25); }
#resetBtn svg{ width:52%; height:52%; }