/* =========================================================
   MINIJUEGOS — ESTILO BASE
   ---------------------------------------------------------
   Estilo neutro a propósito: solo lo necesario para que los
   juegos funcionen. La estética la definís vos.

   1) Lo más rápido: cambiá las variables de :root.
   2) Para más control: cada parte tiene su clase (ver LEEME.md).

   Adaptación a pantallas: los juegos se acomodan según el ANCHO
   DEL JUEGO (container queries), no de la pantalla, así funcionan
   igual en una columna angosta o a pantalla completa.
   Estados que pone el JavaScript (no cambies sus nombres):
   .is-correcta .is-incorrecta .is-volteada .is-encontrada
   .is-marcada .is-faltante
   .is-error .is-seleccionada .is-inicio .is-visible .is-nuevo
   .is-urgente .is-perdido .is-guardado
   ========================================================= */

:root {
	--mj-fondo: #ffffff;
	--mj-texto: #222222;
	--mj-texto-suave: #666666;
	--mj-borde: #d0d0d0;
	--mj-principal: #333333;
	--mj-principal-texto: #ffffff;
	--mj-correcto: #2e7d32;
	--mj-incorrecto: #c62828;
	--mj-resaltado: #ffe082;
	--mj-marcada: #90caf9; /* sopa de letras: marcada, todavía sin corregir */
	--mj-radio: 8px;
	--mj-fuente: inherit;
	--mj-ancho-max: 40rem;
	/* Alto disponible en pantalla: el memotest y la sopa se achican para entrar enteros.
	   La página del tema le descuenta el header y el footer fijos. */
	--mj-alto-visible: 100vh;
}

@supports (height: 100svh) {
	:root {
		--mj-alto-visible: 100svh;
	}
}

/* ---------- Común a todos ---------- */
.mj {
	font-family: var(--mj-fuente);
	color: var(--mj-texto);
	background: var(--mj-fondo);
	width: 100%; /* necesario con container-type: sin esto, dentro de un flex se achica a 0 */
	max-width: var(--mj-ancho-max);
	margin: 0 auto;
	padding: clamp(12px, 3vw, 20px);
	box-sizing: border-box;
	container-type: inline-size;
	overflow-wrap: break-word;
}

.mj :focus-visible {
	outline: 3px solid var(--mj-principal);
	outline-offset: 2px;
}

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

.mj-pantalla {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mj-pantalla-inicio,
.mj-pantalla-final {
	align-items: center;
	text-align: center;
}

.mj-titulo {
	margin: 0;
}

.mj-descripcion,
.mj-mensaje {
	margin: 0;
	color: var(--mj-texto-suave);
}

.mj-barra {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	font-size: 0.9em;
	color: var(--mj-texto-suave);
}

.mj-boton {
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* tamaño mínimo cómodo para tocar con el dedo */
	padding: 10px 18px;
	border-radius: var(--mj-radio);
	border: 1px solid var(--mj-principal);
	background: transparent;
	color: var(--mj-principal);
	align-self: center;
}

.mj-boton-principal {
	background: var(--mj-principal);
	color: var(--mj-principal-texto);
}

.mj-boton[hidden] {
	display: none;
}

.mj-boton:disabled {
	cursor: default;
	opacity: 0.6;
}

.mj-record {
	margin: 0;
	font-size: 0.9em;
	color: var(--mj-texto-suave);
}

.mj-record.is-nuevo {
	font-weight: bold;
	color: var(--mj-correcto);
}

.mj-resultado {
	margin: 0;
	font-size: 2em;
	font-weight: bold;
}

.mj-final {
	display: none;
	text-align: center;
}

.mj-final.is-visible {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.mj-final p {
	margin: 0;
}

.mj-acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.mj-nivel-jugado,
.mj-aviso {
	margin: 0;
	text-align: center;
	color: var(--mj-texto-suave);
}

.mj-aviso:empty {
	display: none;
}

/* Tiempo límite (cuenta regresiva) */
.mj-temporizador.is-urgente {
	color: var(--mj-incorrecto);
	font-weight: bold;
}

/* ---------- Elección de dificultad ---------- */
.mj-elegir-nivel {
	margin: 0;
	font-weight: bold;
}

.mj-niveles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	width: 100%;
	max-width: 360px;
}

.mj-nivel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 100%;
}

.mj-nivel-nombre {
	font-weight: bold;
}

.mj-nivel-detalle,
.mj-nivel-record {
	font-size: 0.8em;
	opacity: 0.8;
}

@container (min-width: 560px) {
	.mj-niveles {
		grid-template-columns: repeat(3, 1fr);
		max-width: none;
	}
}

/* Cada botón también tiene .mj-nivel-facil, .mj-nivel-normal o .mj-nivel-dificil
   por si querés darle un color distinto a cada dificultad. */

/* ---------- Aviso de puntos de la cuenta (solo si hay sistema de puntos) ---------- */
.mj-cuenta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px;
	border: 1px dashed var(--mj-borde);
	border-radius: var(--mj-radio);
	text-align: center;
}

.mj-cuenta-texto {
	margin: 0;
}

.mj-cuenta.is-guardado {
	border-color: var(--mj-correcto);
}

.mj-cuenta.is-error {
	border-color: var(--mj-incorrecto);
}

/* ---------- Trivia y Adiviná la canción ---------- */
.mj-categoria {
	align-self: flex-start;
	font-size: 0.8em;
	text-transform: uppercase;
	color: var(--mj-texto-suave);
}

.mj-pregunta {
	margin: 0;
	font-size: 1.2em;
	font-weight: bold;
}

.mj-opciones {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

@container (min-width: 480px) {
	.mj-opciones {
		grid-template-columns: 1fr 1fr;
	}
}

.mj-opcion {
	font: inherit;
	text-align: center;
	cursor: pointer;
	min-height: 48px;
	padding: 12px;
	border: 1px solid var(--mj-borde);
	border-radius: var(--mj-radio);
	background: var(--mj-fondo);
	color: var(--mj-texto);
}

.mj-opcion:disabled {
	cursor: default;
	opacity: 1;
}

.mj-opcion.is-correcta {
	border-color: var(--mj-correcto);
	background: var(--mj-correcto);
	color: #fff;
}

.mj-opcion.is-incorrecta {
	border-color: var(--mj-incorrecto);
	background: var(--mj-incorrecto);
	color: #fff;
}

.mj-feedback:empty {
	display: none;
}

.mj-feedback {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.mj-feedback p {
	margin: 0;
}

.mj-feedback.is-correcta .mj-feedback-titulo {
	color: var(--mj-correcto);
	font-weight: bold;
}

.mj-feedback.is-incorrecta .mj-feedback-titulo {
	color: var(--mj-incorrecto);
	font-weight: bold;
}

.mj-pistas {
	margin: 0;
	padding-left: 1.4em;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mj-audio {
	width: 100%;
}

/* ---------- Memotest ---------- */
/* El tablero se achica para entrar entero en la pantalla (por ejemplo, un
   celular acostado). --mj-proporcion = ancho/alto del tablero: 4 columnas
   por 2, 3 o 4 filas según la cantidad de cartas. */
.mj-tablero {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(6px, 2cqw, 12px);
	width: 100%;
	max-width: max(12rem, calc((var(--mj-alto-visible) - 17rem) * var(--mj-proporcion, 2)));
	margin: 0 auto;
}

.mj-tablero[data-cartas="12"] {
	--mj-proporcion: 1.333;
}

.mj-tablero[data-cartas="16"] {
	--mj-proporcion: 1;
}

.mj-carta {
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	perspective: 600px;
}

.mj-carta-interior {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.4s;
	transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce) {
	.mj-carta-interior {
		transition: none;
	}
}

.mj-carta.is-volteada .mj-carta-interior {
	transform: rotateY(180deg);
}

.mj-carta-dorso,
.mj-carta-frente {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mj-radio);
	border: 1px solid var(--mj-borde);
	backface-visibility: hidden;
	overflow: hidden;
}

.mj-carta-dorso {
	background: var(--mj-principal);
}

.mj-carta-frente {
	background: var(--mj-fondo);
	transform: rotateY(180deg);
	padding: 6px;
	font-size: 0.8em;
	text-align: center;
}

.mj-carta-frente img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mj-carta.is-encontrada .mj-carta-frente {
	border-color: var(--mj-correcto);
}

.mj-carta.is-error .mj-carta-frente {
	border-color: var(--mj-incorrecto);
}

/* ---------- Sopa de letras ---------- */
.mj-sopa-letras {
	--mj-ancho-max: 60rem;
}

.mj-sopa-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* En pantallas anchas, la lista de palabras va al costado de la grilla. */
@container (min-width: 720px) {
	.mj-sopa-cuerpo {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
	}

	.mj-sopa-cuerpo .mj-grilla {
		flex: 1 1 auto;
		margin: 0;
	}

	.mj-lista-palabras {
		flex: 0 0 13rem;
		flex-direction: column;
	}
}

/* La grilla también se achica para entrar entera en la pantalla. */
.mj-grilla {
	width: 100%;
	max-width: max(16rem, calc(var(--mj-alto-visible) - 16rem));
	margin: 0 auto;
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(var(--mj-columnas, 12), 1fr);
	border: 1px solid var(--mj-borde);
	border-radius: var(--mj-radio);
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none; /* evita que el celular haga scroll al arrastrar */
}

.mj-celda {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: clamp(11px, 3.2vw, 18px);
	cursor: pointer;
}

/* La letra se ajusta al tamaño de cada casillero. */
@supports (width: 1cqw) {
	.mj-celda {
		font-size: max(10px, calc(55cqw / var(--mj-columnas, 12)));
	}
}

.mj-celda.is-marcada {
	background: var(--mj-marcada);
	color: var(--mj-texto);
}

/* Al corregir: verde = acierto, rojo = marca equivocada, recuadro = la que faltó */
.mj-celda.is-encontrada {
	background: var(--mj-correcto);
	color: #fff;
}

.mj-celda.is-incorrecta {
	background: var(--mj-incorrecto);
	color: #fff;
}

.mj-celda.is-faltante {
	box-shadow: inset 0 0 0 2px var(--mj-incorrecto);
}

.mj-celda.is-seleccionada,
.mj-celda.is-inicio {
	background: var(--mj-resaltado);
	color: var(--mj-texto);
}

.mj-lista-palabras {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.mj-palabra.is-encontrada {
	color: var(--mj-correcto);
	font-weight: bold;
}

.mj-palabra.is-encontrada::before {
	content: "✓ ";
}

.mj-palabra.is-faltante {
	color: var(--mj-incorrecto);
}

.mj-palabra.is-faltante::before {
	content: "✗ ";
}

/* ---------- Mouse: resaltado al pasar por encima (no aplica en pantallas táctiles) ---------- */
@media (hover: hover) {
	.mj-opcion:not(:disabled):hover,
	.mj-nivel:hover {
		border-color: var(--mj-principal);
	}

	.mj-celda:not(.is-encontrada):not(.is-marcada):not(.is-incorrecta):hover {
		background: var(--mj-resaltado);
	}
}