:root {
	--bg_dark: #050505;
	--panel_bg: rgba(20, 15, 10, 0.95);
	--accent: #ffcc00;
	--accent_dim: #8a7020;
	--blood: #e61919;
	--mana: #00aaff;
	--font_main: "Cinzel", serif;
}

* {
	font-family: var(--font_main) !important;
	box-sizing: border-box;
}

body {
	margin: 0;
	overflow: hidden;
	background-color: var(--bg_dark);
	color: #fff;
	user-select: none;
	transition: background-color 0.5s;

	&.playing {
		touch-action: none;
	}

	canvas {
		display: block;
		width: 100vw;
		height: 100vh;
	}
}

.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-brands,
.fa-regular {
	font-family: "Font Awesome 6 Free" !important;
}

.fab,
.fa-brands {
	font-family: "Font Awesome 6 Brands" !important;
}

button {
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gp-focus {
	outline: 4px solid var(--accent);
	transform: scale(1.1) !important;
	z-index: 100;
	box-shadow: 0 0 20px var(--accent) !important;
	background-color: rgba(255, 204, 0, 0.1);
}

input {
	background: #222;
	border: 2px solid var(--accent);
	color: #fff;
	padding: 10px;
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 20px;
	width: 200px;
	border-radius: 8px;

	&:focus {
		outline: none;
		box-shadow: 0 0 10px var(--accent);
	}
}

#ui_layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;

	#damage_layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		overflow: hidden;
		z-index: 5;
	}

	.hud-top {
		display: flex;
		justify-content: space-between;
		padding: 25px;
		pointer-events: auto;
		align-items: flex-start;

		.stat-box {
			background: var(--panel_bg);
			border: 2px solid var(--accent);
			padding: 10px 20px;
			border-radius: 4px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
			display: flex;
			flex-direction: column;
			gap: 5px;
			transition: border-color 0.3s, background 0.3s;

			.bar-frame {
				width: 250px;
				height: 18px;
				background: #111;
				border: 1px solid #444;
				position: relative;
				transform: skewX(-15deg);
				overflow: hidden;

				.fill {
					height: 100%;
					transition: width 0.1s linear;
					box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
					&.hp {
						background: linear-gradient(90deg, #500, var(--blood));
					}
					&.xp {
						background: linear-gradient(90deg, #004, var(--mana));
					}
				}
			}

			.label {
				font-size: 0.8rem;
				color: var(--accent);
				text-transform: uppercase;
				letter-spacing: 2px;
				font-weight: bold;
			}
		}
	}

	.timer-container {
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		#timer_display {
			font-size: 3rem;
			font-weight: 900;
			color: #eee;
			text-shadow: 0 0 15px var(--accent);
		}
		#wave_display {
			color: var(--blood);
			font-size: 1.5rem;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 5px;
			text-shadow: 0 0 10px #000;
		}
		#score_display {
			color: var(--accent);
			font-size: 1rem;
			margin-top: 5px;
		}
		#player_label {
			color: #aaa;
			font-size: 0.9rem;
			margin-top: 5px;
			text-transform: uppercase;
			letter-spacing: 2px;
		}
	}

	.pause-btn {
		position: absolute;
		top: 25px;
		right: 25px;
		background: transparent;
		border: none;
		font-size: 2.5rem;
		cursor: pointer;
		z-index: 100;
		filter: drop-shadow(0 0 5px #000);
		transition: transform 0.2s;
		pointer-events: auto;
		&:hover {
			transform: scale(1.1);
		}
	}
}

.screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		circle,
		rgba(10, 10, 15, 0.98) 0%,
		rgba(0, 0, 0, 1) 90%
	);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	z-index: 20;
	transition: opacity 0.5s;

	&.hidden {
		opacity: 0;
		pointer-events: none;
	}

	h1 {
		font-size: 5rem;
		color: var(--accent);
		text-transform: uppercase;
		margin-bottom: 10px;
		text-shadow: 0 5px 0 var(--accent_dim), 0 0 40px rgba(255, 200, 0, 0.6);
		letter-spacing: 5px;
		text-align: center;
		transition: color 0.3s;
	}

	.menu-btn {
		margin-top: 20px;
		background: transparent;
		border: 2px solid var(--accent);
		color: var(--accent);
		padding: 10px 20px;
		font-size: 1rem;
		cursor: pointer;
		border-radius: 6px;
		transition: 0.2s;
		&:hover {
			background: var(--accent);
			color: #000;
		}
	}

	.info-btn-row {
		display: flex;
		gap: 15px;
		margin-top: 10px;
		button {
			background: transparent;
			border: 1px solid #555;
			color: #aaa;
			padding: 8px 15px;
			font-size: 0.8rem;
			cursor: pointer;
			border-radius: 4px;
			transition: 0.2s;
			&:hover {
				border-color: var(--accent);
				color: var(--accent);
			}
		}
	}

	.controls-row {
		display: flex;
		gap: 40px;
		margin: 20px 0;
		align-items: center;
	}

	.toggle-group {
		display: flex;
		background: #111;
		border: 2px solid #333;
		border-radius: 12px;
		padding: 5px;
		button {
			background: none;
			border: none;
			font-size: 2.5rem;
			padding: 10px 20px;
			cursor: pointer;
			border-radius: 8px;
			transition: 0.2s;
			opacity: 0.5;
			filter: grayscale(100%);
			&.selected {
				opacity: 1;
				filter: grayscale(0%);
				background: #222;
				box-shadow: 0 0 10px var(--accent_dim);
			}
			&:hover {
				opacity: 0.8;
			}
		}
	}

	.biome-selector {
		display: flex;
		align-items: center;
		gap: 15px;
		color: var(--accent);
		font-size: 1.5rem;
		text-transform: uppercase;
		font-weight: bold;
		button {
			background: #222;
			border: 2px solid var(--accent);
			color: #fff;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			cursor: pointer;
			font-weight: bold;
			&:hover {
				background: var(--accent);
				color: #000;
			}
		}
		span {
			min-width: 150px;
			text-align: center;
			transition: color 0.3s;
		}
	}

	.hero-grid {
		display: flex;
		gap: 25px;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 900px;
		.hero-card {
			background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
			width: 140px;
			padding: 20px;
			border: 1px solid #333;
			cursor: pointer;
			text-align: center;
			transition: 0.3s;
			position: relative;
			overflow: hidden;
			border-radius: 8px;
			&:hover {
				transform: translateY(-10px);
				border-color: var(--accent);
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
				.emoji {
					transform: scale(1.2);
				}
			}
			.emoji {
				font-size: 4.5rem;
				display: block;
				margin-bottom: 15px;
				transition: 0.3s;
				filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
			}
			h3 {
				margin: 0;
				color: var(--accent);
				font-size: 1rem;
				text-transform: uppercase;
			}
			p {
				font-size: 0.7rem;
				color: #888;
				margin-top: 5px;
			}
		}
	}

	.btn-column {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: 30px;
		align-items: center;
		button {
			padding: 15px 40px;
			font-size: 1.2rem;
			background: var(--accent);
			border: none;
			cursor: pointer;
			font-weight: bold;
			text-transform: uppercase;
			border-radius: 8px;
			width: 300px;
			transition: 0.2s;
			&:hover {
				transform: scale(1.05);
			}
			&.secondary {
				background: #333;
				color: #fff;
				border: 2px solid #555;
			}
		}
	}

	#leaderboard {
		margin-top: 30px;
		background: rgba(0, 0, 0, 0.5);
		padding: 20px;
		border-radius: 10px;
		border: 1px solid #333;
		width: 300px;
		h3 {
			color: var(--accent);
			margin: 0 0 10px 0;
			text-align: center;
		}
		.score-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 5px;
			color: #aaa;
			font-size: 0.9rem;
			border-bottom: 1px solid #222;
			padding-bottom: 2px;
			span:last-child {
				color: #fff;
				font-weight: bold;
			}
		}
	}

	#top_socials {
		position: absolute;
		top: 20px;
		width: 100%;
		display: flex;
		justify-content: center;
		z-index: 50;
		pointer-events: auto;
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			gap: 30px;
			li a {
				color: #666;
				font-size: 1.5rem;
				transition: 0.3s;
				display: flex;
				flex-direction: column;
				align-items: center;
				&:hover {
					color: var(--accent);
					transform: translateY(-3px);
				}
			}
		}
	}
}

#levelup_screen {
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(5px);
	.cards-container {
		display: flex;
		gap: 40px;
		margin-top: 40px;
		.upgrade-card {
			background: #111;
			border: 2px solid #333;
			width: 220px;
			height: 320px;
			padding: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;
			position: relative;
			transition: 0.3s;
			border-radius: 12px;
			&:hover {
				border-color: var(--accent);
				box-shadow: 0 0 40px var(--accent_dim);
				transform: scale(1.1) rotate(2deg);
				background: #1a1510;
				z-index: 10;
			}
			.icon {
				font-size: 5rem;
				margin: 30px 0;
				filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
			}
			.title {
				color: var(--accent);
				font-weight: 900;
				font-size: 1.2rem;
				text-transform: uppercase;
				text-align: center;
			}
			.desc {
				color: #aaa;
				text-align: center;
				font-size: 0.9rem;
				margin-top: 10px;
				line-height: 1.4;
			}
		}
	}
}

#inventory {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	background: rgba(0, 0, 0, 0.8);
	padding: 10px 20px;
	border: 1px solid #444;
	border-radius: 50px;
	.slot {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: #222;
		border: 2px solid #555;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.8rem;
		position: relative;
		box-shadow: inset 0 0 10px #000;
		.lvl {
			position: absolute;
			bottom: -5px;
			right: -5px;
			background: var(--accent);
			color: #000;
			font-size: 0.75rem;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			border: 1px solid #fff;
		}
	}
}

.dmg-popup {
	position: absolute;
	font-family: "Impact", sans-serif;
	font-size: 2.5rem;
	color: #fff;
	-webkit-text-stroke: 1.5px #000;
	text-shadow: 3px 3px 0 #000;
	pointer-events: none;
	animation: popUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	z-index: 100;
}

@keyframes popUp {
	0% {
		transform: scale(0.5) translateY(0) rotate(-10deg);
		opacity: 0;
	}
	30% {
		transform: scale(1.5) translateY(-40px) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: scale(1) translateY(-80px) rotate(10deg);
		opacity: 0;
	}
}

#white_flash {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	opacity: 0;
	pointer-events: none;
	z-index: 15;
	mix-blend-mode: overlay;
}

#drag_marker {
	position: absolute;
	width: 70px;
	height: 70px;
	border: 3px solid var(--accent);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 15px var(--accent);
	z-index: 15;
	transition: opacity 0.1s;
}

.info-modal-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	&.active {
		opacity: 1;
		pointer-events: auto;
	}
	.modal-box {
		background: #151515;
		border: 2px solid var(--accent);
		padding: 40px;
		max-width: 600px;
		text-align: center;
		border-radius: 12px;
		overflow-y: auto;
		max-height: 80vh;
		h1 {
			font-size: 3rem;
			margin-bottom: 10px;
			color: var(--accent);
		}
		h2 {
			color: var(--accent);
			margin-bottom: 20px;
			font-size: 2rem;
		}
		p {
			color: #ccc;
			margin-bottom: 15px;
			line-height: 1.6;
			font-size: 1.1rem;
		}
		a {
			color: var(--accent);
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
		button.close-btn {
			margin-top: 20px;
			background: var(--accent);
			border: none;
			padding: 10px 30px;
			font-size: 1.2rem;
			font-weight: bold;
			cursor: pointer;
			border-radius: 5px;
		}
		.share-btn {
			background: #1da1f2;
			color: white;
			border: none;
			padding: 12px 30px;
			border-radius: 30px;
			font-weight: bold;
			cursor: pointer;
			transition: transform 0.2s;
			margin: 20px 0;
			&:hover {
				transform: scale(1.05);
			}
		}
		.copyright {
			margin-top: 30px;
			color: #555;
			font-size: 0.8rem;
		}
	}
}

#gameover_screen {
	.btn-row {
		display: flex;
		gap: 20px;
		button {
			padding: 20px 40px;
			font-size: 1.5rem;
			background: var(--accent);
			border: none;
			cursor: pointer;
			font-weight: bold;
			box-shadow: 0 0 20px var(--accent_dim);
			border-radius: 8px;
			&.secondary {
				background: #333;
				color: #fff;
				box-shadow: none;
				border: 2px solid #666;
			}
		}
	}
}