/* BIT ALIVE - hud.css */
#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 {
			display: flex;
			width: 290px;
			height: 58px;
			flex-direction: column;
			gap: 5px;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;

			.bar-frame {
				width: 205px;
				height: 25px;
				position: relative;
				overflow: hidden;
				margin: 22px 0px 0 62px;

				.fill {
					height: 15px;
					transition: width 0.1s linear;
					box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					border-radius: 10px;

					&.hp {
						background-image: url(../hud/bar_life.png);
					}

					&.xp {
						background-image: url(../hud/bar_xp.png);
					}

					&.xp_hero {
						height: 14px;
						background-image: url(../hud/bar_xp_hero.png);
					}

					&.xp_hero_aux {
						height: 9px;
						margin-top: 2px;
						background-image: url(../hud/bar_xp_aux.png);
					}
				}
			}
		}

		.life {
			background-image: url(../hud/bg_life.png);
		}

		.life_hero {
			background-image: url(../hud/bg_hero_life.png);
		}

		.xp {
			background-image: url(../hud/bg_xp.png);
		}

		.xp_hero {
			background-image: url(../hud/bg_hero_xp.png);
		}
	}

	.xp_hero .bar-frame,
	.life_hero .bar-frame {
		margin-top: 19px !important;
	}

	.life_hero .bar-frame #hp_bar_fill {
		height: 14px;
		background-image: url(../hud/bar_life.png) !important;
	}

	.life_hero .bar-frame #hp_bar_fill_shield {
		height: 9px;
		margin-top: 2px;
		background-image: url(../hud/bar_shield.png) !important;
	}

	.timer-container {
		position: absolute;
		top: 45px;
		left: 50%;
		width: 330px;
		transform: translateX(-50%);
		text-align: center;

		#timer_display {
			font-size: 2rem;
			font-weight: 900;
			color: #eee;
			text-shadow: 0 0 15px var(--accent);
		}

		#wave_display {
			color: var(--blood);
			font-size: 1.1rem;
			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: 85px;
		right: 15px;
		background: transparent;
		border: 0;
		width: 45px;
		height: 45px;
		cursor: pointer;
		z-index: 20;
		transition: transform 0.2s;
		pointer-events: auto;
		filter: drop-shadow(0.5px 0.5px 0px #ccc);

		&:hover {
			transform: scale(1.1);
			background: rgba(255, 204, 0, 0.2);
			filter: drop-shadow(0.5px 0.5px 6px #666);
		}
	}
}

#inventory {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	background: rgba(0, 0, 0, 0.8);
	padding: 10px 10px;
	border: 1px solid #444;
	border-radius: 50px;
	pointer-events: auto;

	.slot {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.border-loader {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			z-index: 1;
		}

		.slot-inner {
			position: absolute;
			top: 2px;
			left: 2px;
			width: calc(100% - 4px);
			height: calc(100% - 4px);
			border-radius: 50%;
			background: #222;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: inset 0 0 10px #000;
		}

		.lvl {
			position: absolute;
			bottom: -5px;
			right: -5px;
			background: var(--accent);
			color: #000;
			font-size: 1rem;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #fff;
			z-index: 3;
		}
	}
}

#wave_progress_bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	pointer-events: none;
}

#wave_progress_fill {
	height: 100%;
	width: 100%;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
}

.weapon-select {
	width: 140px;
	height: 140px;
	margin-bottom: -45px;
}

#passives_hud .slot {
	display: flex;
	width: 45px;
	height: 45px;
	cursor: pointer;
	border: 2px solid #ccc;
	border-radius: 50%;
	text-align: center;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 1px;
}

#passives_hud .slot img {
	width: 40px;
	height: 40px;
	pointer-events: none;
}

.slot.slot-active {
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
	opacity: 1;
	transform: scale(1.05);
	transition: all 0.2s ease;
}

.slot.slot-inactive {
	opacity: 0.4;
	transform: scale(0.95);
	transition: all 0.2s ease;
}

#boss_hud {
	position: absolute;
	top: 130px;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	background: var(--panel_bg);
	border: 2px solid var(--accent);
	padding: 10px 15px;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
	text-align: center;
	z-index: 10;
	transition: opacity 0.3s;
}

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

#boss_name {
	color: var(--accent);
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 5px;
	text-shadow: 0 0 5px #000;
}

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

#boss_hud .bar-frame .fill.hp {
	height: 100%;
	background: linear-gradient(90deg, #500, #ff3333);
	box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
	transition: width 0.1s linear;
}

#passives_hud .slot .lvl.percent-badge {
	padding: 0 4px;
	border-radius: 10px;
	margin: -16px 0 0 0;
	font-size: 0.8rem;
	background-image: linear-gradient(90deg, #0000009e, black, #0000009e);
}

.slot.slot-signature .slot-inner {
	background: radial-gradient(circle, rgba(255, 204, 0, 0.4) 0%, #222 70%) !important;
}

.slot.hud-focused {
	outline: 3px solid #00aaff !important;
	outline-offset: 2px !important;
}

.slot img {
	width: 35px;
	height: 35px;
	pointer-events: none;
}

.slot .lvl {
	pointer-events: none;
}

#inventory .slot img {
	display: block;
}

#hud {
	display: flex;
}

#btn_pause {
	display: block;
}

#wave_progress_bar {
	display: block;
}

#ally_trigger_btn {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: rgba(0, 0, 0, 0.85);
	border: 2px solid var(--accent);
	padding: 10px 15px;
	border-radius: 30px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	z-index: 1000;
	box-shadow: 0 0 15px var(--accent);
	transition: all 0.3s ease;
	user-select: none;
}

#ally_trigger_btn.hidden {
	display: none !important;
}

#ally_trigger_btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 25px var(--accent);
}

#ally_trigger_btn .pulse-icon {
	width: 25px;
	height: 25px;
	animation: allyPulse 1.5s infinite;
}

@keyframes allyPulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

/* Slot Extra Compra */
.slot.slot-extra-shop {
	border: 2px dashed rgba(255, 204, 0, 0.6) !important;
	background: rgba(0, 0, 0, 0.6) !important;
	cursor: pointer;
	transition: all 0.3s ease;
	opacity: 0.85;
}

.slot.slot-extra-shop:hover {
	border-color: #ffcc00 !important;
	box-shadow: 0 0 10px rgba(255, 204, 0, 0.5) !important;
	transform: scale(1.08) !important;
	opacity: 1 !important;
}

.slot.slot-extra-shop.confirm {
	border: 2px solid #ffcc00 !important;
	box-shadow: 0 0 15px rgba(255, 204, 0, 0.8) !important;
	animation: confirmPulse 1s infinite alternate;
}

@keyframes confirmPulse {
	from {
		transform: scale(1.02);
	}

	to {
		transform: scale(1.1);
	}
}

.slot.slot-extra-unlocked {
	border: 2px solid #00ff88 !important;
	box-shadow: 0 0 10px rgba(0, 255, 136, 0.4) !important;
	background: radial-gradient(circle, rgba(0, 255, 136, 0.2) 0%, #222 75%) !important;
	cursor: default;
	transform: scale(1) !important;
	transition: all 0.3s ease;
}

/* Dash HUD styling */
#dash_hud {
	pointer-events: auto;
}

#dash_hud.hidden {
	display: none !important;
}

#dash_hud .slot {
	position: relative;
	display: flex;
	width: 45px;
	height: 45px;
	border: 2px solid var(--accent);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.8);
	margin: 5px 1px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(0, 170, 255, 0.4);
}

#dash_hud .slot img {
	width: 32px;
	height: 32px;
	pointer-events: none;
	z-index: 1;
	transition: filter 0.3s ease;
}

#dash_hud .slot.on-cooldown img {
	filter: grayscale(100%) brightness(30%);
}

#dash_hud .cooldown-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background: linear-gradient(180deg, rgba(0, 180, 255, 0.6) 0%, rgba(0, 90, 220, 0.8) 100%);
	border-top: 2px solid #00d9ff;
	box-shadow: 0 -2px 8px rgba(0, 217, 255, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	transition: height 0.1s linear;
	pointer-events: none;
	z-index: 2;
}

#dash_hud .slot.ready-flash {
	animation: ready-pulse 0.4s ease-out;
}

@keyframes ready-pulse {
	0% { box-shadow: 0 0 10px rgba(0, 170, 255, 0.4); transform: scale(1); }
	50% { box-shadow: 0 0 25px rgba(0, 220, 255, 1); transform: scale(1.1); }
	100% { box-shadow: 0 0 10px rgba(0, 170, 255, 0.4); transform: scale(1); }
}

#ui_layer {
	display: none;
}
#ui_layer.active {
	display: block;
}