@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
	--purple: #b14cff;
	--purple-dark: #8b2ed9;
	--purple-light: #d399ff;
	--bg: #0c0b12;
}

h1 {
	display: flex;
	justify-content: center;
	align-items: center;
}
body {
	position: relative;
	font-family: 'Rajdhani', sans-serif;
	background-color: var(--bg);
	color: #e5e5e5;
}

.pixel-font {
	font-family: 'Press Start 2P', system-ui;
}

.starry-bg {
	background: linear-gradient(180deg, #0c0b12 0%, #1a1433 100%);
	position: relative;
	overflow: hidden;
}

.minecraft-sign {
	background: linear-gradient(#5e2a8f, #7c3aed);
	border: 8px solid #3b1d5c;
	box-shadow: 0 12px 0 #2a1642;
	text-shadow: 3px 3px 0 #2a1642;
	max-width: 100%;
	padding: 30px 40px;
}

.glow-purple {
	box-shadow: 0 0 25px rgba(177, 76, 255, 0.5);
}

.pop-up {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 50vh;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;

	/* border: 8px solid #3b1d5c; */

	box-shadow: 0 12px 0 #2a1642;
	text-shadow: 3px 3px 0 #2a1642;
	max-width: 100%;
	padding: 30px 40px;
}

/* GPT */

.popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(12, 11, 18, 0.75);
	justify-content: center;
	align-items: center;
	z-index: 9999;
	backdrop-filter: blur(6px);
}

.popup {
	overflow: hidden;
	position: relative;
	width: min(420px, 90vw);
	background: linear-gradient(145deg, #1a1433, #0c0b12);
	border: 2px solid var(--purple-dark);
	border-radius: 16px;
	padding: 28px;
	text-align: center;
	color: #e5e5e5;

	box-shadow:
		0 0 25px rgba(177, 76, 255, 0.25),
		0 12px 0 #2a1642;

	transform: translateY(0);
	animation: popIn 0.25s ease-out;
}

.popup h2 {
	font-family: 'Press Start 2P', system-ui;
	font-size: 14px;
	margin-bottom: 16px;
	color: var(--purple-light);
}

.popup p {
	font-family: 'Rajdhani', sans-serif;
	font-size: 18px;
	margin-bottom: 20px;
	opacity: 0.9;
}

.popup-btn {
	background: var(--purple);
	border: none;
	padding: 10px 18px;
	border-radius: 10px;
	color: white;
	cursor: pointer;
	font-weight: 600;
	transition: 0.2s;
	box-shadow: 0 6px 0 var(--purple-dark);
	margin-bottom: 1.5em;
}

.popup-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 0 var(--purple-dark);
}

.popup-btn:active {
	transform: translateY(2px);
	box-shadow: 0 3px 0 var(--purple-dark);
}

.popup-timer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
	background-color: #8717dd;
	animation: timer 3s linear;
}

@keyframes popIn {
	from {
		transform: scale(0.85);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes timer {
	0% {
		width: 100%;
	}
	100% {
		width: 0%;
	}
}

.showPopUp {
	display: flex;
}