* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
	font-family: "Arial", sans-serif;
	overflow: hidden;
}

.container {
	text-align: center;
	position: relative;
}

h1 {
	color: white;
	font-size: 3rem;
	margin-bottom: 2rem;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.warning {
	color: #fbbf24;
	font-size: 1.5rem;
	margin-bottom: 2rem;
	font-weight: bold;
	animation: pulse 1.5s infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.button-container {
	position: relative;
	display: inline-block;
}

.big-button {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: none;
	font-size: 2rem;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	transition: all 0.3s ease;
	position: relative;
	background: linear-gradient(145deg, #ef4444, #dc2626);
	color: white;
}

.big-button:hover {
	transform: scale(1.1);
	box-shadow: 0 15px 40px rgba(239, 68, 68, 0.6);
}

.big-button:active {
	transform: scale(0.95);
}

.big-button::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 30% 30%,
		rgba(255, 255, 255, 0.4),
		transparent
	);
	pointer-events: none;
}

.hidden {
	display: none;
}

.game-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	z-index: 100;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.game-screen:not(.hidden) {
	display: flex;
}

.game-title {
	color: #ef4444;
	font-size: 3rem;
	margin-bottom: 2rem;
	animation: glitch 1s infinite;
}

@keyframes glitch {
	0%,
	100% {
		transform: translate(0);
	}
	25% {
		transform: translate(-2px, 2px);
	}
	50% {
		transform: translate(2px, -2px);
	}
	75% {
		transform: translate(-2px, -2px);
	}
}

.explosion {
	position: fixed;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	animation: explode 2s ease-out forwards;
}

@keyframes explode {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(var(--x), var(--y)) scale(0);
		opacity: 0;
	}
}

.message {
	color: white;
	font-size: 2rem;
	margin-top: 2rem;
	animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.reset-button {
	margin-top: 2rem;
	padding: 1rem 2rem;
	font-size: 1.2rem;
	background: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-weight: bold;
	transition: transform 0.2s;
}

.reset-button:hover {
	transform: scale(1.1);
}

.screen-shake {
	animation: shake 0.5s;
}

@keyframes shake {
	0%,
	100% {
		transform: translate(0, 0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translate(-10px, 0);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translate(10px, 0);
	}
}