body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

.the {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 32px 64px;
	font-size: 2rem;
	border-radius: 1000px;
}

.score {
	position: absolute;
	top: calc(50% - 128px);
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.5rem;
	font-weight: bold;
}

.upgrades {
	position: absolute;
	bottom: 128px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: center;
}

.upgrade-btn {
	font-size: 1.2rem;
	padding-inline: 25px;
	height: 64px;
	border-radius: 12px;
	font-weight: bold;
	cursor: pointer;
	position: relative;
}

.delta-pop {
	position: absolute;
	font-weight: bold;
	font-size: 1rem;
	color: green;
	pointer-events: none;
	user-select: none;
	animation: floatUp 0.8s forwards;
}

.upgrade-btn:hover > .tooltip {
	opacity: .5;
}

.tooltip {
	transition: all .2s;
	opacity: 0;
	position: absolute;
	width: fit-content;
	top: -48px;
	left: 50%;
	transform: translateX(-50%);
}

#pointer {
	position: absolute;
	display: none;
	width: 50px;
	bottom: -40px;
	left: 20%;
}

@keyframes floatUp {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-40px); }
}