/* BIT ALIVE - menu.css */
img.logo {
	width: 320px;
	margin: 0 0 -70px 0;
}

.main_menu {
	display: flex;
	height: 670px;
	background-image: url(../hud/bg_menu.png?v=0.02);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	flex-direction: column;
	justify-content: flex-end;
}

#menu_coins {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 1.2rem;
	color: #ffd700;
	z-index: 100;
	text-shadow: 0 0 10px #000;
}

#menu_coins img {
	margin: 5px 0 -3px 7px;
	width: 20px;
}

.avatar-main {
	width: 70px;
	height: 90px;
	background-size: 500% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	margin: 0 auto;
	image-rendering: pixelated;
	filter: drop-shadow(2px 4px 6px #ffffff33);
}

@keyframes spriteMenuIdle {
	from {
		background-position: 0px 0px;
	}

	to {
		background-position: -350px 0px;
	}
}

.weapon-main {
	position: absolute;
	margin: -75px 0 0 -7px;
	width: 60px;
	height: 60px;
}

.screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	background-image: 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: 3rem;
		color: var(--accent);
		text-transform: uppercase;
		margin: -20px;
		letter-spacing: 5px;
		text-align: center;
		transition: color 0.3s;
	}

	.config-sound {
		width: 30px;
		height: 30px;
		border: 0;
		background: url('../hud/bt_gear.png') no-repeat center center;
		background-size: contain;
		background-color: transparent;
		cursor: pointer;
		position: absolute;
		top: 20px;
		right: 120px;
		transition: transform 0.2s ease-in-out, filter 0.2s;
		z-index: 100;
	}

	.config-sound:hover {
		transform: rotate(45deg) scale(1.1);
		filter: drop-shadow(0 0 5px var(--accent));
	}

	.config-sound:active {
		transform: rotate(45deg) scale(0.95);
	}

	.menu-btn {
		margin-top: 0px;
		background: transparent;
		border: 2px solid var(--accent);
		color: var(--accent);
		padding: 5px 20px;
		font-size: 0.8rem;
		cursor: pointer;
		border-radius: 6px;
		transition: 0.2s;
	}

	.info-btn-row {
		position: absolute;
		top: 10px;
		left: 10px;
		display: flex;
		gap: 15px;
		margin-top: 10px;
		padding: 0 20px;

		button {
			background: transparent;
			border: 1px solid #555;
			color: #aaa;
			padding: 5px 1px 5px 6px;
			font-size: 0.8rem;
			cursor: pointer;
			border-radius: 50%;
			transition: 0.2s;

			&:hover {
				border-color: var(--accent);
				color: var(--accent);
			}
		}
	}

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

	.toggle-group {
		display: flex;
		z-index: 10;

		button {
			width: 125px;
			background-color: transparent;
			background-image: url(../hud/bt_hero_warr.png?v=0.02);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			filter: grayscale(1) brightness(0.6);
			font-size: 1rem;
			margin: 0 5px;
			border: 0px;
			padding: 10px 0;
			cursor: pointer;
			transition: 0.2s;
			color: #efc268;

			&.selected {
				filter: grayscale(0) brightness(1);
			}

			&:hover {
				filter: grayscale(0.3) brightness(0.8);
			}
		}
	}

	.biome-selector {
		display: flex;
		align-items: center;
		gap: 15px;
		color: var(--accent);
		font-size: 1.5rem;
		text-transform: uppercase;

		button {
			background: #222;
			border: 2px solid var(--accent);
			color: #fff;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			cursor: pointer;

			&:hover {
				background: var(--accent);
				color: #000;
			}
		}

		span {
			min-width: 150px;
			text-align: center;
			transition: color 0.3s;
		}
	}

	.biome-name {
		position: absolute;
		width: 290px;
		height: 120px;
		margin: 35px 0 0 0;
		color: #ccc;
	}

	#biome_label {
		font-size: 1.7rem;
	}

	.hero-grid {
		display: flex;
		gap: 3px;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 400px;
		flex-direction: row;
		margin: 20px auto 31px auto;

		.hero-card {
			width: 90px;
			height: 111px;
			cursor: pointer;
			text-align: center;
			transition: 0.3s;
			position: relative;
			overflow: hidden;
			border-radius: 8px;
			margin: 13px 0 -10px 0;

			&:hover,
			&.gp-focus {
				transform: scale(1.1);
				z-index: 999;
				filter: drop-shadow(0px 0px 8px #ffd700) !important;
			}

			.emoji {
				font-size: 2.5rem;
				display: block;
				margin-bottom: 15px;
				transition: 0.3s;
				filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
			}

			h3 {
				position: absolute;
				width: 100%;
				margin: -28px auto 0 auto;
				color: var(--accent_dim);
				font-size: 0.6rem;
				text-transform: uppercase;
				background-image: linear-gradient(90deg, transparent, black, transparent);
				z-index: 10;
			}

			p {
				font-size: 0.7rem;
				color: #888;
				margin-top: 5px;
			}

			&.locked {
				filter: grayscale(100%) brightness(0.6);

				&:hover {
					filter: grayscale(0%) brightness(1.1);
				}
			}

			.lock-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #ffd700;
				font-size: 0.9rem;
				text-shadow: 0 0 10px #000;
				z-index: 2;
			}

			&:hover .lock-overlay {
				background: rgba(0, 0, 0, 0.2);
			}

			.hero-level-badge {
				position: absolute;
				top: 88px;
				right: 1px;
				background: #376ca9;
				color: #000;
				font-size: 0.7rem;
				padding: 0px 5px;
				border-radius: 4px;
				z-index: 10;
			}

			.hero-play-cost {
				position: absolute;
				top: 86px;
				left: 0px;
				background: rgba(0, 0, 0, 0.75);
				border: 1px solid #ffcc00;
				color: #ffd700;
				font-size: 0.7rem;
				padding: 0px 5px;
				border-radius: 4px;
				z-index: 11;
			}

			.hero-upgrade-cost {
				position: absolute;
				top: 86px;
				left: 0px;
				background: rgba(0, 45, 90, 0.85);
				border: 1.5px solid #00aaff;
				color: #00d9ff;
				font-size: 0.65rem;
				padding: 0px 4px;
				border-radius: 4px;
				z-index: 11;
				cursor: pointer;
				text-shadow: 0 0 4px #000;
				box-shadow: 0 0 5px rgba(0, 170, 255, 0.4);
				min-width: 48px;
				text-align: center;
				transition: transform 0.1s ease, background-color 0.1s ease, color 0.1s ease;
			}

			.hero-upgrade-cost:hover {
				background: #00aaff;
				color: #fff;
				transform: scale(1.05);
			}
		}
	}

	.btn-column {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 20px 0;

		button {
			padding: 15px 40px;
			font-size: 1.2rem;
			background: var(--accent);
			border: none;
			cursor: pointer;
			text-transform: uppercase;
			border-radius: 8px;
			width: 300px;
			margin: 5px 0;
			transition: 0.2s;

			&:hover {
				transform: scale(1.05);
			}

			&.secondary {
				background: #333;
				color: #fff;
				border: 2px solid #555;
				margin: 20px 0;
			}
		}
	}
}

/* Conteúdo do Grimório de História */
.lore-content {
	width: 90%;
	max-width: 980px;
	max-height: 85%;
	background-color: transparent;
	background-image: url(../hud/bg_config_hor.png?v=0.01);
	background-size: 100% 100%;
	border-radius: 10px;
	padding: 10px 110px;
	color: #ddd;
	overflow-y: auto;
	position: relative;
	filter: drop-shadow(0px 0px 9px #ffaa0099);
}

.lore-text {
	line-height: 1.6;
}

.lore-text p {
	color: #ccc;
	margin: 0 0 14px;
}

.lore-subtitle {
	text-align: center;
	color: #ddd;
	margin: -10px 0 25px;
	font-size: 1.4rem;
}

.lore-h1 {
	text-align: center;
	color: var(--accent, #ffaa00);
	margin-bottom: 20px;
}

.lore-h3 {
	border-bottom: 1px solid #333;
	color: var(--accent, #ffaa00);
	padding-bottom: 5px;
	margin-top: 28px;
}

.lore-h3.blue {
	color: #00aaff;
}

.lore-h3.red {
	color: #ff3333;
	margin-top: 25px;
}

.lore-h3.green {
	color: #00ff88;
	margin-top: 25px;
}

.lore-content .info-list {
	margin: 5px 0 22px;
	padding-bottom: 14px;
}

/* Conteúdo do Mapa Interativo */
.map-content {
	width: 870px;
	height: 646px;
	background-image: url(../hud/bg_map.png?v=0.03);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	display: flex;
	flex-direction: column;
}

.map-placeholder {
	flex: 1;
	display: flex;
	width: 100%;
	overflow: hidden;
	justify-content: center;
	align-items: center;
}

.map-placeholder div {
	opacity: 0;
	position: absolute;
	background-repeat: no-repeat;
}

/* Efeito Hover nas regiões liberadas do mapa */
.map-placeholder div[class^="map-"] {
	transition: filter 0.3s, transform 0.2s;
}

.map-placeholder div[class^="map-"].unlocked:hover,
.map-placeholder div[class^="map-"].buyable:hover {
	filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.8)) brightness(1.2);
	cursor: pointer;
}

.map-aetherwood {
	background-image: url(../img/mapa_aetherwood.png?v=0.02);
	background-size: contain;
	width: 260px;
	height: 180px;
	margin: 245px 0 0 -251px;
}

.map-kage {
	background-image: url(../img/mapa_kage.png?v=0.02);
	background-size: contain;
	width: 455px;
	height: 296px;
	margin: 211px 0 0 212px;
}

.map-nx01 {
	background-image: url(../img/mapa_nx01.png?v=0.02);
	background-size: contain;
	width: 241px;
	height: 252px;
	margin: -288px 0 0 537px;
}

.map-solthar {
	background-image: url(../img/mapa_solthar.png?v=0.02);
	background-size: contain;
	width: 313px;
	height: 301px;
	margin: 229px 0 0 453px;
}

.map-valerius {
	background-image: url(../img/mapa_valerius.png?v=0.02);
	background-size: contain;
	width: 297px;
	height: 383px;
	margin: -158px 0 0 -463px;
}

.map-valkstorm {
	background-image: url(../img/mapa_valkstorm.png?v=0.02);
	background-size: contain;
	width: 329px;
	height: 196px;
	margin: 322px 0 0 -435px;
}

.map-vulkarath {
	background-image: url(../img/mapa_vulkarath.png?v=0.02);
	background-size: contain;
	width: 305px;
	height: 181px;
	margin: -210px 0 0 -24px;
}

.map-zenkai {
	background-image: url(../img/mapa_zenkai.png?v=0.02);
	background-size: contain;
	width: 329px;
	height: 290px;
	margin: -94px 0 0 421px;
}

.map-nucleo {
	background-image: url(../img/mapa_nucleo.png?v=0.02);
	background-size: contain;
	width: 215px;
	height: 153px;
	margin: 25px 0 0 -58px;
}

.map-aetherwood.buyable {
	background-image: url(../img/mapa_aetherwood_buy.png?v=0.02);
}

.map-kage.buyable {
	background-image: url(../img/mapa_kage_buy.png?v=0.02);
}

.map-nucleo.buyable {
	background-image: url(../img/mapa_nucleo_buy.png?v=0.02);
}

.map-nx01.buyable {
	background-image: url(../img/mapa_nx01_buy.png?v=0.02);
}

.map-solthar.buyable {
	background-image: url(../img/mapa_solthar_buy.png?v=0.02);
}

.map-valerius.buyable {
	background-image: url(../img/mapa_valerius_buy.png?v=0.02);
}

.map-valkstorm.buyable {
	background-image: url(../img/mapa_valkstorm_buy.png?v=0.02);
}

.map-vulkarath.buyable {
	background-image: url(../img/mapa_vulkarath_buy.png?v=0.02);
}

.map-zenkai.buyable {
	background-image: url(../img/mapa_zenkai_buy.png?v=0.02);
}


div.map-text {
	position: relative;
	opacity: 1;
	width: 100%;
	height: 100%;
	margin: 0;
}

.aetherwood-bt {
	width: 208px;
	height: 167px;
	margin: 360px 0 0 213px;
}

.valkstorm-bt {
	width: 175px;
	height: 137px;
	margin: 420px 0 0 79px;
}

.valerius-bt {
	width: 215px;
	height: 261px;
	margin: 110px 0 0 108px;
}

.kage-bt {
	width: 170px;
	height: 180px;
	margin: 315px 0 0px 467px;
}

.solthar-bt {
	width: 145px;
	height: 130px;
	margin: 425px 0 0 655px;
}

.zenkai-bt {
	width: 200px;
	height: 140px;
	margin: 190px 0 0 545px;
}

.vulkarath-bt {
	width: 230px;
	height: 110px;
	margin: 165px 0 0 300px;
}

.nx01-bt {
	width: 15vw;
	height: calc(19vw * 9 / 16);
	margin: 4px 0 0 773px;
}

.nucleo-bt {
	width: 140px;
	height: 110px;
	margin: 285px 0 0px 337px;
}

.map-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin: 3px 0 7px 0;
}

@media(max-width: 580px) {
	.map-row {
		margin: 3px 0 -11px 0;
	}
}

.menu-action-btn {
	padding: 5px 10px;
	font-size: 1rem;
	border-radius: 8px;
	cursor: pointer;
	margin: 2px auto;
	font-family: 'Orbitron', sans-serif;
}

.menu-action-btn.grimorio {
	width: 240px;
	padding: 10px 0 10px 35px;
	background-image: url(../hud/bt_grimore.png?v=0.02);
	background-color: transparent;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0.8rem;
	color: #d3bc9a;
	border: 0px;
	margin-bottom: 28px;
	z-index: 10;
}

.menu-action-btn.map {
	width: 240px;
	padding: 17px 0 17px 44px;
	background-image: url(../hud/bt_map.png?v=0.02);
	background-color: transparent;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0.8rem;
	color: #d3bc9a;
	border: 0px;
	z-index: 10;
}

#biome_label.locked {
	color: #888 !important;
}

#start_screen {
	background-color: rgba(10, 10, 15, 0.45);
	background-image: none !important;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

#hero_legendary_selection.active {
	display: flex;
}

.map-placeholder div[class^="map-"] {
	transition: filter 0.3s, transform 0.2s, opacity 0.3s;
	opacity: 0;
}

.map-placeholder div[class^="map-"].unlocked,
.map-placeholder div[class^="map-"].buyable {
	opacity: 1;
	filter: brightness(0.7);
}

/* Regras de Foco de Teclado/Controle via :has() no mapa das províncias */
.map-placeholder:has(.aetherwood-bt.gp-focus) .map-aetherwood,
.map-placeholder:has(.valkstorm-bt.gp-focus) .map-valkstorm,
.map-placeholder:has(.valerius-bt.gp-focus) .map-valerius,
.map-placeholder:has(.kage-bt.gp-focus) .map-kage,
.map-placeholder:has(.solthar-bt.gp-focus) .map-solthar,
.map-placeholder:has(.zenkai-bt.gp-focus) .map-zenkai,
.map-placeholder:has(.vulkarath-bt.gp-focus) .map-vulkarath,
.map-placeholder:has(.nx01-bt.gp-focus) .map-nx01,
.map-placeholder:has(.nucleo-bt.gp-focus) .map-nucleo {
	filter: drop-shadow(0 0 20px rgba(255, 204, 0, 0.9)) brightness(1.3) !important;
	transform: scale(1.03) !important;
	z-index: 15 !important;
}

/* Modal de Ajustes */
.settings-content {
	width: 90%;
	max-width: 420px;
	background-image: url(../hud/bg_config.png);
	background-size: 100% 100%;
	padding: 40px 60px;
	color: #b79712;
	position: relative;
	filter: drop-shadow(0px 0px 6px #b79712);
}

.settings-h1 {
	font-size: 1.6rem;
	text-align: center;
	color: var(--accent, #ffaa00);
	margin-bottom: 25px;
	margin-top: 0px;
}

.settings-group {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.settings-group label {
	font-size: 0.95rem;
	display: flex;
	justify-content: space-between;
	color: #ccc;
}

.volume-slider {
	width: 100%;
	height: 8px;
	background: #333;
	outline: none;
	border-radius: 4px;
	-webkit-appearance: none;
	cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background: var(--accent, #ffaa00);
	border-radius: 50%;
	box-shadow: 0 0 10px var(--accent, #ffaa00);
}