/*
 * Diego Portales English Academy — estilos del juego
 *
 * Dirección de arte y paleta: Fable 5 (brief §9, ver juego.md §"Dirección
 * de arte y paleta" para la referencia completa de Ignacio/escenarios).
 * Esta es una interpretación FUNCIONAL en CSS/emoji, no el arte final
 * ilustrado (sprites/fondos pintados quedan para una pasada posterior de
 * generación de assets) — pero ya usa los colores, tipografía redondeada y
 * lineamientos de UX definitivos, así que el "look" ya se siente cercano.
 *
 * Paleta (hex, uso definido por Fable 5):
 *   --sky:    #7EC8E3  fondo principal (mundo)
 *   --ink:    #3B2A5E  panel/UI morado profundo
 *   --sun:    #FFC93C  acento primario (botones, CTA)
 *   --coral:  #FF6F59  acento secundario (hover, destacados)
 *   --ok:     #6ABE4B  éxito
 *   --bad:    #E85A4F  error
 *   Gemas: listening #4FD1C5 · reading #E8A93B · speaking #FF6F91 · writing #9B6BD1
 */

:root {
	--sky: #7EC8E3;
	--sky-deep: #5FB3D4;
	--ink: #3B2A5E;
	--ink-light: #4E3A73;
	--sun: #FFC93C;
	--sun-deep: #E8AE1F;
	--coral: #FF6F59;
	--ok: #6ABE4B;
	--bad: #E85A4F;
	--paper: #FFF9EC;
	--text: #2A2038;
	--text-muted: #6B5E85;

	--radius: 18px;
	--radius-sm: 10px;
	--shadow: 0 6px 0 rgba(0,0,0,0.15);
}

/* ========================================================================
   PASADA VISUAL v12 — Nowlandia ilustrada
   Se mantiene la estructura del juego y se mejora profundidad, jerarquía y
   respuesta táctil. Todo funciona sin fuentes, librerías ni conexión externa.
   ======================================================================== */

:root {
	--paper: #fffaf0;
	--paper-glass: rgba(255, 250, 240, 0.94);
	--ink: #352451;
	--ink-light: #513d73;
	--text: #2f2540;
	--text-muted: #6c607d;
	--radius: 22px;
	--radius-sm: 13px;
	--shadow: 0 10px 0 rgba(53, 36, 81, 0.13), 0 18px 34px rgba(42, 28, 70, 0.15);
	--shadow-soft: 0 12px 30px rgba(42, 28, 70, 0.16);
}

html, body {
	font-family: ui-rounded, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	background: #78cbdc;
}

body {
	position: relative;
	isolation: isolate;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image: url("../assets/ui/nowlandia-bg.png");
	background-size: cover;
	background-position: center bottom;
	filter: saturate(0.88);
	transform: scale(1.015);
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 22%, rgba(235, 255, 255, 0.26), transparent 38%),
		linear-gradient(180deg, rgba(77, 193, 215, 0.33), rgba(57, 42, 94, 0.16));
}

#app {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding: 1.5rem 1rem 7rem;
}

h1, h2 {
	letter-spacing: -0.025em;
	text-shadow: 0 2px 0 rgba(255, 255, 255, 0.42);
}

h1 {
	font-size: clamp(1.85rem, 5vw, 2.45rem);
	line-height: 1.04;
}

.screen {
	gap: 1.1rem;
	animation: screen-arrive 0.34s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes screen-arrive {
	from { opacity: 0; transform: translateY(10px) scale(0.992); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.center-card,
.stimulus-card {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.48), transparent 42%),
		var(--paper-glass);
	border: 1px solid rgba(255, 255, 255, 0.72);
	box-shadow: var(--shadow);
	backdrop-filter: blur(10px);
}

.center-card::before,
.stimulus-card::before {
	content: "";
	position: absolute;
	inset: 6px;
	pointer-events: none;
	border: 1px solid rgba(59, 42, 94, 0.12);
	border-radius: calc(var(--radius) - 7px);
}

.center-card > *,
.stimulus-card > * {
	position: relative;
	z-index: 1;
}

.center-card {
	padding: clamp(1.45rem, 4vw, 2.15rem);
}

.ignacio-portrait {
	max-height: 285px;
	filter: drop-shadow(0 14px 14px rgba(43, 29, 68, 0.24));
	animation: ignacio-arrive 0.55s cubic-bezier(.2,.9,.25,1.15) both;
}

@keyframes ignacio-arrive {
	from { opacity: 0; transform: translateY(18px) rotate(-1deg); }
	to { opacity: 1; transform: translateY(0) rotate(0); }
}

.global-progress {
	background: linear-gradient(180deg, rgba(53,36,81,0.96), rgba(43,29,70,0.96));
	border-bottom: 1px solid rgba(255,255,255,0.2);
	box-shadow: 0 5px 18px rgba(38, 25, 64, 0.25);
	backdrop-filter: blur(10px);
}

.map-node {
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.map-node.current {
	box-shadow: 0 0 0 3px rgba(255,201,60,0.3), 0 0 20px rgba(255,201,60,0.6);
}

.ignacio-corner {
	right: max(8px, env(safe-area-inset-right));
	height: 168px;
	filter: drop-shadow(-6px 8px 10px rgba(42,28,70,0.25));
}

.ignacio-line,
.villager-line {
	position: relative;
	border: 1px solid rgba(255,255,255,0.16);
	box-shadow: 0 6px 16px rgba(42,28,70,0.13);
}

.ignacio-line::after {
	content: "";
	position: absolute;
	left: 1.05rem;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: var(--ink);
	transform: rotate(45deg);
	border-radius: 0 0 3px 0;
}

.form-stack input,
textarea {
	border: 2px solid rgba(53,36,81,0.72);
	box-shadow: inset 0 2px 0 rgba(53,36,81,0.06);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.form-stack input:focus,
textarea:focus {
	outline: none;
	border-color: var(--coral);
	box-shadow: 0 0 0 4px rgba(255,111,89,0.2);
	transform: translateY(-1px);
}

.btn {
	border-width: 2px;
	box-shadow: 0 5px 0 var(--ink), 0 9px 18px rgba(42,28,70,0.12);
	transition: transform .12s ease, box-shadow .12s ease, filter .18s ease, background-color .18s ease;
}

.btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 var(--ink), 0 12px 22px rgba(42,28,70,0.16);
	filter: saturate(1.06);
}

.btn:active {
	transform: translateY(4px);
	box-shadow: 0 1px 0 var(--ink);
}

.btn:focus-visible,
.character-card:focus-visible,
.skill-card:focus-visible,
.option:focus-visible {
	outline: 4px solid rgba(255, 201, 60, 0.9);
	outline-offset: 4px;
}

.btn.primary {
	background: linear-gradient(180deg, #ffd85e, var(--sun));
}

.chapter-header {
	background:
		linear-gradient(100deg, rgba(255,255,255,0.08), transparent 38%),
		linear-gradient(180deg, var(--ink-light), var(--ink));
	border: 1px solid rgba(255,255,255,0.16);
	box-shadow: var(--shadow-soft);
	padding: .8rem 1rem;
}

.chapter-header h2 {
	text-shadow: none;
}

.timer-badge {
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}

.character-card,
.skill-card,
.option {
	background:
		linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,250,240,0.94));
	border-width: 2px;
	box-shadow: 0 5px 0 rgba(53,36,81,0.88), var(--shadow-soft);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.character-card:hover,
.skill-card:hover:not(.completed),
.option:hover:not(:disabled) {
	transform: translateY(-4px) rotate(-0.25deg);
	box-shadow: 0 8px 0 rgba(53,36,81,0.88), 0 18px 30px rgba(42,28,70,0.18);
}

.character-card:nth-child(even):hover,
.skill-card:nth-child(even):hover:not(.completed) {
	transform: translateY(-4px) rotate(0.25deg);
}

.character-card-art {
	border: 2px solid rgba(53,36,81,0.15);
	box-shadow: inset 0 0 24px rgba(255,255,255,0.58);
}

.skill-card {
	min-height: 150px;
	justify-content: center;
}

.skill-card-icon {
	font-size: 2.35rem;
	filter: drop-shadow(0 3px 0 rgba(53,36,81,0.13));
}

.skill-card.completed {
	background: linear-gradient(145deg, rgba(239,248,230,.96), rgba(222,242,210,.96));
}

.player-banner {
	background: rgba(255,250,240,0.92);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(8px);
}

.player-hud {
	left: max(10px, env(safe-area-inset-left));
	bottom: max(10px, env(safe-area-inset-bottom));
	border: 1px solid rgba(255,255,255,0.2);
	box-shadow: 0 8px 22px rgba(42,28,70,0.25);
	backdrop-filter: blur(9px);
}

.hp-bar {
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.28);
}

.option-image {
	background: rgba(255,250,240,0.96);
}

.option-image img {
	transition: transform .2s ease, filter .2s ease;
}

.option-image:hover:not(:disabled) img {
	transform: scale(1.035);
}

.option.correct {
	background: linear-gradient(180deg, #82d765, var(--ok));
	box-shadow: 0 5px 0 #376d26, 0 0 0 4px rgba(106,190,75,0.2);
}

.option.wrong {
	background: linear-gradient(180deg, #f1786f, var(--bad));
	box-shadow: 0 5px 0 #983a34, 0 0 0 4px rgba(232,90,79,0.15);
}

.feedback-box {
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(8px);
}

.feedback-box.ok {
	background: rgba(235, 249, 226, 0.96);
}

.feedback-box.bad {
	background: rgba(255, 239, 235, 0.96);
}

.medal-card {
	background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,248,225,.96));
	box-shadow: var(--shadow-soft);
}

@media (max-width: 520px) {
	body::before {
		background-position: 51% bottom;
	}

	#app {
		padding-inline: .72rem;
	}

	.center-card {
		padding: 1.25rem 1rem;
	}

	.chapter-header {
		gap: .45rem;
		padding: .65rem .72rem;
	}

	.chapter-header h2 {
		flex-basis: 45%;
		font-size: 1rem;
	}

	.ignacio-corner {
		height: 108px;
		opacity: .96;
	}

	.skill-card {
		min-height: 112px;
	}
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	min-height: 100%;
	background: linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 100%);
	font-family: 'Baloo 2', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
	color: var(--text);
}

#app {
	max-width: 640px;
	margin: 0 auto;
	padding: 1.2rem 1rem 3rem;
	min-height: 100vh;
}

h1, h2 { font-weight: 800; text-wrap: balance; color: var(--ink); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; margin: 0; }

/* ---------------- layout genérico ---------------- */

.screen { display: flex; flex-direction: column; gap: 1rem; }
.center-card {
	background: var(--paper);
	border-radius: var(--radius);
	padding: 1.6rem 1.4rem;
	box-shadow: var(--shadow);
	text-align: center;
	align-items: center;
}

.ignacio-portrait {
	max-height: 260px; width: auto; margin: 0 auto;
	filter: drop-shadow(0 10px 12px rgba(0,0,0,0.25));
}

/* ---------------- progreso global + puntaje en vivo (brief §9) ---------------- */

.global-progress {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; justify-content: center; gap: 0.8rem;
	background: var(--ink); padding: 0.5rem 1rem;
	box-shadow: 0 3px 0 rgba(0,0,0,0.15);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.global-progress.hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; height: 0; padding: 0; overflow: hidden; }
.map-path { display: flex; align-items: center; gap: 0.4rem; flex: 1; max-width: 460px; justify-content: center; }
.map-node {
	display: flex; align-items: center; justify-content: center;
	width: 2.1rem; height: 2.1rem; border-radius: 50%;
	background: rgba(255,255,255,0.12); font-size: 1.05rem;
	border: 2px solid rgba(255,255,255,0.25);
}
.map-node.current { background: var(--sun); border-color: var(--sun); transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255,201,60,0.35); }
.map-node.done { background: var(--ok); border-color: var(--ok); }
.map-link { flex: 1; height: 3px; background: rgba(255,255,255,0.2); min-width: 0.6rem; max-width: 1.6rem; }
.map-link.done { background: var(--ok); }
.score-badge {
	font-weight: 800; font-size: 0.85rem; color: white;
	background: rgba(255,255,255,0.12); border-radius: 999px; padding: 0.3rem 0.7rem;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.global-progress { gap: 0.4rem; padding: 0.4rem 0.6rem; }
	.map-node { width: 1.7rem; height: 1.7rem; font-size: 0.85rem; }
	.score-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
}

/* Personaje ancla flotante (brief §9) — vive fuera de #app, ver index.html */
.ignacio-corner {
	position: fixed; right: 10px; bottom: 0; height: 150px; width: auto;
	pointer-events: none; z-index: 40;
	filter: drop-shadow(-4px 4px 6px rgba(0,0,0,0.25));
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.ignacio-corner.hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 480px) { .ignacio-corner { height: 100px; } }
.ignacio-lines { text-align: left; width: 100%; }
.ignacio-line, .villager-line {
	background: var(--ink);
	color: white;
	border-radius: var(--radius-sm);
	padding: 0.7rem 1rem;
	margin: 0.4rem 0;
	font-size: 0.98rem;
}
.villager-line { background: var(--ink-light); font-style: italic; }

.form-stack { display: flex; flex-direction: column; gap: 0.9rem; width: 100%; text-align: left; }
.form-stack label { font-weight: 700; color: var(--ink); display: flex; flex-direction: column; gap: 0.3rem; }
.form-stack input, textarea {
	font: inherit; font-size: 1.05rem; padding: 0.7rem 0.8rem; border-radius: var(--radius-sm);
	border: 3px solid var(--ink); background: white;
}
textarea { width: 100%; resize: vertical; }

/* ---------------- botones ---------------- */

.btn {
	font: inherit; font-weight: 800; cursor: pointer;
	border: 3px solid var(--ink); border-radius: 999px;
	padding: 0.65rem 1.3rem; background: white; color: var(--ink);
	box-shadow: 0 4px 0 var(--ink);
	transition: transform 0.05s ease;
	min-height: 48px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }

.btn.primary { background: var(--sun); }
.btn.primary:hover:not(:disabled) { background: var(--sun-deep); }
.btn.ghost { background: transparent; }
.btn-lg { font-size: 1.1rem; padding: 0.85rem 1.8rem; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

/* ---------------- header de capítulo ---------------- */

.chapter-header {
	display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
	background: var(--ink); color: white; border-radius: var(--radius-sm);
	padding: 0.7rem 1rem;
}
.chapter-header h2 { color: white; flex: 1; font-size: 1.1rem; }
.progress-badge, .timer-badge {
	font-weight: 800; font-size: 0.9rem; background: rgba(255,255,255,0.15);
	border-radius: 999px; padding: 0.25rem 0.7rem;
}
.timer-badge { background: var(--coral); }
.timer-badge.paused { background: var(--text-muted); }
.btn-pause {
	font-size: 1rem; padding: 0.25rem 0.6rem; border-width: 2px;
	border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.15); color: white;
	box-shadow: none; min-height: auto;
}

.chip {
	display: inline-flex; align-items: center; gap: 0.3rem;
	background: var(--chip-color, var(--sun)); color: var(--ink);
	font-weight: 800; font-size: 0.85rem; border-radius: 999px; padding: 0.2rem 0.6rem;
}
.chapter-eyebrow { display: flex; justify-content: center; }
.chapter-subtitle { color: var(--text-muted); margin-top: -0.6rem; }

/* ---------------- estímulo / opciones ---------------- */

.stimulus-card {
	background: white; border-radius: var(--radius); padding: 1.2rem;
	text-align: center; box-shadow: var(--shadow);
}
/* ---------------- elección de aprendiz ---------------- */

.character-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem;
	width: 100%; margin-top: 0.6rem;
}
.character-card {
	display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
	font: inherit; cursor: pointer; color: var(--ink);
	background: white; border: 3px solid var(--ink);
	border-radius: var(--radius); padding: 0.7rem 0.4rem;
	box-shadow: 0 4px 0 var(--ink); transition: transform 0.05s ease;
}
.character-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.character-card-art {
	width: 100%; max-width: 110px; aspect-ratio: 1; object-fit: contain;
	border-radius: var(--radius-sm); background: var(--chip-color);
	display: flex; align-items: center; justify-content: center;
}
.character-card-name { font-weight: 800; font-size: 0.95rem; }
/* Marcador mientras no existe el dibujo (ver characterArtHtml en game.js) */
.character-emoji { font-size: 2.6rem; line-height: 1; }

@media (max-width: 520px) {
	.character-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tarjeta del aprendiz en mapa / entrada de capítulo / cierre */
.player-banner {
	display: flex; align-items: center; gap: 0.7rem; width: 100%;
	background: white; border: 3px solid var(--ink);
	border-left: 10px solid var(--chip-color, var(--ink));
	border-radius: var(--radius); padding: 0.6rem 0.9rem;
	text-align: left; margin: 0.2rem 0;
}
.player-banner-art {
	width: 3rem; height: 3rem; flex: none; object-fit: contain;
	border-radius: 50%; background: var(--chip-color);
	display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.player-banner-text { display: flex; flex-direction: column; gap: 0.1rem; }
.player-banner-hp { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }

/* ---------------- ficha del jugador + Energía Mágica ---------------- */

.player-hud {
	position: fixed; left: 10px; bottom: 10px; z-index: 40;
	display: flex; align-items: center; gap: 0.55rem;
	background: var(--ink); color: white;
	border-radius: 999px; padding: 0.4rem 0.9rem 0.4rem 0.4rem;
	box-shadow: 0 4px 0 rgba(0,0,0,0.2);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.player-hud.hidden { opacity: 0; transform: translateY(120%); pointer-events: none; }
.player-avatar {
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: var(--sun); display: flex; align-items: center; justify-content: center;
	font-size: 1.3rem; flex: none; overflow: hidden;
}
/* Encuadre a la cabeza: el arte viene de cuerpo entero y a 2.4rem la cara
   quedaría ilegible si se mostrara completo. */
.player-avatar-art {
	width: 100%; height: 100%; object-fit: cover; object-position: top center;
	display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.player-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 108px; }
.player-name { font-weight: 800; font-size: 0.82rem; line-height: 1; }

.hp-bar {
	position: relative; height: 1.05rem; border-radius: 999px;
	background: rgba(255,255,255,0.18); overflow: hidden;
}
.hp-fill {
	position: absolute; inset: 0 auto 0 0; border-radius: 999px;
	transition: width 0.45s ease, background-color 0.45s ease;
}
/* Sin rojo de alarma: el brief §9 pide que el error nunca se vea punitivo. */
.hp-fill.high { background: var(--ok); }
.hp-fill.mid  { background: var(--sun); }
.hp-fill.low  { background: var(--coral); }
.hp-value {
	position: relative; display: block; text-align: center;
	font-size: 0.68rem; font-weight: 800; line-height: 1.05rem;
	text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Globo flotante con el cambio de energía tras responder */
.hp-delta {
	position: absolute; right: 0.7rem; top: -0.4rem;
	font-weight: 800; font-size: 0.95rem;
	animation: hp-float 1.2s ease forwards; pointer-events: none;
}
.hp-delta.up { color: var(--ok); }
.hp-delta.down { color: var(--coral); }
@keyframes hp-float {
	0%   { opacity: 0; transform: translateY(0); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-26px); }
}

/* La ficha ocupa la esquina inferior izquierda; en pantallas chicas se achica
   para no chocar con el Ignacio de la derecha. */
@media (max-width: 480px) {
	.player-hud { padding: 0.3rem 0.7rem 0.3rem 0.3rem; gap: 0.4rem; }
	.player-avatar { width: 2rem; height: 2rem; font-size: 1.1rem; }
	.player-info { min-width: 84px; }
	.player-name { font-size: 0.72rem; }
}

/* ---------------- repaso de preguntas respondidas ---------------- */

.review-banner {
	background: var(--sky); color: var(--ink); border: 3px solid var(--ink);
	border-radius: var(--radius-sm); padding: 0.6rem 0.9rem;
	font-weight: 700; font-size: 0.92rem;
}
.review-answer { font-size: 1.05rem; }
/* En repaso las opciones son solo lectura: mismo aspecto, sin interacción. */
.options-grid .option:not(button) { cursor: default; }
.btn-mini { font-size: 1rem; padding: 0.25rem 0.6rem; border-width: 2px; min-height: 0; }

/* El subtítulo de Listening arranca oculto (revelaría la respuesta) y se
   muestra solo como pista tras fallar o si no hay voz inglesa — ver game.js */
.subtitle.is-hidden { display: none; }

/* ---------------- mapa de elección de habilidad ---------------- */

.skill-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem;
	width: 100%; margin-top: 0.4rem;
}
.skill-card {
	position: relative; display: flex; flex-direction: column;
	align-items: center; gap: 0.2rem; text-align: center;
	font: inherit; cursor: pointer; color: var(--ink);
	background: white; border: 3px solid var(--ink);
	border-left: 10px solid var(--chip-color, var(--ink));
	border-radius: var(--radius); padding: 1rem 0.7rem;
	box-shadow: 0 4px 0 var(--ink);
	transition: transform 0.05s ease;
}
.skill-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.skill-card-num {
	position: absolute; top: 0.45rem; left: 0.6rem;
	font-size: 0.8rem; font-weight: 800; color: var(--text-muted);
}
.skill-card-icon { font-size: 2rem; line-height: 1; }
.skill-card-name { font-weight: 800; font-size: 1.05rem; }
.skill-card-place { font-size: 0.8rem; color: var(--text-muted); }
.skill-card-status { font-size: 0.82rem; font-weight: 700; margin-top: 0.25rem; }
.skill-card.completed {
	background: #EDF6E6; cursor: default; opacity: 0.85;
	box-shadow: none; transform: translateY(3px);
}

@media (max-width: 480px) {
	.skill-grid { grid-template-columns: 1fr; }
}

/* Etapa "2.3" + posición en el juego completo */
.stage-badge {
	display: flex; flex-direction: column; align-items: center; line-height: 1.1;
	background: rgba(255,255,255,0.15); border-radius: var(--radius-sm);
	padding: 0.2rem 0.6rem; font-weight: 800; white-space: nowrap;
}
.stage-badge b { font-size: 0.82rem; }
.stage-badge span { font-size: 0.7rem; opacity: 0.75; font-weight: 700; }

.audio-off {
	background: var(--ink-light); color: white; opacity: 1;
	font-size: 0.9rem; cursor: default;
}
.task-label {
	font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.3rem;
}
.subtitle { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.7rem; }
.reading-passage { font-size: 1.15rem; font-weight: 700; }
.hint-mark { background: var(--sun); color: var(--ink); border-radius: 4px; padding: 0 0.2rem; }
.rule-tag { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.4rem; }
.hidden-hint-btn { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
.hidden-hint-reveal {
	background: var(--sky); border-radius: var(--radius-sm); padding: 0.5rem 0.8rem;
	font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-top: 0.4rem;
}
.scene-desc { font-size: 1.05rem; }

.options-grid { display: grid; gap: 0.7rem; }
.option {
	text-align: left; background: white; font-weight: 700; font-size: 1rem;
	padding: 0.8rem 1rem;
}
.option.correct { background: var(--ok); color: white; }
.option.wrong { background: var(--bad); color: white; }

/* Opciones ilustradas (brief §4). Tres al ancho para poder compararlas de un
   vistazo: en cuanto hay que hacer scroll para ver la tercera, el ejercicio
   pasa a medir memoria en vez de comprensión. */
.options-grid.image-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.option-image {
	padding: 0.35rem; overflow: hidden; aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
	/* los .btn son píldoras (999px): sobre un cuadrado eso da un círculo y
	   recorta las esquinas de la escena, justo donde suele estar el objeto de
	   la acción. Se vuelve a un rectángulo redondeado. */
	border-radius: var(--radius);
}
.option-image img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: calc(var(--radius) - 6px); display: block;
	pointer-events: none; /* el clic siempre pertenece al botón, no a la imagen */
}
.option-image.correct, .option-image.wrong { padding: 0.35rem; }

/* Pantallas angostas: 3 columnas dejarían cada escena ilegible. */
@media (max-width: 520px) {
	.options-grid.image-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------- feedback ---------------- */

.feedback-area:empty { display: none; }
.feedback-box {
	border-radius: var(--radius); padding: 1rem 1.2rem;
	border: 3px solid var(--ink);
}
.feedback-box.ok { background: #E8F7E0; }
.feedback-box.bad { background: #FDEAE8; }
.feedback-box .btn { margin-top: 0.6rem; }
.model-line { margin: 0; font-size: 0.92rem; }
.nudge {
	background: var(--sun); color: var(--ink); border-radius: var(--radius-sm);
	padding: 0.5rem 0.8rem; font-weight: 700; font-size: 0.9rem;
}

/* ---------------- speaking ---------------- */

.speaking-controls { text-align: center; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.transcript { font-style: italic; color: var(--text-muted); min-height: 1.4em; }
.transcript.listening { color: var(--ink); animation: pulse-listen 1.1s ease-in-out infinite; }
@keyframes pulse-listen { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.hint-text { color: var(--text-muted); font-size: 0.92rem; text-align: center; }

/* ---------------- tiles (writing) ---------------- */

.tile-builder { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }
.built-row, .chips-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; min-height: 3rem; }
.tile {
	font-weight: 800; border-radius: var(--radius-sm); padding: 0.55rem 0.9rem;
	border: 3px solid var(--ink);
}
.tile.built { background: var(--sun); }
.tile.chip { background: white; cursor: pointer; }
.tile.chip.shake { animation: shake-tile 0.4s ease; background: var(--bad); color: white; }
@keyframes shake-tile {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}
.tile-placeholder { color: var(--text-muted); font-style: italic; align-self: center; }

/* ---------------- gemas / medallas ---------------- */

.bonus-spender {
	background: white; border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
}
.medal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; width: 100%; }
.medal-card {
	background: white; border-radius: var(--radius-sm); padding: 0.9rem; box-shadow: var(--shadow);
}
.medal-icon { font-size: 1.8rem; }
.medal-name { font-weight: 800; font-size: 0.85rem; }
.medal-result { color: var(--text-muted); font-size: 0.85rem; }
.scaffold { background: var(--sun); border-radius: var(--radius-sm); padding: 0.5rem 0.8rem; font-weight: 700; }
.send-status { font-weight: 700; color: var(--ink); }

/* Cierre de cascada v12: estas reglas quedan al final para prevalecer sobre
   los estilos funcionales originales sin cambiar su estructura. */
html, body {
	font-family: ui-rounded, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	background: #78cbdc;
}
#app { max-width: 720px; padding: 1.5rem 1rem 7rem; }
h1 { font-size: clamp(1.85rem, 5vw, 2.45rem); line-height: 1.04; }
.screen { gap: 1.1rem; }
.center-card,
.stimulus-card {
	background: linear-gradient(135deg, rgba(255,255,255,.48), transparent 42%), var(--paper-glass);
	border: 1px solid rgba(255,255,255,.72);
	box-shadow: var(--shadow);
	backdrop-filter: blur(10px);
}
.center-card { padding: clamp(1.45rem, 4vw, 2.15rem); }
.ignacio-portrait { max-height: 285px; filter: drop-shadow(0 14px 14px rgba(43,29,68,.24)); }
.global-progress {
	background: linear-gradient(180deg, rgba(53,36,81,.96), rgba(43,29,70,.96));
	border-bottom: 1px solid rgba(255,255,255,.2);
	box-shadow: 0 5px 18px rgba(38,25,64,.25);
	backdrop-filter: blur(10px);
}
.map-node.current { box-shadow: 0 0 0 3px rgba(255,201,60,.3), 0 0 20px rgba(255,201,60,.6); }
.ignacio-corner { right: max(8px, env(safe-area-inset-right)); height: 168px; filter: drop-shadow(-6px 8px 10px rgba(42,28,70,.25)); }
.form-stack input,
textarea { border: 2px solid rgba(53,36,81,.72); box-shadow: inset 0 2px 0 rgba(53,36,81,.06); }
.btn { border-width: 2px; box-shadow: 0 5px 0 var(--ink), 0 9px 18px rgba(42,28,70,.12); transition: transform .12s ease, box-shadow .12s ease, filter .18s ease, background-color .18s ease; }
.btn.primary { background: linear-gradient(180deg, #ffd85e, var(--sun)); }
.chapter-header {
	background: linear-gradient(100deg, rgba(255,255,255,.08), transparent 38%), linear-gradient(180deg, var(--ink-light), var(--ink));
	border: 1px solid rgba(255,255,255,.16);
	box-shadow: var(--shadow-soft);
	padding: .8rem 1rem;
}
.character-card,
.skill-card,
.option {
	background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,250,240,.94));
	border-width: 2px;
	box-shadow: 0 5px 0 rgba(53,36,81,.88), var(--shadow-soft);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.character-card-art { border: 2px solid rgba(53,36,81,.15); box-shadow: inset 0 0 24px rgba(255,255,255,.58); }
.skill-card { min-height: 150px; justify-content: center; }
.skill-card-icon { font-size: 2.35rem; filter: drop-shadow(0 3px 0 rgba(53,36,81,.13)); }
.skill-card.completed { background: linear-gradient(145deg, rgba(239,248,230,.96), rgba(222,242,210,.96)); }
.player-banner { background: rgba(255,250,240,.92); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); }
.player-hud { left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 22px rgba(42,28,70,.25); backdrop-filter: blur(9px); }
.option.correct { background: linear-gradient(180deg, #82d765, var(--ok)); box-shadow: 0 5px 0 #376d26, 0 0 0 4px rgba(106,190,75,.2); }
.option.wrong { background: linear-gradient(180deg, #f1786f, var(--bad)); box-shadow: 0 5px 0 #983a34, 0 0 0 4px rgba(232,90,79,.15); }
.feedback-box { box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); }
.feedback-box.ok { background: rgba(235,249,226,.96); }
.feedback-box.bad { background: rgba(255,239,235,.96); }
.medal-card { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,248,225,.96)); box-shadow: var(--shadow-soft); }
@media (max-width: 520px) {
	#app { padding-inline: .72rem; }
	.center-card { padding: 1.25rem 1rem; }
	.chapter-header { gap: .45rem; padding: .65rem .72rem; }
	.chapter-header h2 { flex-basis: 45%; font-size: 1rem; }
	.ignacio-corner { height: 108px; opacity: .96; }
	.skill-card { min-height: 112px; }
}

/* ========================================================================
   PASADA FUNCIONAL Y VISUAL v13 — registro, lectura, voz y escritura
   ======================================================================== */

#app:has(.intro-card) { max-width: 940px; }
.intro-card {
	gap: 1.25rem;
	text-align: left;
	padding: clamp(1.15rem, 3vw, 2.2rem);
	background:
		linear-gradient(135deg, rgba(255,255,255,.72), transparent 38%),
		linear-gradient(180deg, rgba(255,250,240,.97), rgba(248,237,216,.96));
}
.intro-card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 17% 15%, rgba(255,201,60,.2), transparent 25%);
}
.intro-hero {
	display: grid;
	grid-template-columns: minmax(190px, 280px) 1fr;
	align-items: center;
	gap: clamp(1rem, 4vw, 2.2rem);
	width: 100%;
}
.intro-portrait-wrap {
	position: relative;
	display: grid;
	place-items: end center;
	min-height: 245px;
	border-radius: 45% 45% 24% 24%;
	background:
		radial-gradient(circle at 50% 35%, rgba(255,255,255,.9), transparent 42%),
		linear-gradient(145deg, rgba(126,200,227,.68), rgba(155,107,209,.28));
	border: 1px solid rgba(53,36,81,.12);
	overflow: hidden;
}
.intro-portrait-wrap::after {
	content: "";
	position: absolute;
	left: 12%; right: 12%; bottom: 9px; height: 20px;
	background: rgba(53,36,81,.18);
	filter: blur(10px);
	border-radius: 50%;
}
.intro-portrait-wrap .ignacio-portrait {
	position: relative;
	z-index: 2;
	width: auto;
	max-width: 100%;
	max-height: 290px;
	margin: 0;
}
.intro-spark {
	position: absolute;
	z-index: 3;
	color: var(--sun);
	text-shadow: 0 2px 0 var(--ink);
	font-size: 1.8rem;
	animation: sparkle-float 2.8s ease-in-out infinite;
}
.spark-one { left: 12%; top: 13%; }
.spark-two { right: 12%; top: 27%; animation-delay: .7s; font-size: 1.35rem; }
@keyframes sparkle-float {
	0%, 100% { transform: translateY(0) rotate(0); opacity: .7; }
	50% { transform: translateY(-8px) rotate(10deg); opacity: 1; }
}
.academy-kicker {
	margin: 0 0 .55rem;
	color: #795b18;
	font-size: .78rem;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.intro-heading h1 {
	margin: 0;
	font-size: clamp(2.1rem, 6vw, 3.55rem);
	line-height: .92;
	letter-spacing: -.055em;
	color: var(--ink);
}
.intro-heading h1 span {
	color: var(--coral);
	font-size: .78em;
	letter-spacing: -.03em;
}
.intro-tagline {
	margin: .85rem 0 0;
	max-width: 38ch;
	color: var(--text-muted);
	font-weight: 750;
	line-height: 1.45;
}
.intro-dialogue {
	position: relative;
	width: 100%;
	padding: 1rem 1.1rem .9rem 1.25rem;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--ink-light), var(--ink));
	color: white;
	box-shadow: 0 7px 0 rgba(35,23,58,.24), 0 15px 28px rgba(42,28,70,.15);
}
.intro-dialogue::before {
	content: "";
	position: absolute;
	top: -9px; left: 22%;
	width: 19px; height: 19px;
	background: var(--ink-light);
	transform: rotate(45deg);
	border-radius: 3px;
}
.dialogue-name {
	display: block;
	margin-bottom: .35rem;
	color: var(--sun);
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .1em;
}
.intro-dialogue > p {
	margin: .24rem 0;
	font-size: 1rem;
	line-height: 1.45;
}
.mission-scroll { margin-top: .7rem; border-top: 1px solid rgba(255,255,255,.18); padding-top: .65rem; }
.mission-scroll summary { color: #ffe18a; cursor: pointer; font-weight: 850; }
.mission-scroll div { padding-top: .45rem; opacity: .9; font-size: .92rem; }
.mission-scroll p { margin: .45rem 0; }

.enrollment-card {
	gap: .75rem;
	padding: 1.05rem;
	border: 1px solid rgba(53,36,81,.16);
	border-radius: 20px;
	background: rgba(255,255,255,.58);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.enrollment-title {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .1rem;
}
.enrollment-seal {
	display: grid;
	place-items: center;
	width: 2.65rem; height: 2.65rem;
	border-radius: 50%;
	background: var(--sun);
	color: var(--ink);
	border: 2px solid var(--ink);
	box-shadow: 0 3px 0 var(--ink);
	font-size: 1.2rem;
}
.enrollment-title div > span {
	display: block;
	color: var(--coral);
	font-size: .65rem;
	font-weight: 950;
	letter-spacing: .14em;
}
.enrollment-title h2 { margin: .05rem 0 0; font-size: 1.25rem; text-shadow: none; }
.magic-field {
	display: grid !important;
	grid-template-columns: 2.4rem 1fr;
	gap: .1rem .7rem !important;
	align-items: center;
	padding: .75rem;
	border: 1px solid rgba(53,36,81,.13);
	border-radius: 15px;
	background: rgba(255,250,240,.88);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.magic-field:focus-within {
	border-color: var(--coral);
	box-shadow: 0 0 0 4px rgba(255,111,89,.14);
	transform: translateY(-1px);
}
.field-icon {
	display: grid;
	place-items: center;
	grid-row: 1;
	font-size: 1.25rem;
}
.field-copy {
	display: flex;
	flex-direction: column;
	grid-column: 2;
	line-height: 1.2;
}
.field-copy b { font-size: .96rem; }
.field-copy small { margin-top: .15rem; color: var(--text-muted); font-size: .78rem; font-weight: 650; }
.magic-field input,
.magic-field select {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: .5rem;
	padding: .82rem .9rem;
	border-radius: 12px;
	background: white;
}
.magic-field select {
	border: 2px solid rgba(53,36,81,.22);
	color: var(--ink);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}
.privacy-note {
	margin: .05rem 0;
	color: var(--text-muted);
	font-size: .78rem;
	text-align: center;
}
.intro-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .85rem;
	width: 100%;
}
.intro-cta b { font-size: 1.25rem; transition: transform .15s ease; }
.intro-cta:hover b { transform: translateX(5px); }

/* Reading: el pasaje funciona como texto breve, no como una línea suelta. */
.reading-passage {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin: 0;
	text-align: left;
	font-size: 1.02rem;
	line-height: 1.55;
}
.reading-eyebrow {
	align-self: flex-start;
	padding: .25rem .55rem;
	border-radius: 999px;
	background: #f5d486;
	color: #624819;
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.reading-passage strong {
	color: var(--ink);
	font-size: 1.08rem;
}
.reading-blank {
	padding: .65rem .8rem;
	border: 2px dashed rgba(53,36,81,.35);
	border-radius: 12px;
	background: rgba(255,255,255,.55);
	color: var(--text-muted);
	font-weight: 750;
}

/* Speaking: consola visible de reconocimiento y estados del micrófono. */
.speaking-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	width: 100%;
}
.speech-button { min-width: min(100%, 290px); }
.speech-console {
	display: grid;
	grid-template-columns: 14px 1fr;
	gap: .75rem;
	align-items: start;
	width: 100%;
	min-height: 94px;
	padding: .9rem 1rem;
	border: 2px solid rgba(53,36,81,.2);
	border-radius: 17px;
	background: rgba(255,250,240,.94);
	box-shadow: var(--shadow-soft);
	text-align: left;
}
.speech-dot {
	width: 12px; height: 12px;
	margin-top: .2rem;
	border-radius: 50%;
	background: #a99fb7;
	box-shadow: 0 0 0 4px rgba(169,159,183,.16);
}
.speech-console[data-state="listening"] { border-color: #4fbec6; background: #ecfbfb; }
.speech-console[data-state="listening"] .speech-dot {
	background: #24a8b1;
	box-shadow: 0 0 0 5px rgba(36,168,177,.18);
	animation: speech-pulse 1s ease-in-out infinite;
}
.speech-console[data-state="heard"] { border-color: var(--ok); background: #effae9; }
.speech-console[data-state="heard"] .speech-dot { background: var(--ok); }
.speech-console[data-state="error"] { border-color: var(--coral); background: #fff1ed; }
.speech-console[data-state="error"] .speech-dot { background: var(--coral); }
@keyframes speech-pulse { 50% { transform: scale(1.35); box-shadow: 0 0 0 9px rgba(36,168,177,.08); } }
.speech-console-label {
	display: block;
	margin-bottom: .32rem;
	color: var(--text-muted);
	font-size: .66rem;
	font-weight: 950;
	letter-spacing: .12em;
}
.transcript {
	margin: 0;
	min-height: 1.5em;
	color: var(--ink);
	font-style: normal;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.35;
}
.speech-status, .speech-environment-note {
	margin: 0;
	color: var(--text-muted);
	font-size: .84rem;
	font-weight: 700;
	text-align: center;
}
.speech-environment-note {
	width: 100%;
	padding: .55rem .75rem;
	border-radius: 11px;
	background: rgba(255,201,60,.22);
	color: #67501a;
}

.speaking-choice-panel {
	width: 100%;
	padding: .85rem;
	border: 2px solid rgba(53,36,81,.15);
	border-radius: 18px;
	background: rgba(255,250,240,.78);
	box-shadow: var(--shadow-soft);
}
.speaking-choice-title {
	margin: 0 0 .55rem;
	color: var(--ink);
	font-size: .82rem;
	font-weight: 950;
	letter-spacing: .04em;
	text-align: center;
}
.speaking-choice-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
}
.speaking-choice {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 58px;
	padding: .65rem .75rem;
	border: 2px solid rgba(53,36,81,.2);
	border-radius: 13px;
	background: rgba(255,255,255,.92);
	color: var(--ink);
	font: inherit;
	font-size: .86rem;
	font-weight: 800;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.speaking-choice:hover { transform: translateY(-2px); border-color: var(--coral); }
.speaking-choice > span {
	display: grid;
	place-items: center;
	flex: 0 0 1.8rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: #eee6f8;
	color: var(--ink);
	font-weight: 950;
}
.speaking-choice.selected {
	border-color: var(--coral);
	background: #fff0ec;
	box-shadow: 0 0 0 3px rgba(255,118,95,.14);
}
.speaking-choice.selected > span { background: var(--coral); color: #fff; }
.speaking-choice-status {
	margin: .65rem 0 0;
	color: var(--text-muted);
	font-size: .8rem;
	font-weight: 750;
	text-align: center;
}

/* Writing: cuatro piezas legibles y una zona de construcción más clara. */
.tile-builder {
	width: 100%;
	padding: 1rem;
	border-radius: 18px;
	background: rgba(255,250,240,.78);
	box-shadow: var(--shadow-soft);
}
.built-row {
	width: 100%;
	padding: .65rem;
	border: 2px dashed rgba(53,36,81,.3);
	border-radius: 13px;
	background: rgba(255,255,255,.52);
}
.tile { line-height: 1.2; }

@media (max-width: 680px) {
	#app:has(.intro-card) { max-width: 720px; }
	.intro-hero { grid-template-columns: 1fr; text-align: center; }
	.intro-portrait-wrap { min-height: 210px; max-height: 250px; }
	.intro-portrait-wrap .ignacio-portrait { max-height: 245px; }
	.intro-heading { margin-top: -.3rem; }
	.intro-tagline { margin-inline: auto; }
	.intro-dialogue::before { left: 50%; }
}
@media (max-width: 420px) {
	.intro-heading h1 { font-size: 2.05rem; }
	.intro-portrait-wrap { min-height: 190px; }
	.intro-portrait-wrap .ignacio-portrait { max-height: 215px; }
	.enrollment-card { padding: .8rem; }
	.magic-field { padding: .65rem; }
	.speech-console { grid-template-columns: 11px 1fr; padding: .8rem; }
	.speaking-choice-grid { grid-template-columns: 1fr; }
	.tile { padding: .5rem .7rem; font-size: .9rem; }
}
/* ========================================================================
   PASADA RPG v14 — poderes, avatares, navegación e inglés principal
   ======================================================================== */

#app { max-width: 800px; }

.spanish-support {
	width: 100%;
	margin-top: .55rem;
	border: 1px solid rgba(53,36,81,.16);
	border-radius: 12px;
	background: rgba(255,255,255,.48);
	overflow: hidden;
}
.spanish-support summary {
	cursor: pointer;
	padding: .52rem .72rem;
	color: var(--ink-light);
	font-size: .78rem;
	font-weight: 850;
}
.spanish-support p {
	margin: 0;
	padding: .1rem .75rem .7rem;
	color: var(--text-muted);
	font-size: .84rem;
	line-height: 1.4;
}

/* Hoja 3×2 de avatares originales. */
.character-picker-screen { max-width: 880px; }
.character-grid-v14 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.character-grid-v14 .character-card {
	position: relative;
	padding: .45rem;
	gap: .55rem;
	overflow: hidden;
	border-color: rgba(53,36,81,.72);
	background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(242,234,255,.95));
}
.character-grid-v14 .character-card::after {
	content: "";
	position: absolute;
	inset: auto -20% -45% -20%;
	height: 70%;
	background: radial-gradient(circle, var(--chip-color), transparent 65%);
	opacity: .2;
	pointer-events: none;
}
.character-atlas {
	display: block;
	background-image: url("../assets/characters/avatar-atlas-v14.jpg");
	background-repeat: no-repeat;
	background-size: 300% 200%;
	background-position: var(--atlas-position);
	background-color: var(--avatar-color);
}
.character-card-art {
	width: 100%;
	max-width: none;
	aspect-ratio: 1;
	border-radius: 16px;
	border: 2px solid rgba(53,36,81,.12);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.character-card-copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
}
.character-card-copy b { font-size: 1rem; }
.character-card-copy small { margin-top: .15rem; color: var(--ink); font-size: .75rem; font-weight: 800; }
.character-card-copy em { margin-top: .12rem; color: var(--text-muted); font-size: .68rem; font-style: normal; }

.player-banner-art,
.player-avatar-art {
	background-size: 300% 200%;
	background-position: var(--atlas-position);
}
.player-banner-art {
	width: 4.2rem;
	height: 4.2rem;
	border: 3px solid rgba(255,255,255,.8);
	box-shadow: 0 0 0 2px var(--chip-color);
}
.player-avatar-art { width: 100%; height: 100%; }
.player-hud.shielded {
	box-shadow: 0 0 0 3px rgba(79,209,197,.5), 0 0 24px rgba(79,209,197,.75);
}
.player-hud.shielded::after {
	content: "🛡️";
	position: absolute;
	right: -.35rem;
	top: -.55rem;
	font-size: 1.15rem;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.rpg-player-card {
	border-left-width: 9px;
	background:
		linear-gradient(115deg, color-mix(in srgb, var(--chip-color) 16%, white), rgba(255,250,240,.95));
}
.player-rank {
	align-self: flex-start;
	padding: .18rem .42rem;
	border-radius: 999px;
	background: var(--ink);
	color: var(--sun);
	font-size: .62rem;
	font-weight: 950;
	letter-spacing: .06em;
}
.player-banner-text small { color: var(--text-muted); font-size: .72rem; font-weight: 750; }

/* Mapa de quests y recompensas visibles. */
.quest-map-screen { max-width: 800px; }
.skill-card-name-es {
	color: var(--text-muted);
	font-size: .72rem;
	font-weight: 750;
}
.skill-power-reward {
	margin-top: .25rem;
	padding: .28rem .48rem;
	border-radius: 999px;
	background: rgba(53,36,81,.08);
	color: var(--ink);
	font-size: .7rem;
	font-weight: 850;
}
.quest-objective {
	display: flex;
	align-items: center;
	gap: .8rem;
	width: 100%;
	padding: .85rem 1rem;
	border: 2px solid rgba(53,36,81,.14);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(255,201,60,.22), rgba(155,107,209,.12));
	text-align: left;
}
.quest-objective > span { font-size: 1.7rem; }
.quest-objective p { margin: .18rem 0 0; color: var(--text-muted); font-size: .86rem; }

/* Cuatro alternativas, selección previa y sellos de poder. */
.options-grid { gap: .8rem; }
.options-grid.image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option {
	position: relative;
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 62px;
	border-radius: 16px;
	padding: .75rem .9rem;
}
.option-letter {
	display: grid;
	place-items: center;
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	border-radius: 10px;
	background: rgba(53,36,81,.09);
	color: var(--ink);
	font-size: .82rem;
	font-weight: 950;
}
.option.selected {
	transform: translateY(-3px);
	border-color: var(--coral);
	background: linear-gradient(145deg, #fff8e5, #ffe7d8);
	box-shadow: 0 8px 0 var(--coral), 0 0 0 4px rgba(255,111,89,.18);
}
.option.selected .option-letter { background: var(--coral); color: white; }
.option.eliminated {
	opacity: .38 !important;
	filter: grayscale(.8);
	text-decoration: line-through;
	box-shadow: none;
}
.option.eliminated::after {
	content: "REMOVED";
	position: absolute;
	right: .7rem;
	color: var(--ink);
	font-size: .65rem;
	font-weight: 950;
	letter-spacing: .08em;
}
.option.oracle-safe {
	border-color: var(--ok);
	box-shadow: 0 7px 0 #4f9835, 0 0 0 4px rgba(106,190,75,.2);
}
.option.oracle-warning {
	border-color: var(--coral);
	box-shadow: 0 7px 0 #b54b3b, 0 0 0 4px rgba(255,111,89,.18);
}
.option.correct,
.option.wrong { opacity: 1 !important; }
.option-image { aspect-ratio: 1.12; padding: .42rem; }
.option-image .option-letter {
	position: absolute;
	top: .65rem;
	left: .65rem;
	z-index: 3;
	background: rgba(53,36,81,.92);
	color: white;
}
.answer-lock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	width: 100%;
	padding: .85rem;
	border-radius: 16px;
	background: rgba(255,250,240,.75);
}
.answer-lock p { margin: 0; color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.answer-lock .btn { min-width: min(100%, 340px); }

/* Deck de poderes consumibles. */
.power-deck {
	width: 100%;
	padding: .9rem;
	border: 2px solid rgba(255,201,60,.52);
	border-radius: 19px;
	background:
		linear-gradient(145deg, rgba(53,36,81,.97), rgba(77,52,112,.97));
	box-shadow: 0 7px 0 rgba(35,23,58,.3), var(--shadow-soft);
	color: white;
}
.power-deck-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .65rem;
}
.power-deck-title span { color: var(--sun); font-size: .72rem; font-weight: 950; letter-spacing: .12em; }
.power-deck-title small { color: rgba(255,255,255,.68); font-size: .68rem; }
.power-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .48rem;
}
.power-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .18rem;
	min-width: 0;
	padding: .6rem .35rem;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 13px;
	background: rgba(255,255,255,.1);
	color: white;
	font: inherit;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.power-card:hover:not(:disabled) {
	transform: translateY(-3px);
	background: rgba(255,201,60,.18);
	border-color: var(--sun);
}
.power-card:disabled { cursor: default; opacity: .38; filter: grayscale(.55); }
.power-card.active { opacity: 1; border-color: #4fd1c5; background: rgba(79,209,197,.18); }
.power-icon { font-size: 1.45rem; }
.power-copy { display: flex; flex-direction: column; min-width: 0; }
.power-copy b,
.power-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.power-copy b { font-size: .68rem; }
.power-copy small { color: rgba(255,255,255,.62); font-size: .58rem; }
.power-count {
	position: absolute;
	right: .32rem;
	top: .28rem;
	min-width: 1.35rem;
	padding: .08rem .26rem;
	border-radius: 999px;
	background: var(--sun);
	color: var(--ink);
	font-size: .64rem;
	font-weight: 950;
}
.power-message {
	margin: .62rem 0 0;
	min-height: 1.2em;
	color: rgba(255,255,255,.8);
	font-size: .76rem;
	font-weight: 750;
	text-align: center;
}
.power-message.shield { color: #76ebe1; }

/* Botones grandes al pie de cada ejercicio. */
.chapter-footer-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
	width: 100%;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 2px solid rgba(53,36,81,.12);
}
.chapter-footer-nav:has(.quest-nav-btn:only-child) { grid-template-columns: minmax(220px, 1fr); }
.quest-nav-btn {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: .65rem;
	min-height: 74px;
	padding: .7rem 1rem;
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(237,229,251,.96));
	text-align: left;
}
.quest-nav-btn > span { grid-row: 1 / 3; font-size: 1.7rem; }
.quest-nav-btn b { font-size: .92rem; }
.quest-nav-btn small { color: var(--text-muted); font-size: .7rem; font-weight: 700; }
.review-navigation { width: 100%; }

/* Recompensa y feedback con lenguaje principal claro. */
.chapter-victory { text-align: center; }
.victory-gem {
	display: grid;
	place-items: center;
	width: 5rem; height: 5rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, white, var(--sun));
	border: 3px solid var(--ink);
	box-shadow: 0 7px 0 var(--ink), 0 0 35px rgba(255,201,60,.5);
	font-size: 2.25rem;
}
.victory-score { font-weight: 850; color: var(--ink); }
.power-earned-panel {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	width: 100%;
	padding: .85rem;
	border-radius: 18px;
	background: linear-gradient(145deg, var(--ink-light), var(--ink));
	color: white;
}
.power-earned-kicker { color: var(--sun); font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.power-earned-card {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 12px;
	background: rgba(255,255,255,.08);
	text-align: left;
}
.power-earned-card > span { font-size: 1.8rem; }
.power-earned-card div { display: flex; flex-direction: column; }
.power-earned-card small { color: rgba(255,255,255,.72); }
.power-not-earned { color: var(--text-muted); font-size: .86rem; }
.rank-up {
	padding: .45rem .7rem;
	border-radius: 999px;
	background: rgba(155,107,209,.14);
	color: var(--ink);
	font-weight: 900;
}
.rank-up small { color: var(--text-muted); }
.feedback-heading { margin: 0 0 .55rem; color: var(--ink); }
.feedback-answer,
.hp-feedback-line,
.feedback-coach-es { margin: .45rem 0; }
.hp-feedback-line { color: #91483e; font-weight: 850; }
.feedback-coach-es {
	padding: .65rem .75rem;
	border-radius: 11px;
	background: rgba(255,255,255,.55);
	color: var(--text-muted);
	font-size: .84rem;
	line-height: 1.4;
}
.feedback-continue {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 180px;
}
.feedback-continue small { font-size: .65rem; opacity: .7; }

@media (max-width: 680px) {
	.character-grid-v14 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
	.power-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.power-deck-title { align-items: flex-start; flex-direction: column; }
	.chapter-footer-nav { grid-template-columns: 1fr; }
	.quest-nav-btn { min-height: 66px; }
}
@media (max-width: 420px) {
	.character-grid-v14 { gap: .55rem; }
	.character-grid-v14 .character-card { padding: .3rem; }
	.character-card-copy small { font-size: .67rem; }
	.power-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.option { padding: .65rem .7rem; font-size: .9rem; }
	.option-letter { flex-basis: 1.7rem; width: 1.7rem; height: 1.7rem; }
}
/* ========================================================================
   PASADA ACADÉMICA RPG v15 — diagnóstico oral, Espejo del Héroe y reportes
   ======================================================================== */

.speech-skip-panel {
	margin-top: 1rem;
	padding: 1rem;
	border: 2px dashed rgba(53, 36, 81, .3);
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(155, 107, 209, .09), rgba(79, 209, 197, .1));
	text-align: center;
}
.speech-skip-panel p { margin: 0 0 .7rem; color: var(--text-muted); font-size: .9rem; }
.speaking-skip-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: .45rem; flex-wrap: wrap; }
.speaking-skip-btn small { font-weight: 700; opacity: .72; }
.feedback-box.diagnostic {
	background: linear-gradient(145deg, #f1ebff, #e9fffb);
	border-color: #8c69c8;
	box-shadow: 0 7px 0 rgba(83, 56, 126, .2);
}
.feedback-box.diagnostic .feedback-heading { color: #563b80; }

.self-assessment-screen { max-width: 860px; }
.reflection-orb {
	width: 94px;
	height: 94px;
	display: grid;
	place-items: center;
	margin: -.2rem auto 0;
	font-size: 3.35rem;
	border: 4px solid rgba(255,255,255,.8);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #fff, #c8f3f0 42%, #9b6bd1 100%);
	box-shadow: 0 0 0 5px var(--ink), 0 12px 30px rgba(82, 54, 126, .3);
}
.assessment-scale-legend {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .65rem;
	width: 100%;
	padding: .8rem;
	border-radius: 18px;
	background: var(--ink);
	color: white;
}
.assessment-scale-legend span { display: flex; flex-direction: column; align-items: center; text-align: center; }
.assessment-scale-legend small { opacity: .7; }
.self-assessment-form { width: 100%; display: grid; gap: 1.2rem; }
.assessment-group {
	display: grid;
	gap: .8rem;
	padding: 1rem;
	border: 3px solid var(--ink);
	border-radius: 24px;
	background: rgba(255,255,255,.72);
	box-shadow: 0 7px 0 rgba(53,36,81,.13);
}
.assessment-group-title { display: flex; align-items: center; gap: .7rem; text-align: left; }
.assessment-group-title > span { font-size: 2rem; }
.assessment-group-title h2 { margin: 0; font-size: 1.25rem; }
.assessment-group-title small { color: var(--text-muted); font-weight: 800; }
.assessment-item { margin: 0; padding: .9rem; border: 2px solid rgba(53,36,81,.18); border-radius: 18px; background: #fffaf0; }
.assessment-item legend { width: 100%; padding: 0 .25rem .55rem; text-align: left; }
.assessment-item legend b, .assessment-item legend small { display: block; }
.assessment-item legend small { margin-top: .2rem; color: var(--text-muted); }
.assessment-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.assessment-choices label { cursor: pointer; }
.assessment-choices input { position: absolute; opacity: 0; pointer-events: none; }
.assessment-choices span {
	min-height: 76px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .12rem;
	padding: .55rem;
	border: 2px solid rgba(53,36,81,.24);
	border-radius: 15px;
	background: white;
	transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.assessment-choices label:hover span { transform: translateY(-2px); border-color: var(--coral); }
.assessment-choices input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.assessment-choices input:checked + span {
	border-color: var(--ink);
	background: linear-gradient(145deg, #fff3b5, #ffd96a);
	box-shadow: 0 4px 0 var(--ink);
	transform: translateY(-3px);
}
.assessment-choices small { color: var(--text-muted); font-weight: 700; }
.assessment-error { min-height: 1.4rem; color: var(--bad); font-weight: 850; }
.reflection-submit { width: 100%; display: flex; flex-direction: column; align-items: center; }
.reflection-submit small { font-weight: 750; opacity: .72; }

.final-report-screen { max-width: 820px; }
.grade-crystal {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .8rem 1rem;
	padding: 1.1rem;
	border: 4px solid var(--ink);
	border-radius: 26px;
	background: linear-gradient(145deg, #263b67, #513d73);
	color: white;
	box-shadow: 0 10px 0 rgba(53,36,81,.28), 0 20px 35px rgba(44,28,78,.22);
}
.grade-crystal-icon { grid-row: 1 / 3; font-size: 4rem; filter: drop-shadow(0 5px 8px rgba(0,0,0,.25)); }
.grade-crystal div { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.grade-crystal small { width: 100%; color: #bfece7; font-weight: 900; letter-spacing: .08em; }
.grade-crystal strong { font-size: clamp(3rem, 12vw, 5rem); line-height: .9; color: var(--sun); text-shadow: 0 4px 0 rgba(0,0,0,.22); }
.grade-crystal b { font-size: 1.35rem; }
.grade-crystal p { grid-column: 2; margin: 0; opacity: .82; font-weight: 750; }
.grade-policy { margin-top: -.2rem; color: var(--text-muted); font-weight: 800; text-align: center; }
.academic-medal-grid { grid-template-columns: repeat(3, 1fr); }
.diagnostic-report-card, .reflection-report-card, .report-delivery-card {
	width: 100%;
	border: 3px solid var(--ink);
	border-radius: 22px;
	background: rgba(255,255,255,.88);
	box-shadow: 0 7px 0 rgba(53,36,81,.14);
}
.diagnostic-report-card, .reflection-report-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .85rem;
	padding: 1rem;
	text-align: left;
}
.diagnostic-report-card { background: linear-gradient(135deg, #fff0f5, #f9eaff); }
.reflection-report-card { background: linear-gradient(135deg, #ebfffb, #fff7d5); }
.diagnostic-report-icon, .reflection-report-icon { font-size: 2.5rem; }
.diagnostic-report-card span, .reflection-report-card span { color: var(--text-muted); font-size: .7rem; font-weight: 950; letter-spacing: .08em; }
.diagnostic-report-card h2, .reflection-report-card h2 { margin: .15rem 0; font-size: 1.15rem; }
.diagnostic-report-card p, .reflection-report-card p { margin: 0; color: var(--text-muted); }
.no-grade-badge { padding: .4rem .55rem; border-radius: 999px; background: var(--ink); color: white; font-size: .7rem; white-space: nowrap; }
.report-delivery-card { padding: 1.1rem; }
.report-delivery-heading { display: flex; align-items: center; gap: .7rem; text-align: left; }
.report-delivery-heading > span { font-size: 2.25rem; }
.report-delivery-heading h2, .report-delivery-heading p { margin: 0; }
.report-delivery-heading p { color: var(--text-muted); overflow-wrap: anywhere; }
.send-status { padding: .8rem; border-radius: 14px; font-weight: 850; }
.send-status.sent { background: #e8f8df; color: #376e27; }
.send-status.setup-needed { background: #fff4c7; color: #735810; }
.send-status.pending { background: #ffe8e4; color: #8e3c32; }
.report-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.report-action { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.report-action small { font-weight: 750; opacity: .72; }
.teacher-destination { margin: .8rem 0 0; color: var(--text-muted); font-size: .78rem; overflow-wrap: anywhere; }
.play-again-btn { margin-top: .25rem; }

@media (max-width: 620px) {
	.assessment-scale-legend { font-size: .8rem; }
	.assessment-choices { grid-template-columns: 1fr; }
	.assessment-choices span { min-height: 58px; flex-direction: row; gap: .45rem; }
	.academic-medal-grid, .report-action-grid { grid-template-columns: 1fr; }
	.grade-crystal { grid-template-columns: 1fr; text-align: center; }
	.grade-crystal-icon { grid-row: auto; }
	.grade-crystal div { justify-content: center; }
	.grade-crystal p { grid-column: 1; }
	.diagnostic-report-card, .reflection-report-card { grid-template-columns: auto 1fr; }
	.no-grade-badge { grid-column: 1 / -1; justify-self: start; }
}