/* Diagnóstico Upscore — o jogo. Sóbrio: preto e ouro, tudo centrado, uma pergunta por tela. */

/* A área ocupa a tela abaixo do cabeçalho (--up-diag-topo vem do JS); o conteúdo fica no centro em qualquer formato. */
.up-diag {
	min-height: calc(100vh - var(--up-diag-topo, 76px));
	min-height: calc(100svh - var(--up-diag-topo, 76px));
	display: grid; place-items: center;
	padding: clamp(1.25rem, 4vh, 3rem) clamp(1rem, 4vw, 2rem);
	text-align: center;
}
/* Primeira tela: tabuleiro com gráficos ao fundo, escurecido atrás do texto */
.up-diag.is-inicio {
	background:
		radial-gradient(ellipse 70% 60% at 50% 46%, rgba(6, 8, 7, .78) 0%, rgba(6, 8, 7, .5) 60%, rgba(6, 8, 7, .2) 100%),
		linear-gradient(180deg, rgba(6, 8, 7, .85) 0%, rgba(6, 8, 7, .1) 45%, rgba(6, 8, 7, .7) 100%),
		url(../img/fotos/xadrez-dados.webp) 50% 62% / cover no-repeat #060807;
}
.up-diag a:not(.up-diag-botao) { color: var(--wp--preset--color--ouro); }

.up-diag-tela {
	width: 100%; max-width: 580px; margin: 0 auto;
	display: flex; flex-direction: column; align-items: center;
	animation: up-diag-entra .45s cubic-bezier(.2, .7, .2, 1) both;
}
.up-diag-t-resultado { max-width: 960px; }
@keyframes up-diag-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* Tipografia: contida no desktop, legível no celular */
.up-diag .up-rotulo { margin: 0 0 .9rem; }
.up-diag-titulo { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.2; margin: 0 0 1rem; max-width: 18ch; }
.up-diag-pergunta { font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 300; line-height: 1.4; margin: 0 0 1.6rem; max-width: 30ch; }
.up-diag-nome { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .6rem; }
.up-diag-nivel { font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin: 1rem 0 .5rem; }
.up-diag-texto { color: var(--wp--preset--color--suave); font-size: .95rem; line-height: 1.6; margin: 0 0 1.6rem; max-width: 46ch; }
.up-diag-t-fase .up-diag-pergunta { margin-bottom: .6rem; }

/* Barra de progresso */
.up-diag-topo { display: grid; grid-template-columns: 5.5rem 1fr 5.5rem; align-items: center; gap: 1rem; width: 100%; margin-bottom: 2.2rem; }
.up-diag-trilho { height: 4px; border-radius: 4px; background: var(--wp--preset--color--linha); overflow: hidden; }
.up-diag-trilho i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--up-ouro); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.up-diag-pct { font-size: .75rem; color: var(--wp--preset--color--suave); text-align: right; font-variant-numeric: tabular-nums; }
.up-diag-voltar { background: none; border: 0; padding: .3rem 0; cursor: pointer; font: inherit; font-size: .8rem; color: var(--wp--preset--color--suave); text-align: left; transition: color .2s; }
.up-diag-voltar:hover { color: var(--wp--preset--color--ouro); }
.up-diag-voltar-fim { margin-top: 1.5rem; text-align: center; }

/* Opções: entram em sequência, acendem ao toque */
.up-diag-opcoes { display: grid; gap: .65rem; width: 100%; max-width: 460px; }
.up-diag-opcao {
	position: relative; overflow: hidden; cursor: pointer; font: inherit; font-size: .95rem; color: inherit; text-align: center;
	padding: .95rem 1.2rem; border-radius: 14px; border: var(--up-borda);
	background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
	transition: border-color .25s, background-color .25s, transform .25s, box-shadow .25s;
	animation: up-diag-opcao .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 60ms + 120ms);
}
@keyframes up-diag-opcao { from { opacity: 0; transform: translateY(10px); } }
.up-diag-opcao::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg, transparent 30%, rgba(243, 230, 184, .22) 50%, transparent 70%);
	transform: translateX(-120%);
}
.up-diag-opcao:hover, .up-diag-opcao:focus-visible { border-color: rgba(194, 179, 138, .7); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); outline: 0; }
.up-diag-opcao.is-marcada { border-color: var(--wp--preset--color--ouro); background: rgba(194, 179, 138, .14); box-shadow: 0 0 0 1px rgba(194, 179, 138, .5), 0 0 34px rgba(194, 179, 138, .2); }
.up-diag-opcao.is-marcada::after { transform: translateX(120%); transition: transform .5s ease; }
.up-diag-opcao:disabled { cursor: default; }

/* Botões */
.up-diag-start, .up-diag-botao {
	display: inline-flex; align-items: center; justify-content: center; gap: .7rem; cursor: pointer; border: 0; text-decoration: none;
	font-family: var(--wp--preset--font-family--larga); font-weight: 300; letter-spacing: .2em; text-transform: uppercase;
	color: #060807; background: var(--up-ouro); background-size: 200% auto; border-radius: 999px;
	padding: .9rem 1.9rem; font-size: .78rem;
	transition: transform .25s, box-shadow .25s, background-position .6s;
}
.up-diag-start { font-size: .95rem; letter-spacing: .34em; padding: 1.05rem 2.4rem 1.05rem 2rem; animation: up-diag-pulso 2.6s ease-in-out infinite; }
.up-diag-play { width: 1.15em; height: 1.15em; flex: none; }
@keyframes up-diag-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 179, 138, .45), 0 0 40px rgba(194, 179, 138, .2); } 50% { box-shadow: 0 0 0 14px rgba(194, 179, 138, 0), 0 0 60px rgba(194, 179, 138, .35); } }
.up-diag-start:hover, .up-diag-botao:hover { transform: translateY(-2px); background-position: 100% center; box-shadow: 0 0 50px rgba(194, 179, 138, .4); color: #060807; }
.up-diag-botao:disabled { opacity: .6; cursor: default; transform: none; }
.up-diag-selos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin: 2rem 0 0; padding: 0; font-size: .75rem; color: var(--wp--preset--color--suave); }
.up-diag-selos li::before { content: "◆"; color: var(--wp--preset--color--ouro); font-size: .5rem; margin-right: .5rem; vertical-align: .2em; }

/* Abertura de cada etapa */
.up-diag-emblema { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 0 1.2rem; border: 1px solid rgba(194, 179, 138, .55); position: relative; }
.up-diag-emblema::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(194, 179, 138, .35); animation: up-diag-gira 14s linear infinite; }
.up-diag-emblema span { font-family: var(--wp--preset--font-family--titulo); font-weight: 200; font-size: 1.7rem; color: var(--wp--preset--color--ouro-claro); }
@keyframes up-diag-gira { to { transform: rotate(360deg); } }

/* Tela de cálculo */
.up-diag-carga { width: 100%; max-width: 420px; }
.up-diag-carga .up-diag-trilho { height: 6px; }
.up-diag-carga .up-diag-trilho i { transition: none; box-shadow: 0 0 18px rgba(243, 230, 184, .6); }
.up-diag-carga-linha { display: flex; justify-content: space-between; margin-top: .8rem; font-size: .8rem; color: var(--wp--preset--color--suave); }
.up-diag-carga-linha b { color: var(--wp--preset--color--ouro); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Mostrador da nota */
.up-diag-mostrador { position: relative; width: clamp(150px, 22vw, 190px); aspect-ratio: 1; }
.up-diag-mostrador svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 16px rgba(194, 179, 138, .25)); }
.up-diag-aro { fill: none; stroke: var(--wp--preset--color--linha); stroke-width: 4; }
.up-diag-arco { fill: none; stroke: url(#up-diag-g); stroke-width: 4; stroke-linecap: round; }
.up-diag-mostrador-num { position: absolute; inset: 0; display: grid; place-content: center; }
.up-diag-mostrador-num b { font-family: var(--wp--preset--font-family--titulo); font-weight: 200; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.up-diag-mostrador-num span { font-size: .72rem; color: var(--wp--preset--color--suave); margin-top: .2rem; }

/* Formulário */
.up-diag-form { display: grid; gap: 1rem; width: 100%; margin-top: .4rem; padding-top: 1.6rem; border-top: var(--up-borda); justify-items: center; }
.up-diag-form .up-diag-texto { margin: 0; }
.up-diag-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; width: 100%; }
.up-diag-campos label { display: grid; gap: .35rem; font-size: .78rem; color: var(--wp--preset--color--suave); text-align: left; }
.up-diag-campos input { font: inherit; font-size: .95rem; color: var(--wp--preset--color--perola); background: #0E1211; border: var(--up-borda); border-radius: 12px; padding: .75rem .95rem; width: 100%; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; }
.up-diag-campos input:focus { outline: 0; border-color: var(--wp--preset--color--ouro); box-shadow: 0 0 0 3px rgba(194, 179, 138, .15); }
.up-diag-aceite { display: flex; gap: .6rem; align-items: flex-start; font-size: .76rem; line-height: 1.5; color: var(--wp--preset--color--suave); text-align: left; max-width: 46ch; }
.up-diag-aceite input { margin-top: .2rem; accent-color: #C2B38A; flex: none; }
.up-diag-armadilha { position: absolute !important; left: -9999px; }
.up-diag-erro { color: #E8B4A0; font-size: .82rem; margin: 0; }

/* Resultado completo */
.up-diag-niveis { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; width: 100%; max-width: 580px; margin: .4rem 0 0; }
.up-diag-niveis span { display: grid; gap: .2rem; justify-items: center; font-size: .66rem; color: var(--wp--preset--color--suave); border-top: 2px solid var(--wp--preset--color--linha); padding-top: .5rem; }
.up-diag-niveis b { font-family: var(--wp--preset--font-family--titulo); font-weight: 300; font-size: 1rem; }
.up-diag-niveis .is-atual { color: var(--wp--preset--color--ouro-claro); border-top-color: var(--wp--preset--color--ouro); }
.up-diag .up-diag-secao { margin: 3rem 0 1.2rem; }

.up-diag-cartoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; text-align: left; }
.up-diag-cartao {
	padding: 1.5rem; border-radius: 18px; border: var(--up-borda);
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
	animation: up-diag-opcao .6s cubic-bezier(.2, .7, .2, 1) both;
}
.up-diag-cartao:nth-child(2) { animation-delay: .1s; } .up-diag-cartao:nth-child(3) { animation-delay: .2s; } .up-diag-cartao:nth-child(4) { animation-delay: .3s; }
.up-diag-cartao header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.up-diag-cartao h3 { margin: 0 0 .25rem; font-family: var(--wp--preset--font-family--larga); font-weight: 300; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; }
.up-diag-cartao small { color: var(--wp--preset--color--suave); font-size: .76rem; line-height: 1.4; display: block; }
.up-diag-cartao header b { font-family: var(--wp--preset--font-family--titulo); font-weight: 200; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.up-diag-classe { margin: .7rem 0 .5rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--ouro); }
.up-diag-analise { margin: 0 0 1rem; font-size: .88rem; line-height: 1.6; }
.up-diag-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; border-top: var(--up-borda); }
.up-diag-itens li { display: grid; grid-template-columns: 8px 1fr auto; gap: .7rem; align-items: center; padding: .65rem 0; border-bottom: var(--up-borda); font-size: .8rem; }
.up-diag-itens li:last-child { border-bottom: 0; padding-bottom: 0; }
.up-diag-itens i { width: 8px; height: 8px; border-radius: 50%; background: #B4705C; }
.up-diag-itens .is-2 i { background: #C2B38A; } .up-diag-itens .is-3 i { background: #8FBF9A; }
.up-diag-itens b { display: block; font-weight: 600; } .up-diag-itens span { color: var(--wp--preset--color--suave); }
.up-diag-itens em { font-style: normal; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--suave); white-space: nowrap; }

.up-diag-prioridades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: 100%; }
.up-diag-prioridades article { padding: 1.4rem 1.2rem; border-radius: 18px; border: 1px solid rgba(194, 179, 138, .35); background: rgba(194, 179, 138, .05); }
.up-diag-prioridades span { display: block; font-family: var(--wp--preset--font-family--titulo); font-weight: 200; font-size: 1.8rem; line-height: 1; color: var(--wp--preset--color--ouro); margin-bottom: .6rem; }
.up-diag-prioridades b { display: block; font-family: var(--wp--preset--font-family--larga); font-weight: 300; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--ouro); margin-bottom: .4rem; }
.up-diag-prioridades p { margin: 0; font-size: .88rem; line-height: 1.55; }
.up-diag-t-resultado > .up-diag-botao { margin-top: 2rem; }

.up-diag-devolutiva { width: 100%; max-width: 580px; box-sizing: border-box; margin-top: 3rem; padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; }
.up-diag-devolutiva h3 { margin: 0 0 .6rem; font-size: 1.15rem; }
.up-diag-rodape { color: var(--wp--preset--color--suave); font-size: .74rem; margin: 1.5rem 0 0; }

@media (max-width: 720px) {
	.up-diag-cartoes, .up-diag-prioridades, .up-diag-campos { grid-template-columns: 1fr; }
	.up-diag-topo { grid-template-columns: 4.2rem 1fr 2.4rem; gap: .7rem; }
	.up-diag-itens li { grid-template-columns: 8px 1fr; } .up-diag-itens em { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.up-diag-tela, .up-diag-opcao, .up-diag-cartao, .up-diag-start, .up-diag-emblema::before { animation: none; }
	.up-diag-trilho i, .up-diag-opcao, .up-diag-start, .up-diag-botao { transition: none; }
}