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

body {
	font-family: 'Arial', sans-serif;
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
}

canvas {
	background-color: red;
}

/* MENU SCREEN STYLES */
.menu-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.menu-content {
	text-align: center;
	color: white;
	animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.game-title {
	font-size: 72px;
	font-weight: bold;
	margin-bottom: 10px;
	background: linear-gradient(45deg, #ff6b6b, #ffd93d);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
	letter-spacing: 8px;
}

.game-subtitle {
	font-size: 24px;
	color: #a8dadc;
	margin-bottom: 50px;
	letter-spacing: 4px;
}

.menu-buttons {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 30px;
}

.menu-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: 3px solid #a8dadc;
	padding: 15px 50px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 10px;
	transition: all 0.3s ease;
	letter-spacing: 2px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.menu-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
	background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.menu-btn:active {
	transform: translateY(0);
}

.controls-info {
	display: none;
	margin-top: 30px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	backdrop-filter: blur(10px);
}

.controls-info.show {
	display: flex;
	gap: 50px;
	justify-content: center;
	animation: slideDown 0.5s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.controls-section {
	text-align: left;
}

.controls-section h3 {
	color: #ffd93d;
	margin-bottom: 15px;
	font-size: 20px;
}

.controls-section p {
	color: #e0e0e0;
	margin: 8px 0;
	font-size: 16px;
}

.container {
	position: relative;
	display: inline-block;
}
.nav {
	position: absolute;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 20px;
	gap: 20px;
}

.health-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.player-label {
	color: white;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 2px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.phealth {
	background-color: red;
	height: 50px;
	width: 100%;
}

.timer {
	background-color: blue;
	height: 100px;
	width: 100px;
	flex-shrink: 0;
}

.pBar {
	position: relative;
	height: 50px;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	border: 3px solid white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.phealth {
	background-color: #8b0000;
	height: 50px;
}

#phealth {
	position: absolute;
	background: linear-gradient(90deg, #ffeb3b, #ffc107);
	top: 0;
	bottom: 0;
	width: 100%;
	right: 0;
	transition: width 0.3s ease;
}

.timer {
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 48px;
	font-weight: bold;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: 3px solid white;
	border-radius: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.enemyBar {
	position: relative;
	height: 50px;
	width: 100%;
	border: 3px solid white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.ehealth {
	background-color: #8b0000;
	height: 50px;
	width: 100%;
}

#ehealth {
	position: absolute;
	background: linear-gradient(90deg, #ffc107, #ffeb3b);
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	transition: width 0.3s ease;
}

.result {
	position: absolute;
	color: white;
	align-items: center;
	justify-content: center;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(5px);
}

.result-content {
	text-align: center;
}

#resultText {
	font-size: 70px;
	font-weight: bold;
	margin-bottom: 40px;
	background: linear-gradient(45deg, #ff6b6b, #ffd93d);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

.restart-btn {
	margin-bottom: 15px;
}