.retro-font {
	font-family: 'Press Start 2P', cursive;
}

@keyframes glitch {
	0% {
		transform: translate(0);
		text-shadow: -2px 0 #ff00c1, 2px 2px #0000ff;
	}
	25% {
		transform: translate(-2px, 2px);
		text-shadow: 2px -2px #ff00c1, -2px 2px #0000ff;
	}
	50% {
		transform: translate(2px, -2px);
		text-shadow: 2px 2px #ff00c1, -2px -2px #0000ff;
	}
	75% {
		transform: translate(-2px, -2px);
		text-shadow: -2px 2px #ff00c1, 2px -2px #0000ff;
	}
	100% {
		transform: translate(0);
		text-shadow: -2px 0 #ff00c1, 2px 2px #0000ff;
	}
}

@keyframes scanline {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100%);
	}
}

.scanline::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 5px;
	background: rgba(255, 255, 255, 0.1);
	animation: scanline 2s linear infinite;
}

.pixel-border {
	box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 0 6px #000;
	image-rendering: pixelated;
}

/* New animation styles */
@keyframes pixel-fade {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
		transform: scale(0.8);
	}
}

.pixel {
	position: absolute;
	width: 4px;
	height: 4px;
	background: #fff;
	animation: pixel-fade 1s infinite;
}

.loading-text {
	animation: loading-bounce 0.5s infinite alternate;
}

@keyframes loading-bounce {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-10px);
	}
}

/* Countdown styling */
.countdown {
	position: relative;
	display: inline-block;
	text-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00;
	animation: countdown-pulse 1s infinite alternate;
}

@keyframes countdown-pulse {
	from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(1.1);
		opacity: 0.8;
	}
}