* {
	box-sizing: border-box;
}

body {
	background:
		radial-gradient(circle at 18% 12%, rgba(83, 230, 255, 0.18), transparent 34%),
		radial-gradient(circle at 82% 10%, rgba(255, 205, 92, 0.12), transparent 30%),
		linear-gradient(180deg, #060e18 0%, #091522 52%, #130d1b 100%);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	max-width: 100%;

	font-family: Inter, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #fff4df;
}

h1, h2, h3 {
	font-weight: normal;
}
button {
	background: linear-gradient(180deg, #ffd36d, #ff934d);
	color: #1a1008;
	border: 0;
	padding: 12px 34px;
	border-radius: 999px;

	font-size: 1.35em;
	font-family: inherit;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0 14px 30px rgba(255, 147, 77, 0.24);
}
	.button:hover,
	button:hover {
		background: linear-gradient(180deg, #ffe08a, #ff9d5c);
		color: #1a1008;
	}

a {
	color: rgba(255, 244, 223, 0.72);
	text-decoration: none;
}
	a:hover {
		color: #fff4df;
	}
.clear {
	clear: both;
}

.container {
	position: relative;
	z-index: 100;
	width: 100%;
	max-width: 100%;
}

#stage {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
	filter: drop-shadow(0 0 24px rgba(83, 230, 255, 0.12));
	width: 100%;
	height: 100%;
}

#tip {
	position: absolute;
	left: 0;
	right: 0;
	top: 100px;
	margin: 0;

	color: rgba(255, 244, 223, 0.62);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

#start {
	position: relative;
	width: min(680px, calc(100vw - 32px));
	margin: 24vh auto 0 auto;
	border: 1px solid rgba(83, 230, 255, 0.2);
	border-radius: 18px;
	padding: clamp(24px, 5vw, 44px);
	text-align: center;
	background:
		linear-gradient(180deg, rgba(255, 244, 223, 0.11), rgba(255, 244, 223, 0.045)),
		rgba(7, 17, 27, 0.76);
	box-shadow:
		0 26px 76px rgba(0, 0, 0, 0.42),
		inset 0 1px 0 rgba(255, 244, 223, 0.08);
	backdrop-filter: blur(12px);
}
	#start h2 {
		margin: 0 0 14px;
		color: #fff4df;
		font-size: clamp(28px, 5vw, 52px);
		font-weight: 950;
		line-height: 1;
		text-transform: lowercase;
	}
	#start p {
		margin: 0 0 10px 0;
		color: rgba(255, 244, 223, 0.72);
		line-height: 1.55;
	}

#controls {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 120;
	width: min(190px, calc(100vw - 40px));
	border: 1px solid rgba(255, 244, 223, 0.14);
	border-radius: 16px;
	padding: 14px;
	background: rgba(7, 17, 27, 0.72);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
	backdrop-filter: blur(12px);
}
	#controls .opt {
		padding-top: 10px;
	}
	#controls .opt label {
		margin-top: 10px;
		cursor: pointer;
	}

#score {
	margin: 0 0 10px;
	color: #fff4df;
	font-size: 46px;
	font-weight: 950;
	line-height: 46px;
	text-align: center;
}

#notice {
	position: absolute;
	right: 0;
	top: 100px;
	left: 0;
	z-index: 1;
	font-size: 5em;
	text-align: center;
	color: #ccc;
	text-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
	display: none;
}

#stats {
	text-align: center;
	list-style-type: none;
	margin: 10px 0 0;
	padding: 0;
}
	#stats li {
		border: 1px solid rgba(255, 244, 223, 0.12);
		margin-bottom: 10px;
		border-radius: 10px;
		background: rgba(255, 244, 223, 0.06);
	}
	#stats h1 {
		margin: 0;
		padding: 7px 5px;
		color: #fff4df;
		font-size: 25px;
		font-weight: 900;
	}
	#stats label {
		background: rgba(83, 230, 255, 0.12);
		color: rgba(255, 244, 223, 0.72);
		font-size: 11px;
		padding: 5px;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

#controls .pause {
	margin-top: 30px;
	font-size: 11px;
	text-align: center;
}

.footer {
	position: fixed;
	bottom: 10px;
	left: 10px;
	text-align: center;
}

@media (max-width: 720px) {
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	#controls {
		left: 14px;
		right: 14px;
		top: 14px;
		width: auto;
		padding: 10px;
	}

	#stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
		min-width: 0;
	}

	#stats li {
		margin: 0;
	}

	#stats h1 {
		font-size: 18px;
	}

	#stats label {
		font-size: 9px;
	}

	#start {
		width: min(100%, calc(100vw - 24px));
		margin-top: 32vh;
		padding: 20px 14px;
	}

	#start h2 {
		font-size: clamp(26px, 10vw, 40px);
		overflow-wrap: anywhere;
	}

	#tip {
		top: 94px;
		padding-inline: 10px;
		font-size: 0.78rem;
		letter-spacing: 1px;
	}

	.footer {
		display: none;
	}
}

@media (max-width: 380px) {
	#controls {
		left: 10px;
		right: 10px;
		top: 10px;
		padding: 8px;
	}

	#stats {
		gap: 4px;
	}

	#stats h1 {
		font-size: 16px;
	}

	#stats label {
		font-size: 8px;
		letter-spacing: 0.04em;
	}
}