/* Card de informações: sobreposição independente, sem mudar a geometria da árvore. */
.reproducao-pal-com-informacoes {
	cursor: help;
}

.reproducao-pal-com-informacoes:focus-visible {
	outline: 3px solid #8b5cf6;
	outline-offset: 4px;
}

.reproducao-pal-informacoes {
	position: fixed;
	z-index: 1000001;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 238px;
	max-width: calc(100vw - 16px);
	padding: 12px;
	border: 1px solid #d6c5ff;
	border-radius: 13px;
	background: linear-gradient(145deg, #ffffff, #f5f1ff);
	color: #18181b;
	font-family: inherit;
	text-align: left;
	pointer-events: none;
	box-shadow: 0 8px 26px rgba(82, 55, 140, 0.18);
}

.reproducao-pal-informacoes .reproducao-imagem-pal {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border: 1px solid #d6c5ff;
	border-radius: 50%;
	background: #ffffff;
	object-fit: contain;
}

.reproducao-pal-informacoes > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

.reproducao-pal-informacoes strong {
	display: block;
	margin: 0 0 4px;
	color: #8b5cf6;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.35;
}

.reproducao-pal-informacoes span {
	display: block;
	color: #626273;
	font-size: 11px;
	line-height: 1.5;
}

.reproducao-pal-informacoes-elementos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
}

.reproducao-pal-informacoes-elementos[hidden] {
	display: none;
}

.reproducao-pal-informacoes-elementos img {
	display: block;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	max-width: none;
	object-fit: contain;
}

/**
 * =========================================================
 * SAVE GAME
 * CALCULADORA DE REPRODUÇÃO DO PALWORLD
 *
 * IDENTIDADE VISUAL:
 * - Branco
 * - Lilás claro
 * - Roxo Save Game
 * =========================================================
 */


/**
 * =========================================================
 * VARIÁVEIS
 * =========================================================
 */

.reproducao-palworld {
	--reproducao-roxo: #8b5cf6;
	--reproducao-roxo-hover: #7c3aed;
	--reproducao-roxo-claro: #a78bfa;
	--reproducao-roxo-suave: #f5f1ff;
	--reproducao-roxo-fundo: #faf8ff;

	--reproducao-branco: #ffffff;
	--reproducao-fundo: #ffffff;
	--reproducao-fundo-2: #fbfaff;

	--reproducao-borda: #ded9e8;
	--reproducao-borda-roxa: #d6c5ff;

	--reproducao-texto: #18181b;
	--reproducao-texto-2: #626273;
	--reproducao-texto-3: #9292a3;

	--reproducao-sombra:
		0 8px 28px rgba(82, 55, 140, 0.08);

	--reproducao-raio: 18px;

	width: 100%;
	max-width: 1180px;

	margin: 0 auto;

	color: var(--reproducao-texto);
	font-family: inherit;

	box-sizing: border-box;
}

.reproducao-palworld *,
.reproducao-palworld *::before,
.reproducao-palworld *::after {
	box-sizing: border-box;
}

.reproducao-palworld [hidden] {
	display: none !important;
}


/**
 * =========================================================
 * CABEÇALHO
 * =========================================================
 */

.reproducao-cabecalho {
	position: relative;

	overflow: hidden;

	margin-bottom: 18px;
	padding: 30px;

	border: 1px solid var(--reproducao-borda);
	border-radius: 22px;

	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(139, 92, 246, 0.10),
			transparent 38%
		),
		linear-gradient(
			135deg,
			#ffffff 0%,
			#faf8ff 100%
		);

	box-shadow:
		0 8px 30px rgba(82, 55, 140, 0.06);
}

.reproducao-cabecalho::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 4px;

	background:
		linear-gradient(
			90deg,
			var(--reproducao-roxo),
			var(--reproducao-roxo-claro)
		);
}

.reproducao-cabecalho-conteudo {
	position: relative;
	z-index: 1;

	max-width: 720px;
}

.reproducao-cabecalho-etiqueta,
.reproducao-secao-etiqueta,
.reproducao-modal-etiqueta {
	display: inline-flex;
	align-items: center;

	margin-bottom: 8px;

	color: var(--reproducao-roxo);

	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.reproducao-cabecalho-titulo {
	margin: 0 0 8px;

	color: var(--reproducao-texto);

	font-size: clamp(26px, 4vw, 40px);
	font-weight: 900;
	line-height: 1.08;
}

.reproducao-cabecalho-texto {
	max-width: 650px;

	margin: 0;

	color: var(--reproducao-texto-2);

	font-size: 15px;
	line-height: 1.65;
}


/**
 * =========================================================
 * CAIXA PRINCIPAL
 * =========================================================
 */

.reproducao-caixa {
	overflow: hidden;

	border: 1px solid var(--reproducao-borda);
	border-radius: 22px;

	background: var(--reproducao-branco);

	box-shadow: var(--reproducao-sombra);
}


/**
 * =========================================================
 * SELEÇÃO DO PAL
 * =========================================================
 */

.reproducao-selecao {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;

	padding: 26px 28px;

	border-bottom: 1px solid var(--reproducao-borda);

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#fcfbff 100%
		);
}

.reproducao-selecao-cabecalho {
	flex: 1;

	min-width: 0;
}

.reproducao-secao-titulo {
	margin: 0 0 6px;

	color: var(--reproducao-texto);

	font-size: 21px;
	font-weight: 850;
	line-height: 1.25;
}

.reproducao-secao-texto {
	margin: 0;

	color: var(--reproducao-texto-2);

	font-size: 14px;
	line-height: 1.55;
}

.reproducao-selecao-acoes {
	display: flex;
	align-items: center;

	gap: 10px;

	flex: 0 0 auto;
}


/**
 * =========================================================
 * BOTÃO SELECIONAR PAL
 * =========================================================
 */

.reproducao-seletor-pal {
	display: flex;
	align-items: center;

	gap: 13px;

	width: 310px;
	min-height: 78px;

	padding: 10px 14px;

	border: 1px solid var(--reproducao-borda-roxa);
	border-radius: 15px;

	background: #ffffff;
	color: var(--reproducao-texto);

	text-align: left;

	cursor: pointer;

	box-shadow:
		0 4px 16px rgba(139, 92, 246, 0.05);

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.reproducao-seletor-pal:hover {
	border-color: var(--reproducao-roxo-claro);

	background: var(--reproducao-roxo-fundo);

	box-shadow:
		0 6px 20px rgba(139, 92, 246, 0.12);

	transform: translateY(-1px);
}

.reproducao-seletor-icone {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 52px;

	width: 52px;
	height: 52px;

	border: 1px solid var(--reproducao-borda-roxa);
	border-radius: 13px;

	background: var(--reproducao-roxo-suave);
	color: var(--reproducao-roxo);

	font-size: 28px;
	font-weight: 500;
}

.reproducao-seletor-imagem {
	flex: 0 0 58px;

	width: 58px;
	height: 58px;

	object-fit: contain;
}

.reproducao-seletor-conteudo {
	display: flex;
	flex-direction: column;

	min-width: 0;
}

.reproducao-seletor-label {
	overflow: hidden;

	color: var(--reproducao-texto);

	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.reproducao-seletor-descricao {
	margin-top: 3px;

	color: var(--reproducao-texto-3);

	font-size: 12px;
	line-height: 1.35;
}


/**
 * =========================================================
 * BOTÃO LIMPAR
 * =========================================================
 */

.reproducao-botao-limpar {
	min-height: 44px;

	padding: 0 16px;

	border: 1px solid var(--reproducao-borda);
	border-radius: 11px;

	background: #ffffff;
	color: var(--reproducao-texto-2);

	font: inherit;
	font-size: 13px;
	font-weight: 700;

	cursor: pointer;

	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		background 0.2s ease;
}

.reproducao-botao-limpar:hover {
	border-color: var(--reproducao-borda-roxa);

	background: var(--reproducao-roxo-suave);
	color: var(--reproducao-roxo);
}


/**
 * =========================================================
 * BARRA DE INFORMAÇÕES
 * =========================================================
 */

.reproducao-barra {
	display: grid;

	grid-template-columns:
		repeat(3, 1fr);

	border-bottom: 1px solid var(--reproducao-borda);

	background: #faf9fd;
}

.reproducao-barra-item {
	display: flex;
	flex-direction: column;

	gap: 4px;

	min-width: 0;

	padding: 15px 20px;

	border-right: 1px solid var(--reproducao-borda);
}

.reproducao-barra-item:last-child {
	border-right: 0;
}

.reproducao-barra-label {
	color: var(--reproducao-texto-3);

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.reproducao-barra-item strong {
	overflow: hidden;

	color: var(--reproducao-roxo);

	font-size: 14px;
	font-weight: 800;

	text-overflow: ellipsis;
	white-space: nowrap;
}


/**
 * =========================================================
 * ÁREA DA ÁRVORE
 * =========================================================
 */

.reproducao-arvore-secao {
	min-height: 360px;

	padding: 36px 30px;

	background:
		linear-gradient(
			rgba(139, 92, 246, 0.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(139, 92, 246, 0.025) 1px,
			transparent 1px
		),
		#ffffff;

	background-size: 28px 28px;
}

.reproducao-arvore-scroll {
	width: 100%;

	overflow-x: auto;
	overflow-y: visible;

	padding: 5px 5px 28px;

	scrollbar-width: thin;

	scrollbar-color:
		rgba(139, 92, 246, 0.45)
		rgba(139, 92, 246, 0.06);
}

.reproducao-arvore-scroll::-webkit-scrollbar {
	height: 8px;
}

.reproducao-arvore-scroll::-webkit-scrollbar-track {
	background: rgba(139, 92, 246, 0.05);

	border-radius: 999px;
}

.reproducao-arvore-scroll::-webkit-scrollbar-thumb {
	background: rgba(139, 92, 246, 0.40);

	border-radius: 999px;
}

.reproducao-arvore-scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(139, 92, 246, 0.65);
}

.reproducao-arvore {
	width: 100%;
	min-width: 720px;
}


/**
 * =========================================================
 * ESTADO INICIAL
 * =========================================================
 */

.reproducao-estado-inicial,
.reproducao-carregando,
.reproducao-erro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-height: 300px;

	padding: 35px 20px;

	text-align: center;
}

.reproducao-estado-icone {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 66px;
	height: 66px;

	margin-bottom: 16px;

	border: 1px solid var(--reproducao-borda-roxa);
	border-radius: 18px;

	background: var(--reproducao-roxo-suave);
	color: var(--reproducao-roxo);

	font-size: 34px;

	transform: rotate(45deg);
}

.reproducao-estado-inicial h3 {
	margin: 0 0 7px;

	color: var(--reproducao-texto);

	font-size: 20px;
	font-weight: 850;
}

.reproducao-estado-inicial p,
.reproducao-erro p {
	max-width: 480px;

	margin: 0;

	color: var(--reproducao-texto-2);

	font-size: 14px;
	line-height: 1.6;
}


/**
 * =========================================================
 * CARREGAMENTO
 * =========================================================
 */

.reproducao-spinner {
	width: 35px;
	height: 35px;

	margin-bottom: 14px;

	border: 3px solid rgba(139, 92, 246, 0.12);
	border-top-color: var(--reproducao-roxo);

	border-radius: 50%;

	animation:
		reproducao-girar 0.75s linear infinite;
}

@keyframes reproducao-girar {

	to {
		transform: rotate(360deg);
	}

}


/**
 * =========================================================
 * ERRO
 * =========================================================
 */

.reproducao-erro strong {
	margin-bottom: 7px;

	color: var(--reproducao-roxo);

	font-size: 17px;
}


/**
 * =========================================================
 * NÓ DA ÁRVORE
 * =========================================================
 */

.reproducao-no {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
}


/**
 * =========================================================
 * PAL PRINCIPAL
 * ÍCONE CIRCULAR
 * =========================================================
 */

.reproducao-card-pal {
	position: relative;
	overflow: hidden;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 90px;
	height: 90px;

	padding: 0;

	border: 2px solid var(--reproducao-roxo-claro);
	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f8f5ff
		);

	box-shadow:
		0 0 0 4px rgba(139, 92, 246, 0.08),
		0 8px 22px rgba(91, 62, 150, 0.13);
}

.reproducao-card-pal::before {
	content: "";

	position: absolute;
	z-index: 2;

	inset: 4px;

	border: 1px solid rgba(139, 92, 246, 0.15);
	border-radius: 50%;

	pointer-events: none;
}

.reproducao-card-pal-imagem {
	position: relative;
	z-index: 1;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/**
 * =========================================================
 * COMBINAÇÕES
 * =========================================================
 */

.reproducao-combinacoes {
	position: relative;
	z-index: 3;

	width: min(100%, 680px);

	margin-top: 0;
}

.reproducao-combinacoes-cabecalho {
	display: flex;
	align-items: center;
	justify-content: center;

	margin-bottom: 8px;
}

.reproducao-combinacoes-titulo {
	color: var(--reproducao-texto-2);

	font-size: 11px;
	font-weight: 700;
}

/**
 * =========================================================
 * BOTÃO ESCOLHER COMBINAÇÃO
 * =========================================================
 */

.reproducao-combinacoes-botao {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 14px;

	width: 100%;
	min-height: 50px;

	padding: 0 48px 0 17px;

	border: 1px solid var(--reproducao-borda-roxa);
	border-radius: 13px;

	outline: none;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#fdfcff 100%
		);

	color: var(--reproducao-texto);

	font: inherit;
	font-size: 13px;
	font-weight: 750;

	text-align: left;

	cursor: pointer;

	box-shadow:
		0 4px 16px rgba(139, 92, 246, 0.06);

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}


/**
 * SETA
 */

.reproducao-combinacoes-botao::after {
	content: "";

	position: absolute;

	top: 50%;
	right: 18px;

	width: 8px;
	height: 8px;

	border-right: 2px solid var(--reproducao-roxo);
	border-bottom: 2px solid var(--reproducao-roxo);

	transform:
		translateY(-70%)
		rotate(45deg);

	transition:
		transform 0.2s ease;
}


.reproducao-combinacoes-botao:hover {
	border-color: var(--reproducao-roxo);

	background: var(--reproducao-roxo-fundo);

	box-shadow:
		0 7px 20px rgba(139, 92, 246, 0.12);

	transform: translateY(-1px);
}


.reproducao-combinacoes-botao:focus-visible {
	border-color: var(--reproducao-roxo);

	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.12);
}


.reproducao-combinacoes-botao.tem-combinacao {
	border-color: var(--reproducao-roxo-claro);

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#faf7ff 100%
		);

	color: var(--reproducao-roxo-hover);

	font-weight: 800;
}


/**
 * =========================================================
 * MODAL DE COMBINAÇÕES
 * =========================================================
 */

body.reproducao-modal-combinacoes-aberto {
	overflow: hidden;
}


.reproducao-modal-combinacoes {
	position: fixed;
	z-index: 1000000;

	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 22px;

	font-family: inherit;
}


/**
 * FUNDO ESCURECIDO
 */

.reproducao-modal-combinacoes-fundo {
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	border: 0;

	background:
		rgba(35, 25, 55, 0.52);

	cursor: default;

	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}


/**
 * CAIXA DO MODAL
 */

.reproducao-modal-combinacoes-caixa {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;

	width: min(100%, 880px);
	max-height: min(780px, 88vh);

	overflow: hidden;

	border: 1px solid #ded9e8;
	border-radius: 22px;

	background: #ffffff;

	box-shadow:
		0 30px 90px rgba(45, 28, 78, 0.28);

	animation:
		reproducao-modal-combinacoes-entrada
		0.22s ease-out;
}


/**
 * LINHA ROXA SUPERIOR
 */

.reproducao-modal-combinacoes-caixa::before {
	content: "";

	position: absolute;
	z-index: 4;

	top: 0;
	left: 0;
	right: 0;

	height: 4px;

	background:
		linear-gradient(
			90deg,
			#8b5cf6,
			#a78bfa
		);
}


@keyframes reproducao-modal-combinacoes-entrada {

	from {
		opacity: 0;

		transform:
			translateY(12px)
			scale(0.985);
	}

	to {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}

}


/**
 * =========================================================
 * TOPO DO MODAL
 * =========================================================
 */

.reproducao-modal-combinacoes-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	padding: 23px 24px 20px;

	border-bottom: 1px solid #ded9e8;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#fdfcff 100%
		);
}


.reproducao-modal-combinacoes-titulo {
	min-width: 0;

	margin: 0;

	color: #18181b;

	font-size: 20px;
	font-weight: 900;
	line-height: 1.3;
}


/**
 * BOTÃO X
 */

.reproducao-modal-combinacoes-fechar {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 40px;

	width: 40px;
	height: 40px;

	margin: 0;
	padding: 0;

	border: 1px solid #d6c5ff;
	border-radius: 11px;

	background: #f5f1ff;
	color: #8b5cf6;

	font: inherit;
	font-size: 26px;
	font-weight: 500;
	line-height: 1;

	cursor: pointer;

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}


.reproducao-modal-combinacoes-fechar:hover {
	border-color: #8b5cf6;

	background: #8b5cf6;
	color: #ffffff;

	transform: rotate(4deg);
}


/**
 * =========================================================
 * PESQUISA
 * =========================================================
 */

.reproducao-modal-combinacoes-pesquisa {
	padding: 17px 24px;

	border-bottom: 1px solid #ded9e8;

	background: #faf9fd;
}


.reproducao-modal-combinacoes-input {
	display: block;

	width: 100%;
	height: 50px;

	margin: 0;
	padding: 0 16px;

	border: 1px solid #ded9e8;
	border-radius: 12px;

	outline: none;

	background: #ffffff;
	color: #18181b;

	font: inherit;
	font-size: 14px;
	font-weight: 500;

	box-shadow:
		0 2px 8px rgba(82, 55, 140, 0.03);

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}


.reproducao-modal-combinacoes-input::placeholder {
	color: #9292a3;
}


.reproducao-modal-combinacoes-input:hover {
	border-color: #d6c5ff;
}


.reproducao-modal-combinacoes-input:focus {
	border-color: #8b5cf6;

	background: #ffffff;

	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.11);
}


/**
 * REMOVE O X NATIVO DO INPUT SEARCH
 */

.reproducao-modal-combinacoes-input::-webkit-search-cancel-button {
	cursor: pointer;
}


/**
 * =========================================================
 * LISTA DE COMBINAÇÕES
 * =========================================================
 */

.reproducao-modal-combinacoes-lista {
	display: flex;
	flex-direction: column;

	gap: 8px;

	min-height: 160px;

	overflow-x: hidden;
	overflow-y: auto;

	padding: 14px;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#fdfcff 100%
		);

	scrollbar-width: thin;

	scrollbar-color:
		rgba(139, 92, 246, 0.40)
		rgba(139, 92, 246, 0.06);
}


.reproducao-modal-combinacoes-lista::-webkit-scrollbar {
	width: 8px;
}


.reproducao-modal-combinacoes-lista::-webkit-scrollbar-track {
	background:
		rgba(139, 92, 246, 0.05);

	border-radius: 999px;
}


.reproducao-modal-combinacoes-lista::-webkit-scrollbar-thumb {
	background:
		rgba(139, 92, 246, 0.38);

	border-radius: 999px;
}


.reproducao-modal-combinacoes-lista::-webkit-scrollbar-thumb:hover {
	background:
		rgba(139, 92, 246, 0.62);
}


/**
 * =========================================================
 * OPÇÃO DE COMBINAÇÃO
 * =========================================================
 */

.reproducao-modal-combinacao-opcao {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		42px
		minmax(0, 1fr)
		42px
		minmax(0, 1fr);

	align-items: center;

	gap: 8px;

	width: 100%;
	min-height: 82px;

	margin: 0;
	padding: 10px 14px;

	border: 1px solid #e4e0ea;
	border-radius: 15px;

	background: #ffffff;
	color: #18181b;

	font: inherit;

	text-align: left;

	cursor: pointer;

	box-shadow:
		0 3px 12px rgba(82, 55, 140, 0.035);

	transition:
		border-color 0.18s ease,
		background 0.18s ease,
		transform 0.18s ease,
		box-shadow 0.18s ease;
}


.reproducao-modal-combinacao-opcao:hover {
	border-color: #cdb8ff;

	background: #faf8ff;

	box-shadow:
		0 7px 20px rgba(139, 92, 246, 0.10);

	transform: translateY(-1px);
}


/**
 * OPÇÃO SELECIONADA
 */

.reproducao-modal-combinacao-opcao.selecionada {
	border-color: #8b5cf6;

	background:
		linear-gradient(
			135deg,
			#faf7ff 0%,
			#f4efff 100%
		);

	box-shadow:
		0 0 0 2px rgba(139, 92, 246, 0.08),
		0 7px 20px rgba(139, 92, 246, 0.10);
}


.reproducao-modal-combinacao-opcao.selecionada::after {
	content: "Selecionada";

	position: absolute;

	top: 7px;
	right: 9px;

	padding: 3px 7px;

	border-radius: 999px;

	background: #8b5cf6;
	color: #ffffff;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}


/**
 * =========================================================
 * PAL DENTRO DA COMBINAÇÃO
 * =========================================================
 */

.reproducao-modal-combinacao-pal {
	display: flex;
	align-items: center;

	gap: 10px;

	min-width: 0;
}


.reproducao-modal-combinacao-imagem {
	display: block;

	flex: 0 0 56px;

	width: 56px !important;
	height: 56px !important;

	padding: 4px;

	border: 1px solid #d6c5ff;
	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f8f5ff
		);

	object-fit: contain;

	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.05);
}


.reproducao-modal-combinacao-nome {
	overflow: hidden;

	min-width: 0;

	color: #28242f;

	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;

	text-overflow: ellipsis;
	white-space: nowrap;
}


/**
 * =========================================================
 * OPERADORES + E =
 * =========================================================
 */

.reproducao-modal-combinacao-operador {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	margin: auto;

	border: 1px solid #d6c5ff;
	border-radius: 50%;

	background: #f5f1ff;
	color: #8b5cf6;

	font-size: 19px;
	font-weight: 900;
	line-height: 1;

	box-shadow:
		0 3px 10px rgba(139, 92, 246, 0.08);
}


/**
 * =========================================================
 * LISTA VAZIA
 * =========================================================
 */

.reproducao-modal-combinacoes-vazio {
	margin: 0;

	padding: 42px 20px;

	color: #626273;

	font-size: 13px;
	font-weight: 600;

	text-align: center;
}


/**
 * =========================================================
 * TABLET - MODAL DE COMBINAÇÕES
 * =========================================================
 */

@media (max-width: 850px) {

	.reproducao-modal-combinacoes {
		padding: 15px;
	}


	.reproducao-modal-combinacoes-caixa {
		max-height: 90vh;

		border-radius: 18px;
	}


	.reproducao-modal-combinacao-opcao {
		grid-template-columns:
			minmax(0, 1fr)
			34px
			minmax(0, 1fr)
			34px
			minmax(0, 1fr);

		gap: 5px;

		padding: 10px;
	}


	.reproducao-modal-combinacao-pal {
		flex-direction: column;
		justify-content: center;

		gap: 5px;

		text-align: center;
	}


	.reproducao-modal-combinacao-imagem {
		flex-basis: 50px;

		width: 50px !important;
		height: 50px !important;
	}


	.reproducao-modal-combinacao-nome {
		width: 100%;

		font-size: 10px;

		text-align: center;
	}


	.reproducao-modal-combinacao-operador {
		width: 30px;
		height: 30px;

		font-size: 17px;
	}

}


/**
 * =========================================================
 * MOBILE - MODAL DE COMBINAÇÕES
 * =========================================================
 */

@media (max-width: 600px) {

	.reproducao-modal-combinacoes {
		align-items: flex-end;

		padding: 0;
	}


	.reproducao-modal-combinacoes-caixa {
		width: 100%;
		max-height: 92vh;

		border-right: 0;
		border-bottom: 0;
		border-left: 0;

		border-radius:
			20px
			20px
			0
			0;
	}


	.reproducao-modal-combinacoes-topo {
		gap: 12px;

		padding: 19px 16px 15px;
	}


	.reproducao-modal-combinacoes-titulo {
		font-size: 17px;
	}


	.reproducao-modal-combinacoes-fechar {
		flex-basis: 36px;

		width: 36px;
		height: 36px;

		border-radius: 10px;

		font-size: 23px;
	}


	.reproducao-modal-combinacoes-pesquisa {
		padding: 12px 14px;
	}


	.reproducao-modal-combinacoes-input {
		height: 46px;

		font-size: 13px;
	}


	.reproducao-modal-combinacoes-lista {
		gap: 7px;

		padding: 10px;
	}


	.reproducao-modal-combinacao-opcao {
		grid-template-columns:
			minmax(0, 1fr)
			26px
			minmax(0, 1fr)
			26px
			minmax(0, 1fr);

		gap: 3px;

		min-height: 88px;

		padding: 9px 5px;

		border-radius: 13px;
	}


	.reproducao-modal-combinacao-imagem {
		flex-basis: 43px;

		width: 43px !important;
		height: 43px !important;

		padding: 3px;
	}


	.reproducao-modal-combinacao-nome {
		font-size: 9px;
		line-height: 1.25;

		white-space: normal;
	}


	.reproducao-modal-combinacao-operador {
		width: 24px;
		height: 24px;

		border: 0;

		background: transparent;

		box-shadow: none;

		font-size: 17px;
	}


	.reproducao-modal-combinacao-opcao.selecionada::after {
		display: none;
	}


	.reproducao-combinacoes-botao {
		min-height: 48px;

		padding-left: 14px;

		font-size: 12px;
	}

}

/**
 * =========================================================
 * RAMIFICAÇÃO DA ÁRVORE
 * =========================================================
 */

.reproducao-pais-area {
	width: 100%;
}

.reproducao-ramo {
	position: relative;

	width: 100%;

	padding-top: 44px;
}

.reproducao-linha-central {
	position: absolute;

	top: 0;
	left: 50%;

	width: 2px;
	height: 44px;

	background: var(--reproducao-roxo-claro);

	opacity: 0.80;

	transform: translateX(-50%);
}

.reproducao-pais {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		46px
		minmax(0, 1fr);

	align-items: start;

	width: 100%;
}

.reproducao-pais::before {
	content: "";

	position: absolute;

	top: 0;

	left: calc(25% - 12px);
	right: calc(25% - 12px);

	height: 2px;

	background: var(--reproducao-roxo-claro);

	opacity: 0.80;
}

.reproducao-pai-coluna {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 0;

	padding-top: 25px;
}

.reproducao-pai-coluna::before {
	content: "";

	position: absolute;

	top: 0;
	left: 50%;

	width: 2px;
	height: 25px;

	background: var(--reproducao-roxo-claro);

	opacity: 0.80;

	transform: translateX(-50%);
}


/**
 * =========================================================
 * OPERADOR CENTRAL
 * =========================================================
 *
 * Mantemos o elemento no grid apenas para preservar
 * o espaçamento entre Pai A e Pai B.
 *
 * O símbolo + não é mais exibido.
 */

.reproducao-operador {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	margin: 0 auto;

	visibility: hidden;

	pointer-events: none;
}


/**
 * =========================================================
 * PALS DOS RAMOS
 * ÍCONES CIRCULARES
 * =========================================================
 */

.reproducao-pai-card {
	position: relative;
	overflow: hidden;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 80px;
	height: 80px;
	min-height: 0;

	padding: 0;

	border: 2px solid var(--reproducao-borda-roxa);
	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f9f7ff
		);

	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.06),
		0 6px 18px rgba(91, 62, 150, 0.10);
}

.reproducao-pai-card::before {
	content: "";

	position: absolute;
	z-index: 2;

	inset: 4px;

	border: 1px solid rgba(139, 92, 246, 0.13);
	border-radius: 50%;

	pointer-events: none;
}

.reproducao-pai-imagem {
	position: relative;
	z-index: 1;

	display: block;
	flex: none;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/**
 * =========================================================
 * GÊNERO
 * =========================================================
 */

.reproducao-genero {
	display: inline-flex;
	align-items: center;

	margin-top: 5px;
	padding: 3px 7px;

	border: 1px solid var(--reproducao-borda-roxa);
	border-radius: 999px;

	background: var(--reproducao-roxo-suave);
	color: var(--reproducao-roxo);

	font-size: 9px;
	font-weight: 800;
	line-height: 1.2;
}

.reproducao-genero-macho,
.reproducao-genero-femea {
	background: var(--reproducao-roxo-suave);
	color: var(--reproducao-roxo);
}


/**
 * =========================================================
 * BOTÃO + PARA EXPANDIR
 * =========================================================
 */

.reproducao-expandir-controle {
	position: relative;

	display: flex;
	justify-content: center;

	width: 100%;
	height: 16px;
}





.reproducao-expandir {
	position: absolute;

	top: -16px;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	margin: 0;
	padding: 0;

	border: 1px solid var(--reproducao-borda-roxa);
	border-radius: 50%;

	background: var(--reproducao-roxo-suave);
	color: var(--reproducao-roxo);

	font: inherit;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;

	cursor: pointer;

	box-shadow:
		0 4px 12px rgba(139, 92, 246, 0.12);

	transition:
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.reproducao-expandir:hover {
	border-color: var(--reproducao-roxo);

	background: var(--reproducao-roxo);
	color: #ffffff;

	box-shadow:
		0 6px 18px rgba(139, 92, 246, 0.25);

	transform: scale(1.08);
}

.reproducao-expandir.ativo {
	border-color: var(--reproducao-roxo);

	background: var(--reproducao-roxo);
	color: #ffffff;
}

.reproducao-expansao {
	width: 100%;

	margin-top: 0;
	padding-top: 0;
}

/**
 * =========================================================
 * AVISOS
 * =========================================================
 */

.reproducao-limite,
.reproducao-aviso-ciclo,
.reproducao-sem-combinacoes {
	margin: 10px 0 0;

	padding: 8px 11px;

	border: 1px solid var(--reproducao-borda);
	border-radius: 9px;

	background: var(--reproducao-roxo-fundo);
	color: var(--reproducao-texto-2);

	font-size: 10px;
	line-height: 1.45;

	text-align: center;
}


/**
 * =========================================================
 * MODAL
 * =========================================================
 */

body.reproducao-modal-aberto {
	overflow: hidden;
}

.reproducao-modal {
	position: fixed;
	z-index: 999999;

	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 20px;
}

.reproducao-modal-fundo {
	position: absolute;

	inset: 0;

	background: rgba(35, 25, 55, 0.48);

	backdrop-filter: blur(5px);
}

.reproducao-modal-conteudo {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;

	width: min(100%, 680px);
	max-height: min(760px, 88vh);

	overflow: hidden;

	border: 1px solid var(--reproducao-borda);
	border-radius: 20px;

	background: #ffffff;

	box-shadow:
		0 25px 80px rgba(62, 42, 100, 0.22);
}

.reproducao-modal-conteudo::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;
	right: 0;

	height: 3px;

	background:
		linear-gradient(
			90deg,
			var(--reproducao-roxo),
			var(--reproducao-roxo-claro)
		);
}

.reproducao-modal-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	padding: 20px 22px;

	border-bottom: 1px solid var(--reproducao-borda);

	background: #ffffff;
}

.reproducao-modal-topo h2 {
	margin: 0;

	color: var(--reproducao-texto);

	font-size: 21px;
	font-weight: 900;
}

.reproducao-modal-etiqueta {
	margin-bottom: 3px;

	font-size: 9px;
}


/**
 * =========================================================
 * BOTÃO FECHAR MODAL
 * =========================================================
 */

.reproducao-modal-fechar {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 38px;

	width: 38px;
	height: 38px;

	padding: 0;

	border: 1px solid var(--reproducao-borda-roxa);
	border-radius: 10px;

	background: var(--reproducao-roxo-suave);
	color: var(--reproducao-roxo);

	font-size: 25px;
	line-height: 1;

	cursor: pointer;

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		color 0.2s ease;
}

.reproducao-modal-fechar:hover {
	border-color: var(--reproducao-roxo);

	background: var(--reproducao-roxo);
	color: #ffffff;
}


/**
 * =========================================================
 * PESQUISA DO MODAL
 * =========================================================
 */

.reproducao-pesquisa {
	padding: 16px 22px;

	border-bottom: 1px solid var(--reproducao-borda);

	background: #faf9fd;
}

.reproducao-pesquisa-label {
	display: block;

	margin-bottom: 6px;

	color: var(--reproducao-roxo);

	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
}

.reproducao-pesquisa-input {
	display: block;

	width: 100%;
	height: 48px;

	padding: 0 14px;

	border: 1px solid var(--reproducao-borda);
	border-radius: 11px;

	outline: none;

	background: #ffffff;
	color: var(--reproducao-texto);

	font: inherit;
	font-size: 14px;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.reproducao-pesquisa-input::placeholder {
	color: var(--reproducao-texto-3);
}

.reproducao-pesquisa-input:hover {
	border-color: var(--reproducao-borda-roxa);
}

.reproducao-pesquisa-input:focus {
	border-color: var(--reproducao-roxo);

	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.10);
}


/**
 * =========================================================
 * LISTA DE PALS
 * =========================================================
 */

.reproducao-lista-pals {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 8px;

	overflow-y: auto;

	padding: 14px;

	background: #ffffff;

	scrollbar-width: thin;

	scrollbar-color:
		rgba(139, 92, 246, 0.35)
		rgba(139, 92, 246, 0.05);
}

.reproducao-pal-opcao {
	display: flex;
	align-items: center;

	gap: 10px;

	min-width: 0;
	min-height: 72px;

	padding: 8px 10px;

	border: 1px solid var(--reproducao-borda);
	border-radius: 12px;

	background: #ffffff;
	color: var(--reproducao-texto);

	text-align: left;

	cursor: pointer;

	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.reproducao-pal-opcao:hover {
	border-color: var(--reproducao-borda-roxa);

	background: var(--reproducao-roxo-fundo);

	box-shadow:
		0 5px 16px rgba(139, 92, 246, 0.08);

	transform: translateY(-1px);
}

.reproducao-pal-opcao .reproducao-imagem-pal {
	flex: 0 0 54px;

	width: 54px;
	height: 54px;

	padding: 3px;

	border: 1px solid var(--reproducao-borda-roxa);
	border-radius: 50%;

	background: #ffffff;

	object-fit: contain;
}

.reproducao-pal-opcao-conteudo {
	display: flex;
	flex-direction: column;

	min-width: 0;
}

.reproducao-pal-opcao-conteudo strong {
	overflow: hidden;

	color: var(--reproducao-texto);

	font-size: 13px;
	font-weight: 800;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.reproducao-pal-opcao-conteudo span {
	margin-top: 3px;

	color: var(--reproducao-texto-3);

	font-size: 10px;
}

.reproducao-lista-vazia,
.reproducao-lista-carregando {
	grid-column: 1 / -1;

	padding: 30px 15px;

	color: var(--reproducao-texto-2);

	font-size: 13px;

	text-align: center;
}


/**
 * =========================================================
 * IMAGENS
 * =========================================================
 */

.reproducao-imagem-pal {
	display: block;

	max-width: 100%;
}


/**
 * =========================================================
 * TABLET
 * =========================================================
 */

@media (max-width: 850px) {

	.reproducao-selecao {
		align-items: stretch;
		flex-direction: column;

		gap: 18px;
	}

	.reproducao-selecao-acoes {
		width: 100%;
	}

	.reproducao-seletor-pal {
		flex: 1;

		width: auto;
	}

	.reproducao-arvore-secao {
		padding: 28px 18px;
	}

}


/**
 * =========================================================
 * MOBILE
 * =========================================================
 */

@media (max-width: 600px) {

	.reproducao-palworld {
		--reproducao-raio: 14px;
	}

	.reproducao-cabecalho {
		margin-bottom: 12px;

		padding: 22px 18px;

		border-radius: 16px;
	}

	.reproducao-cabecalho-titulo {
		font-size: 27px;
	}

	.reproducao-cabecalho-texto {
		font-size: 13px;
	}

	.reproducao-caixa {
		border-radius: 16px;
	}

	.reproducao-selecao {
		padding: 20px 16px;
	}

	.reproducao-selecao-acoes {
		align-items: stretch;
		flex-direction: column;
	}

	.reproducao-seletor-pal {
		width: 100%;
		min-height: 72px;
	}

	.reproducao-botao-limpar {
		width: 100%;
	}

	.reproducao-barra {
		grid-template-columns: 1fr;
	}

	.reproducao-barra-item {
		padding: 10px 15px;

		border-right: 0;
		border-bottom: 1px solid var(--reproducao-borda);
	}

	.reproducao-barra-item:last-child {
		border-bottom: 0;
	}

	.reproducao-arvore-secao {
		min-height: 300px;

		padding: 25px 10px;
	}

	/*
	 * A árvore mantém largura mínima.
	 * Em telas pequenas, o usuário navega
	 * horizontalmente sem esmagar os ramos.
	 */
	.reproducao-arvore {
		min-width: 620px;
	}

	.reproducao-card-pal {
		width: 82px;
		height: 82px;

		padding: 0;
	}

	.reproducao-card-pal-imagem {
		width: 100%;
		height: 100%;
	}

	.reproducao-pai-card {
		width: 72px;
		height: 72px;

		padding: 0;
	}

	.reproducao-pai-imagem {
		width: 100%;
		height: 100%;
	}

	.reproducao-combinacoes {
		width: min(100%, 580px);
	}

	.reproducao-modal {
		padding: 10px;
	}

	.reproducao-modal-conteudo {
		max-height: 92vh;

		border-radius: 16px;
	}

	.reproducao-modal-topo {
		padding: 16px;
	}

	.reproducao-pesquisa {
		padding: 13px 16px;
	}

	.reproducao-lista-pals {
		grid-template-columns: 1fr;

		padding: 10px;
	}

}