.jt-jogo {
	--jt-cor: #6c5ce7;
	--jt-suave: #f3f1ff;
	--jt-texto: #1f2430;
	max-width: 760px;
	margin: 1.5em auto;
	padding: 18px;
	box-sizing: border-box;
	background: #fff;
	color: var(--jt-texto);
	border: 2px solid var(--jt-cor);
	border-radius: 16px;
	line-height: 1.4;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.jt-jogo { --jt-suave: color-mix(in srgb, var(--jt-cor) 14%, #fff); }
}
.jt-jogo *, .jt-jogo *::before, .jt-jogo *::after { box-sizing: border-box; }

.jt-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.jt-titulo { margin: 0; font-size: 1.25em; color: var(--jt-cor); }
.jt-info { margin: 0 0 10px; font-weight: 600; }
.jt-dica { margin: 0 0 10px; font-size: .9em; opacity: .75; }
.jt-oculto { display: none !important; }

.jt-btn {
	background: var(--jt-cor); color: #fff; border: 2px solid var(--jt-cor);
	padding: 9px 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
}
.jt-btn:hover, .jt-btn:focus-visible { filter: brightness(1.1); }
.jt-btn-sec { background: #fff; color: var(--jt-cor); }

/* Menu */
.jt-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.jt-card-menu {
	display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px;
	background: var(--jt-suave); color: var(--jt-texto); border: 2px solid transparent; border-radius: 14px;
	font: inherit; font-weight: 600; cursor: pointer; transition: transform .15s, border-color .15s;
}
.jt-card-menu:hover, .jt-card-menu:focus-visible { transform: translateY(-2px); border-color: var(--jt-cor); }
.jt-ico { font-size: 2em; }

/* Caça-palavras */
.jt-caca { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.jt-grade { display: grid; gap: 2px; flex: 1 1 320px; max-width: 520px; touch-action: none; user-select: none; -webkit-user-select: none; }
.jt-cel {
	aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	background: var(--jt-suave); border-radius: 6px; font-weight: 700; cursor: pointer;
	font-size: clamp(11px, 3vw, 20px);
}
.jt-cel.jt-achada { background: #2ecc71; color: #fff; }
.jt-cel.jt-sel { background: var(--jt-cor); color: #fff; }
.jt-palavras { list-style: none; margin: 0; padding: 0; flex: 1 1 140px; display: grid; gap: 6px; }
.jt-palavras li { padding: 6px 10px; background: var(--jt-suave); border-radius: 8px; font-weight: 600; }
.jt-palavras li.jt-feito { text-decoration: line-through; opacity: .55; }

/* Memória */
.jt-memoria { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.jt-carta { perspective: 700px; border: 0; background: none; padding: 0; aspect-ratio: 1; cursor: pointer; }
.jt-carta-in { position: relative; width: 100%; height: 100%; transition: transform .4s; transform-style: preserve-3d; }
.jt-carta.jt-virada .jt-carta-in, .jt-carta.jt-par .jt-carta-in { transform: rotateY(180deg); }
.jt-face {
	position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
	border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
}
.jt-verso { background: var(--jt-cor); color: #fff; font-size: 2em; font-weight: 700; }
.jt-frente { transform: rotateY(180deg); background: #fff; border: 2px solid var(--jt-cor); }
.jt-frente img { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.jt-leg { font-size: .75em; font-weight: 600; padding: 2px 4px; text-align: center; }
.jt-par .jt-frente { border-color: #2ecc71; }

/* Quiz / música */
.jt-pergunta { margin: 0 0 12px; font-size: 1.15em; }
.jt-audio { width: 100%; margin-bottom: 12px; }
.jt-opcoes { display: grid; gap: 8px; margin-bottom: 14px; }
.jt-opcao {
	padding: 12px 14px; background: #fff; color: inherit; border: 2px solid var(--jt-cor);
	border-radius: 10px; font: inherit; text-align: left; cursor: pointer;
}
.jt-opcao:hover, .jt-opcao:focus-visible { background: var(--jt-suave); }
.jt-opcao.jt-certa { background: #2ecc71; border-color: #2ecc71; color: #fff; }
.jt-opcao.jt-errada { background: #e74c3c; border-color: #e74c3c; color: #fff; }

/* Imagem e palavra */
.jt-banco { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; min-height: 42px; }
.jt-chip {
	padding: 8px 16px; background: var(--jt-suave); color: inherit; border: 2px solid var(--jt-cor);
	border-radius: 999px; font: inherit; font-weight: 700; cursor: grab;
}
.jt-chip.jt-sel { background: var(--jt-cor); color: #fff; }
.jt-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.jt-slot { border: 2px dashed var(--jt-cor); border-radius: 12px; padding: 8px; text-align: center; background: #fff; cursor: pointer; }
.jt-slot img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.jt-slot-pal { min-height: 1.6em; margin-top: 6px; font-weight: 700; }
.jt-slot.jt-ok { border: 2px solid #2ecc71; }
.jt-slot.jt-erro { border-color: #e74c3c; animation: jt-tremer .4s; }
@keyframes jt-tremer {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

/* Fim de jogo */
.jt-fim { margin-top: 18px; padding: 18px; text-align: center; background: var(--jt-suave); border-radius: 14px; }
.jt-fim-ico { font-size: 2.4em; }
.jt-fim h4 { margin: 4px 0; font-size: 1.2em; }
.jt-fim p { margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
	.jt-carta-in, .jt-card-menu { transition: none; }
	.jt-slot.jt-erro { animation: none; }
}