@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

html, body {
	margin: 0;
	height: 100%;
	background: #000;
	overflow: hidden;
}

#scoreboard-frame {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

#solve-overlay {
	position: fixed;
	inset: 0;
	background: #050505;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 10;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

#solve-overlay.visible {
	opacity: 1;
}

#solve-text {
	text-align: center;
	font-family: "Source Code Pro";
	letter-spacing: 0.05em;
	color: white;
}

#solve-first {
	display: none;
}

#solve-first.visible {
	display: flex;
	height: 35vh;
	margin: -5vh 0 -2vh 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#solve-first img {
	z-index: 99999;
	position: relative;
	height: 100%
}

#solve-team {
	white-space: nowrap;
	font-size: 15vh;
	font-weight: 900;
	letter-spacing: 4px;
}

#solve-value {
	margin-top: 2vh;
	font-weight: 700;
	font-size: 10vh;
}

#solve-challenge {
	margin-top: 2vh;
	font-weight: 400;
	font-size: 10vh;
	letter-spacing: -0.1em;
}



.glitch {
	position: relative;
}

.glitch::before,
.glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #050505;
}

.glitch::before {
	left: 3px;
	text-shadow: -2px 0 #ff00c1;
	clip-path: inset(44% 0 61% 0);
	animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch::after {
	left: -3px;
	text-shadow: -2px 0 #00fff9;
	clip-path: inset(54% 0 10% 0);
	animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
	0% { clip-path: inset(80% 0 10% 0); }
	20% { clip-path: inset(10% 0 70% 0); }
	40% { clip-path: inset(50% 0 20% 0); }
	60% { clip-path: inset(10% 0 60% 0); }
	80% { clip-path: inset(30% 0 40% 0); }
	100% { clip-path: inset(60% 0 5% 0); }
}



.scanlines {
	overflow: hidden;
	mix-blend-mode: difference;
}

.scanlines::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 150%;
	top: -25%;
	left: 0;
	background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.02) 0.25%, transparent 0.5%);
	animation: fudge 5s linear infinite;
}

@keyframes fudge {
	from {
		transform: translate(0px, 0);
	}
	to {
		transform: translate(0px, 5%);
	}
}



.sparkler-light {
	width: 9rem;
	height: 100%;
	position: relative;
	top: -10vh;
}

.spark {
	position: absolute;
	width: 0.1rem;
	height: 0.1rem;
	bottom: 4.3rem;
	left: 4.35rem;
	transform: rotate(var(--spark-rotate));
}

.spark::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	width: 0.1rem;
	height: 2rem;
	border-radius: 0.1rem;
	opacity: 0;
	background-color: white;
	transform-origin: bottom center;
	animation: sparkler-sparkle var(--spark-duration) infinite linear;
	animation-delay: var(--spark-delay);
}

@keyframes sparkler-light-pulsating {
	0%   {
		transform: scale(1);
	}
	25%   {
		transform: scale(1.1);
	}
	75%   {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes sparkler-sparkle {
	0%   {
		transform: translateY(-0.5vh) scaleY(0.25);
		opacity: 0;
	}
	10%   {
		transform: translateY(-3vh) scaleY(0.5);
		opacity: 0.35;
	}
	30%   {
		transform: translateY(-6vh) scaleY(0.5);
		opacity: 0.7;
	}
	50% {
		transform: translateY(-10vh) scaleY(1.5);
		opacity: 0.7;
	}
	51% {
		opacity: 0;
		transform: translateY(-4vh) scaleY(1);
	}
	100% {
		opacity: 0;
		transform: translateY(0) scaleY(0.25);
	}
}