/* ============================================================================
   MOBBYT ESCAPE ROOM · base.css
   Estructura, layout mobile-first y gamefeel. Los COLORES, TIPOGRAFÍAS y
   TEXTURAS los define cada skin sobrescribiendo estas variables.
   ============================================================================ */

:root {
  /* Tokens por defecto (una skin los reemplaza) */
  --er-bg: #14110b;
  --er-bg-2: #211a10;
  --er-superficie: rgba(255,255,255,.05);
  --er-borde: rgba(255,255,255,.12);
  --er-texto: #f3ead7;
  --er-texto-tenue: #b9ab8e;
  --er-acento: #d9a441;
  --er-acento-2: #c0392b;
  --er-exito: #4caf7d;
  --er-error: #e0564a;
  --er-radio: 16px;
  --er-sombra: 0 18px 50px rgba(0,0,0,.45);
  --er-fuente-display: Georgia, 'Times New Roman', serif;
  --er-fuente-texto: system-ui, sans-serif;
  --er-fuente-libro: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --er-textura: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--er-fuente-texto);
  color: var(--er-texto);
  background: var(--er-bg);
  background-image: var(--er-textura);
  background-attachment: fixed;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Contenedor app (mobile-first, centrado y limitado en desktop) -------- */
#er-app {
  display: block;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  position: relative;
}

.er-boot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100dvh; gap: 18px; color: var(--er-texto-tenue);
}
.er-boot__spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--er-borde); border-top-color: var(--er-acento);
  animation: er-spin .9s linear infinite;
}
@keyframes er-spin { to { transform: rotate(360deg); } }

/* ---- Pantalla y transición de entrada ------------------------------------ */
.er-pantalla {
  padding: 22px 18px 40px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.er-pantalla.entra { opacity: 1; transform: none; }

/* ---- Tipografía narrativa ------------------------------------------------- */
.er-titulo {
  font-family: var(--er-fuente-display);
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  line-height: 1.1; letter-spacing: .5px; margin-bottom: 6px;
  color: var(--er-acento);
}
.er-subtitulo { color: var(--er-texto-tenue); font-size: .95rem; margin-bottom: 18px; letter-spacing: .5px; text-transform: uppercase; }

.er-narrativa { font-size: 1.05rem; }
.er-narrativa p { margin-bottom: 12px; }
.er-narrativa em { color: var(--er-acento); font-style: italic; }
.er-narrativa strong { color: var(--er-texto); }
.er-narrativa a { color: var(--er-acento); text-underline-offset: 3px; }

/* ---- PORTADA -------------------------------------------------------------- */
.er-portada { text-align: center; padding-top: 2.4vh; display: flex; flex-direction: column; align-items: center; }
.er-portada__img { margin: 0 0 18px; width: 100%; max-width: 460px; }
.er-portada__img img {
  display: block; width: 100%; height: auto; max-height: 40vh; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--er-borde); box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
.er-portada__linea { color: var(--er-texto-tenue); max-width: 30rem; margin: 4px auto 24px; line-height: 1.55; }
.er-portada__linea p { margin: 0; }
.er-portada__sello {
  font-size: 3.4rem; display: inline-block; margin-bottom: 14px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
  animation: er-flota 3.4s ease-in-out infinite;
}
@keyframes er-flota { 0%,100% { transform: translateY(0) rotate(-3deg);} 50% { transform: translateY(-10px) rotate(3deg);} }
.er-portada .er-narrativa { text-align: left; margin: 18px 0 22px; }
.er-portada__meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.er-chip {
  font-size: .8rem; padding: 6px 12px; border-radius: 999px;
  background: var(--er-superficie); border: 1px solid var(--er-borde);
  color: var(--er-texto-tenue);
}
.er-chip--reloj { color: var(--er-acento); }

/* ---- BOTONES -------------------------------------------------------------- */
.er-btn {
  font-family: var(--er-fuente-texto); font-weight: 700; font-size: 1rem;
  color: #1a1206; background: var(--er-acento);
  border: none; border-radius: 12px; padding: 14px 22px;
  cursor: pointer; letter-spacing: .3px;
  box-shadow: 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .12s ease, filter .2s ease;
}
.er-btn:hover { filter: brightness(1.08); }
.er-btn:active { transform: scale(.96); }
.er-btn--grande { width: 100%; padding: 17px; font-size: 1.12rem; }
.er-btn--secundario { background: var(--er-superficie); color: var(--er-texto); border: 1px solid var(--er-borde); box-shadow: none; }

/* ---- HUD (marco global del juego + progreso) ------------------------------ */
.er-hud {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 4px 12px; margin-bottom: 6px;
  background: linear-gradient(var(--er-bg) 78%, transparent);
}
.er-hud__marco {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--er-superficie); border: 1px solid var(--er-borde);
}
.er-hud__juego {
  flex: 1; font-family: var(--er-fuente-display); font-size: .98rem; font-weight: 700;
  color: var(--er-acento); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.er-hud__progreso { flex: 1; }
.er-hud__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.er-hud__cap { font-size: .72rem; color: var(--er-texto-tenue); text-transform: uppercase; letter-spacing: 1px; }
.er-hud__barra { height: 6px; border-radius: 999px; background: var(--er-borde); margin-top: 6px; overflow: hidden; }
.er-hud__barra > span { display: block; height: 100%; background: var(--er-acento); border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.er-hud__tiempo { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem; color: var(--er-texto); }
.er-hud__tiempo--alerta { color: var(--er-error); animation: er-pulso 1s ease-in-out infinite; }
@keyframes er-pulso { 50% { opacity: .45; } }
.er-hud__sonido { background: var(--er-bg-2); border: 1px solid var(--er-borde); border-radius: 10px; padding: 6px 9px; cursor: pointer; font-size: 1rem; }

/* ---- CAPÍTULO ------------------------------------------------------------- */
.er-capitulo__no { font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--er-acento); margin-bottom: 4px; }
.er-capitulo__titulo { font-family: var(--er-fuente-display); font-size: 1.7rem; line-height: 1.15; margin-bottom: 14px; }

.er-consigna {
  margin: 18px 0; padding: 16px 16px 18px; border-radius: var(--er-radio);
  background: var(--er-superficie); border: 1px solid var(--er-borde);
  border-left: 4px solid var(--er-acento);
}
.er-consigna__rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--er-acento); margin-bottom: 8px; font-weight: 700; }

/* recursos enriquecidos dentro de consigna */
.recurso { margin: 12px 0; }
.recurso--mensaje code, .recurso--tabla-morse {
  display: block; background: rgba(0,0,0,.35); border: 1px solid var(--er-borde);
  border-radius: 10px; padding: 12px; font-size: 1.1rem; letter-spacing: 2px;
  text-align: center; color: var(--er-acento);
}
.recurso--tabla-morse { display: grid; grid-template-columns: repeat(auto-fit,minmax(70px,1fr)); gap: 6px; font-size: .85rem; letter-spacing: 1px; }
.recurso--tabla-morse span { background: rgba(0,0,0,.25); padding: 6px; border-radius: 6px; text-align: center; }
.recurso--enlace a { display: inline-block; padding: 10px 14px; background: var(--er-superficie); border: 1px solid var(--er-borde); border-radius: 10px; text-decoration: none; }
.hint-inline { font-size: .85rem; color: var(--er-texto-tenue); }

/* ---- CANDADO -------------------------------------------------------------- */
.er-candado {
  margin-top: 22px; padding: 20px 16px; border-radius: var(--er-radio);
  background: var(--er-bg-2); border: 1px solid var(--er-borde);
  text-align: center; box-shadow: var(--er-sombra); position: relative;
}
.er-candado__icono { font-size: 2.2rem; transition: transform .3s ease; }
.er-candado__label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--er-texto-tenue); margin: 8px 0 12px; }
.er-candado__fila { display: flex; gap: 8px; }
.er-candado__input {
  flex: 1; min-width: 0; padding: 14px; border-radius: 11px;
  border: 2px solid var(--er-borde); background: rgba(0,0,0,.3);
  color: var(--er-texto); font-size: 1.15rem; letter-spacing: 2px; text-align: center;
  font-family: var(--er-fuente-texto);
}
.er-candado__input:focus { outline: none; border-color: var(--er-acento); box-shadow: 0 0 0 4px rgba(217,164,65,.15); }
.er-candado__btn { white-space: nowrap; }

.er-pista { margin-top: 14px; background: none; border: none; color: var(--er-texto-tenue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .85rem; }
.er-pista__texto { margin-top: 10px; font-size: .9rem; color: var(--er-acento); background: rgba(0,0,0,.25); padding: 10px; border-radius: 10px; }

/* Estados del candado */
.er-candado.error { animation: er-shake .45s; border-color: var(--er-error); }
@keyframes er-shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-8px)} 40%,60%{transform:translateX(8px)} }
.er-candado.exito { border-color: var(--er-exito); animation: er-late .6s; }
.er-candado.exito .er-candado__icono { transform: scale(1.3) rotate(-12deg); }
@keyframes er-late { 0%{transform:scale(1)} 30%{transform:scale(1.03)} 100%{transform:scale(1)} }
.er-candado.revelada { border-color: var(--er-acento); box-shadow: 0 0 0 3px rgba(217,164,65,.2), var(--er-sombra); }

/* ---- TRIVIA --------------------------------------------------------------- */
.trivia { margin: 18px 0 6px; padding: 16px; border-radius: var(--er-radio); background: var(--er-superficie); border: 1px solid var(--er-borde); }
.trivia__cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.trivia__contador { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--er-texto-tenue); white-space: nowrap; }
.trivia__barra { flex: 1; height: 5px; border-radius: 999px; background: var(--er-borde); overflow: hidden; }
.trivia__barra > span { display: block; height: 100%; background: var(--er-acento); transition: width .4s ease; }
.trivia__pregunta { font-size: 1.15rem; margin-bottom: 14px; line-height: 1.3; }
.trivia__opciones { display: flex; flex-direction: column; gap: 10px; }
.trivia__opcion {
  text-align: left; padding: 14px 16px; border-radius: 12px;
  border: 2px solid var(--er-borde); background: var(--er-bg-2); color: var(--er-texto);
  font-size: 1rem; cursor: pointer; transition: transform .1s ease, border-color .2s, background .2s;
}
.trivia__opcion:hover:not(:disabled) { border-color: var(--er-acento); }
.trivia__opcion:active:not(:disabled) { transform: scale(.98); }
.trivia__opcion.es-correcta { border-color: var(--er-exito); background: rgba(76,175,125,.18); }
.trivia__opcion.es-incorrecta { border-color: var(--er-error); background: rgba(224,86,74,.18); }
.trivia__feedback { margin-top: 12px; min-height: 1.2em; font-weight: 700; text-align: center; }
.trivia__feedback.ok { color: var(--er-exito); }
.trivia__feedback.mal { color: var(--er-error); }
.trivia--fin { text-align: center; }
.trivia--fin h3 { font-family: var(--er-fuente-display); font-size: 1.5rem; margin-bottom: 8px; }

/* ---- GRILLA (pensamiento computacional) ---------------------------------- */
.grilla { margin: 18px 0 6px; }
.grilla__tablero {
  position: relative; display: grid; gap: 4px; aspect-ratio: 1; width: 100%;
  padding: 6px; border-radius: var(--er-radio);
  background: var(--er-bg-2); border: 1px solid var(--er-borde);
}
.grilla__celda { position: relative;
  background: var(--er-superficie); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.grilla__celda.es-obstaculo { background: var(--er-acento-2); opacity: .85; }
.grilla__celda.es-obstaculo::after { content: '⛔'; font-size: 1rem; }
.grilla__celda.es-destino { box-shadow: inset 0 0 0 2px var(--er-acento); }
.grilla__celda.es-rastro { background: color-mix(in srgb, var(--er-acento) 28%, transparent); }
.grilla__robot {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  pointer-events: none;
}
.grilla__robot.pop { animation: er-pop .26s ease; }
@keyframes er-pop { 0%{transform:scale(.55)} 60%{transform:scale(1.18)} 100%{transform:scale(1)} }
.grilla__robot.choca { animation: er-shake .5s; filter: drop-shadow(0 0 6px var(--er-error)); }

.grilla__programa { margin-top: 14px; }
.grilla__rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--er-acento); font-weight: 700; }
.grilla__secuencia {
  margin-top: 6px; min-height: 42px; padding: 8px; border-radius: 10px;
  background: rgba(0,0,0,.25); border: 1px solid var(--er-borde);
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
.grilla__secuencia em { color: var(--er-texto-tenue); font-size: .9rem; }
.grilla__token {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px;
  background: var(--er-acento); color: #1a1206; font-weight: 800; font-size: .95rem;
}
.grilla__botonera { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; }
.grilla__cmd {
  padding: 14px 0; border-radius: 12px; border: 2px solid var(--er-borde);
  background: var(--er-bg-2); color: var(--er-texto); font-weight: 800; font-size: 1.05rem;
  cursor: pointer; transition: transform .1s, border-color .2s;
}
.grilla__cmd:hover { border-color: var(--er-acento); }
.grilla__cmd:active { transform: scale(.94); }
.grilla__acciones { display: flex; gap: 8px; margin-top: 10px; }
.grilla__acciones .er-btn { flex: 1; padding: 12px; }
.grilla__estado { margin-top: 12px; min-height: 1.3em; text-align: center; font-weight: 700; }
.grilla__estado.ok { color: var(--er-exito); }
.grilla__estado.mal { color: var(--er-error); }

/* ---- TABLERO DE MISIÓN (estructura fija por nivel) ------------------------ */
.er-pantalla--capitulo { display: flex; flex-direction: column; min-height: 100dvh; }
/* El contenido se centra verticalmente en el espacio disponible: nada queda
   fuera de pantalla y no hay un hueco ocioso entre las fichas y el candado. */
.er-tablero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-bottom: 6px; }
.er-tablero__cabecera { text-align: center; }
.er-tablero__cabecera .er-capitulo__no { color: var(--er-acento); }
.er-tablero__cabecera .er-capitulo__titulo { margin-top: 2px; }
.er-tablero__guia { font-size: .85rem; color: var(--er-texto-tenue); margin-top: 8px; }

.er-tablero__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.er-comp-btn {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 18px 16px; border-radius: 18px; cursor: pointer; text-align: left;
  background: var(--er-superficie); border: 1px solid var(--er-borde); color: var(--er-texto);
  transition: transform .12s ease, border-color .2s, background .2s, box-shadow .2s, opacity .2s;
}
.er-comp-btn:hover { border-color: var(--er-acento); }
.er-comp-btn:active { transform: scale(.97); }
.er-comp-btn__icono { font-size: 1.8rem; line-height: 1; }
.er-comp-btn__label { font-weight: 700; font-size: 1.02rem; }
.er-comp-btn__estado { position: absolute; top: 10px; right: 12px; font-size: 1rem; font-weight: 800; color: var(--er-exito); }
.er-comp-btn__candado { display: none; position: absolute; top: 10px; right: 12px; font-size: .9rem; opacity: .75; }

/* Bloqueado (todavía no habilitado) */
.er-comp-btn[data-bloqueado] { opacity: .45; cursor: not-allowed; }
.er-comp-btn[data-bloqueado]:hover { border-color: var(--er-borde); }
.er-comp-btn[data-bloqueado] .er-comp-btn__candado { display: block; }

/* Llamado a la acción (titila sutilmente) */
.er-cta { border-color: var(--er-acento); }
.er-cta { animation: er-cta-blink 1.7s ease-in-out infinite; }
@keyframes er-cta-blink {
  0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--er-borde); }
  50% { box-shadow: 0 0 16px color-mix(in srgb, var(--er-acento) 45%, transparent); border-color: var(--er-acento); }
}
.recien-abierto { animation: er-pop .42s ease; }
.sacude { animation: er-shake .42s; }

.er-candado-bar {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 18px 20px; border: none; cursor: pointer; border-radius: 16px;
  background: linear-gradient(135deg, var(--er-acento), color-mix(in srgb, var(--er-acento) 55%, #000));
  color: #fff; font-family: var(--er-fuente-texto); font-weight: 800; font-size: 1.12rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, opacity .2s;
}
.er-candado-bar:active { transform: scale(.98); }
.er-candado-bar__flecha { margin-left: auto; font-size: 1.2rem; }
.er-candado-bar[data-bloqueado] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.er-candado-bar.lista { animation: er-late 1.5s ease-in-out infinite; box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-acento) 45%, transparent), 0 12px 30px rgba(0,0,0,.32); }

/* ---- PANELES (pantalla central con presencia, estilo videojuego) ---------- */
.er-paneles {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  opacity: 0; pointer-events: none; transition: opacity .26s ease;
}
.er-paneles.activo { opacity: 1; pointer-events: auto; }
.er-panel-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(10,16,28,.55), rgba(4,7,14,.86));
  backdrop-filter: blur(5px);
}
.er-panel {
  position: absolute; display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: 86vh;
  background: linear-gradient(180deg, var(--er-bg-2), var(--er-bg));
  border: 1px solid color-mix(in srgb, var(--er-acento) 30%, var(--er-borde));
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--er-acento) 14%, transparent);
  opacity: 0; transform: scale(.9) translateY(16px); pointer-events: none;
  transition: opacity .28s ease, transform .42s cubic-bezier(.2,1.35,.35,1);
}
.er-panel.abierto { opacity: 1; transform: none; pointer-events: auto; }
.er-panel--grande { width: min(720px, 100%); max-height: 92vh; }
/* filo superior de acento, da "marco" de juego */
.er-panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, var(--er-acento), var(--er-acento-2), transparent);
}
.er-panel__cab { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--er-borde); }
.er-panel__medalla {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 1.5rem;
  border-radius: 50%; background: color-mix(in srgb, var(--er-acento) 16%, var(--er-bg-2));
  border: 1px solid color-mix(in srgb, var(--er-acento) 35%, transparent);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--er-acento) 22%, transparent);
}
.er-panel__titulo { flex: 1; font-family: var(--er-fuente-display); font-size: 1.25rem; color: var(--er-acento); }
.er-panel__cerrar { background: var(--er-superficie); border: 1px solid var(--er-borde); border-radius: 10px; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; color: var(--er-texto); }
.er-panel__cuerpo { overflow-y: auto; padding: 18px; -webkit-overflow-scrolling: touch; }
.er-mision-cuerpo .er-consigna { background: none; border: none; padding: 0; }

/* ---- ILUSTRACIÓN DE EPISODIO (cabecera de la Historia) -------------------- */
.er-ilustracion { margin: 0 0 16px; }
.er-ilustracion img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--er-borde); box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* ---- NARRATIVA ESTILO LIBRO ----------------------------------------------- */
/* Tipografía de lectura: serif, interlínea amplia, texto justificado con
   guionado. El metatexto usa recursos de libro (no de red social):
   rótulo de capítulo en versalitas, línea de escena en itálica, letra
   capitular (drop cap), énfasis en itálica y fleurón de separación. */
.er-libro {
  font-family: var(--er-fuente-libro);
  font-size: 1.07rem; line-height: 1.8; color: var(--er-texto);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.er-libro p { margin: 0 0 .9em; }
.er-libro em, .er-libro i { font-style: italic; }
.er-libro strong { font-weight: 600; }   /* el libro enfatiza con itálica, no con negrita fuerte */

/* Rótulo de capítulo (versalitas, centrado, con filetes a los lados) */
.libro-rotulo {
  text-align: center; font-family: var(--er-fuente-display);
  font-variant: small-caps; letter-spacing: 3px; font-size: .98rem;
  color: var(--er-acento); margin: 2px 0 2px; text-indent: 0;
}
.libro-rotulo::before, .libro-rotulo::after { content: '·'; margin: 0 .6em; opacity: .7; }

/* Línea de escena / lugar (itálica, centrada, entre rayas) */
.libro-escena {
  text-align: center; font-style: italic; color: var(--er-texto-tenue);
  font-size: .96rem; margin: 0 0 18px; text-indent: 0;
}
.libro-escena::before, .libro-escena::after { content: '—'; margin: 0 .5em; opacity: .55; }

/* Párrafo de apertura con letra capitular */
.libro-apertura { text-indent: 0; }
.libro-apertura::first-letter {
  float: left; font-family: var(--er-fuente-display);
  font-size: 3.2em; line-height: .78; padding: .04em .12em 0 0;
  color: var(--er-acento);
}

/* Cierre en itálica (el gancho hacia la misión) */
.libro-cierre { font-style: italic; color: var(--er-texto); }

/* Fleurón / ornamento de separación */
.libro-sep {
  text-align: center; color: var(--er-acento-2);
  margin: 16px 0 2px; font-size: 1.15rem; letter-spacing: 6px; text-indent: 0;
}

@media (prefers-reduced-motion: reduce) {
  .er-cta { animation: none; border-color: var(--er-acento); }
}

/* ---- MISIÓN (resumen de tarea, no prosa) ---------------------------------- */
.er-mision-cuerpo { font-family: var(--er-fuente-texto); line-height: 1.6; }
.er-mision-cuerpo .na-fila { display: flex; gap: 8px; align-items: baseline; margin: 0 0 10px; }
.er-mision-cuerpo .na-fila .na-ic { flex: none; font-size: 1.05rem; }
.er-mision-cuerpo .na-objetivo { color: var(--er-acento-2); font-weight: 800; text-transform: uppercase; letter-spacing: .6px; font-size: .82rem; }

/* ---- ROMPECABEZAS (armado de imágenes por intercambio) -------------------- */
.rompe { display: flex; flex-direction: column; gap: 14px; }
.rompe__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rompe__progreso { font-weight: 800; color: var(--er-acento); font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; }
.rompe__titulo { font-style: italic; color: var(--er-texto-tenue); font-size: .92rem; text-align: right; }
.rompe__zona { display: flex; flex-direction: column-reverse; align-items: center; gap: 14px; }
.rompe__tablero {
  width: 100%; max-width: 340px; margin: 0 auto;
  display: grid; gap: 0; padding: 0;
  background: var(--er-borde); border: 1px solid var(--er-borde);
  border-radius: 14px; overflow: hidden;        /* solo el marco exterior se redondea */
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: box-shadow .3s ease;
}
.rompe__pieza {
  background-repeat: no-repeat; background-color: var(--er-superficie);
  border-radius: 0;                              /* piezas a tope: imagen continua */
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: box-shadow .12s ease;
}
/* Resaltado del destino al arrastrar: anillo INTERNO (no separa de las vecinas) */
.rompe__pieza.sobre { box-shadow: inset 0 0 0 3px var(--er-acento); }
.rompe__pieza.arrastrando { opacity: .25; }
.rompe__fantasma {
  position: fixed; z-index: 120; pointer-events: none; border-radius: 4px;
  background-repeat: no-repeat; box-shadow: 0 14px 32px rgba(0,0,0,.55); transform: scale(1.06); cursor: grabbing;
}
/* Imagen completa: se "sella" con un resplandor y se aprecia entera */
.rompe--completa {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-acento) 55%, transparent), 0 16px 38px rgba(0,0,0,.4);
  animation: rompe-sello .5s ease;
}
@keyframes rompe-sello { 0% { transform: scale(.985); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
.rompe__continuar { animation: er-late 1.6s ease-in-out infinite; }
.rompe__modelo { flex: none; width: 110px; margin: 0; text-align: center; }
.rompe__modelo img { width: 110px; height: auto; border-radius: 10px; border: 2px solid var(--er-borde); display: block; }
.rompe__modelo figcaption { font-size: .7rem; color: var(--er-texto-tenue); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
.rompe__estado { min-height: 1.2em; font-weight: 600; text-align: center; }
.rompe__estado.ok { color: var(--er-exito); }
.rompe__estado.mal { color: var(--er-error); }
.rompe__acciones { display: flex; justify-content: center; gap: 10px; }
.rompe__ayuda { font-size: .85rem; color: var(--er-texto-tenue); text-align: center; }

/* ---- RECURSOS COLAPSABLES ------------------------------------------------- */
.er-recurso { margin: 14px 0; border-radius: var(--er-radio); overflow: hidden; border: 1px solid var(--er-borde); }
.er-recurso__toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 16px; border: none; text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--er-acento) 22%, var(--er-bg-2)), var(--er-bg-2));
  color: var(--er-texto); font-family: var(--er-fuente-texto); font-size: 1rem; font-weight: 700;
}
.er-recurso__icono { font-size: 1.3rem; }
.er-recurso__titulo { flex: 1; }
.er-recurso__chevron { transition: transform .3s ease; color: var(--er-acento); font-size: 1.1rem; }
.er-recurso.abierto .er-recurso__chevron { transform: rotate(180deg); }
.er-recurso__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.er-recurso.abierto .er-recurso__cuerpo { grid-template-rows: 1fr; }
.er-recurso__interior { overflow: hidden; }
.er-recurso.abierto .er-recurso__interior { padding: 14px 16px; }
.er-recurso__toggle::after {
  content: ''; /* sutil destello para llamar la atención del botón */
}
.er-recurso:not(.abierto) .er-recurso__toggle { animation: er-recurso-late 2.6s ease-in-out infinite; }
@keyframes er-recurso-late { 0%,100%{ box-shadow: inset 0 0 0 0 transparent; } 50%{ box-shadow: inset 0 0 22px color-mix(in srgb, var(--er-acento) 35%, transparent); } }

/* ---- GRILLA: instrucción V y cofre ---------------------------------------- */
.grilla__cmd--ver { background: var(--er-acento); color: #1a1206; border-color: var(--er-acento); }
.grilla__token.es-ver { background: var(--er-acento-2); }
.grilla__ayuda { font-size: .82rem; color: var(--er-texto-tenue); margin-top: 10px; text-align: center; }
.grilla__celda.cofre-abierto { animation: er-cofre .6s ease; box-shadow: inset 0 0 0 3px var(--er-acento); }
@keyframes er-cofre { 0%{ transform: scale(1);} 40%{ transform: scale(1.18);} 100%{ transform: scale(1);} }

/* ---- CEREMONIA DE ENTREGA DE LA CLAVE ------------------------------------- */
.er-ceremonia { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease; }
.er-ceremonia.activa { opacity: 1; }
.er-ceremonia__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(0,0,0,.55), rgba(0,0,0,.82)); backdrop-filter: blur(3px); }
.er-ceremonia__panel {
  position: relative; z-index: 1; width: min(92%, 460px); text-align: center;
  padding: 30px 22px 26px; border-radius: 22px;
  background: linear-gradient(180deg, var(--er-bg-2), var(--er-bg));
  border: 1px solid var(--er-borde); box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: translateY(16px) scale(.96); transition: transform .4s cubic-bezier(.2,.9,.2,1); }
.er-ceremonia.activa .er-ceremonia__panel { transform: none; }

.er-ceremonia__sol { position: relative; width: 92px; height: 92px; margin: 0 auto 6px; display: grid; place-items: center; }
.er-ceremonia__nucleo { font-size: 3rem; filter: drop-shadow(0 0 14px var(--er-acento)); animation: er-sol-late 2.4s ease-in-out infinite; }
.er-ceremonia__rayos { position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12deg, color-mix(in srgb, var(--er-acento) 55%, transparent) 12deg 18deg, transparent 18deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 30px, #000 32px); mask: radial-gradient(circle, transparent 30px, #000 32px);
  animation: er-girar 14s linear infinite; opacity: .8; }
@keyframes er-girar { to { transform: rotate(360deg); } }
@keyframes er-sol-late { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }

.er-ceremonia__epi { font-size: .78rem; text-transform: uppercase; letter-spacing: 2px; color: var(--er-acento); margin-bottom: 14px; }
.er-ceremonia__rotulo { font-size: .9rem; color: var(--er-texto-tenue); margin-bottom: 10px; }
.er-ceremonia__clave { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 16px; }
.er-ceremonia__letra {
  font-family: var(--er-fuente-display); font-size: clamp(1.6rem, 8vw, 2.6rem); font-weight: 800;
  color: var(--er-acento); min-width: .5em; opacity: 0; transform: translateY(10px) scale(.6);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,1.4,.4,1); }
.er-ceremonia__letra.aparece { opacity: 1; transform: none; text-shadow: 0 0 18px color-mix(in srgb, var(--er-acento) 60%, transparent); }
.er-ceremonia__nota { font-size: .85rem; color: var(--er-texto-tenue); margin-bottom: 18px; }
.er-ceremonia__btn:disabled { opacity: .4; cursor: default; }
.er-ceremonia__btn.listo { animation: er-late 1.4s ease-in-out infinite; }

.er-candado.esperando { border-color: var(--er-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-acento) 25%, transparent), var(--er-sombra); }

@media (prefers-reduced-motion: reduce) {
  .er-ceremonia__rayos, .er-ceremonia__nucleo, .er-recurso__toggle { animation: none !important; }
  .er-ceremonia__letra { transition: opacity .12s ease; transform: none; }
}

/* ---- FINAL ---------------------------------------------------------------- */
.er-final { text-align: center; padding-top: 8vh; }
.er-final__icono { font-size: 4rem; margin-bottom: 14px; animation: er-flota 3s ease-in-out infinite; }
.er-final h1, .er-final h2 { font-family: var(--er-fuente-display); color: var(--er-acento); margin-bottom: 12px; }
.er-final__texto { text-align: left; margin: 16px 0 26px; }
.er-final--derrota .er-final__icono { animation: none; }

/* ---- ERROR ---------------------------------------------------------------- */
.er-error { padding: 30px; text-align: center; color: var(--er-error); }

/* ---- CONFETI -------------------------------------------------------------- */
.er-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.er-confeti i {
  position: absolute; top: -12px; width: 10px; height: 14px;
  background: hsl(var(--h,45) 80% 60%); border-radius: 2px;
  animation: er-caer 2.4s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes er-caer { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- LISTAS DENTRO DE NARRATIVA / MISIÓN (sangría correcta) --------------- */
.er-narrativa ol, .er-narrativa ul,
.er-mision-cuerpo ol, .er-mision-cuerpo ul { margin: .7em 0; padding-left: 1.7em; }
.er-narrativa li, .er-mision-cuerpo li { margin: .35em 0; line-height: 1.5; }
.er-narrativa ol { list-style: decimal; }

/* ---- AVISO DESTACADO (anotar las claves) --------------------------------- */
.na-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0 2px; padding: 12px 14px; border-radius: 12px;
  background: rgba(234,179,8,.12); border: 1px solid rgba(234,179,8,.45);
  color: var(--er-texto); font-size: .95rem; line-height: 1.45;
}
.na-aviso b { color: var(--er-acento, #eab308); }

/* ---- BOTÓN DE MENÚ (HUD) -------------------------------------------------- */
.er-hud__menu {
  background: transparent; border: 0; cursor: pointer; font-size: 1.25rem;
  color: var(--er-texto); padding: 2px 8px; border-radius: 8px; line-height: 1;
}
.er-hud__menu:hover { background: rgba(255,255,255,.08); }

/* ---- MENÚ (overlay de opciones) ------------------------------------------ */
.er-menu {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,10,20,.62); backdrop-filter: blur(3px);
  animation: er-fade .16s ease;
}
.er-menu__caja {
  width: 100%; max-width: 340px; background: var(--er-superficie);
  border: 1px solid var(--er-borde); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.er-menu__cabe {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--er-borde);
  font-family: var(--er-fuente-libro, serif); font-size: 1.05rem;
}
.er-menu__x { background: transparent; border: 0; color: var(--er-texto-tenue); font-size: 1rem; cursor: pointer; }
.er-menu__op {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 15px 16px; background: transparent; border: 0;
  border-bottom: 1px solid var(--er-borde); color: var(--er-texto);
  font-size: 1rem; cursor: pointer; text-align: left;
}
.er-menu__op:hover { background: rgba(255,255,255,.05); }
.er-menu__estado { color: var(--er-texto-tenue); font-size: .85rem; }
.er-menu__op--peligro { color: #f08a8a; }
.er-menu__confirm { padding: 16px; }
.er-menu__confirm p { margin: 0 0 14px; color: var(--er-texto); line-height: 1.45; }
.er-menu__confirm-bts { display: flex; gap: 10px; }
.er-menu__confirm-bts .er-btn { flex: 1; margin: 0; }
.er-btn--peligro { background: #c0392b; color: #fff; border: 0; box-shadow: none; }
.er-btn--peligro:hover { background: #d04335; }

@keyframes er-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= UX v0.6: CTA, paneles de lectura, logro ================ */

/* --- CTA: el paso activo titila; el globo solo en el onboarding ----------- */
.er-tablero__guia { display: none; } /* la guía textual se reemplaza por el titilar/globo */
.er-cta { position: relative; }
.er-comp-btn.er-cta {
  border-color: var(--er-acento);
  background: color-mix(in srgb, var(--er-acento) 14%, var(--er-superficie));
  animation: er-cta-pulse 1.3s ease-in-out infinite;
}
.er-candado-bar.er-cta { animation: er-cta-pulse 1.3s ease-in-out infinite; }
@keyframes er-cta-pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--er-acento) 50%, transparent); }
  50%     { box-shadow: 0 0 0 5px color-mix(in srgb, var(--er-acento) 24%, transparent); }
}

/* Banda de aire para el globo (va DEBAJO del botón), solo en onboarding */
.er-tablero--onboarding .er-candado-bar { margin-top: 54px; }
.er-tablero--onboarding .er-tablero__botones { margin-bottom: 4px; }

/* Globo flotante DEBAJO del botón; el dedo 👆 apunta hacia arriba, al botón */
.er-cta[data-cta-hint]::after {
  content: attr(data-cta-hint);
  position: absolute; left: 50%; top: calc(100% + 11px); transform: translateX(-50%);
  background: var(--er-acento); color: #06121f; font-weight: 800; font-size: .8rem;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.4); animation: er-cta-bob 1.1s ease-in-out infinite; z-index: 6;
}
.er-cta[data-cta-hint]::before {
  content: ''; position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--er-acento); pointer-events: none; z-index: 6;
}
@keyframes er-cta-bob { 0%,100% { top: calc(100% + 11px); } 50% { top: calc(100% + 16px); } }

/* botones bloqueados: claramente apagados */
.er-comp-btn[data-bloqueado] { opacity: .4; filter: grayscale(.5); }

/* --- Botón de avance al PIE del contenido (secundario, no fijo) ----------- */
.er-panel__continuar {
  margin-top: 26px; padding-top: 18px; text-align: center;
  border-top: 1px dashed var(--er-borde);
}
.er-panel__cta {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 24px; border-radius: 999px; font-family: var(--er-fuente-texto);
  font-weight: 700; font-size: 1rem; color: var(--er-acento);
  background: color-mix(in srgb, var(--er-acento) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--er-acento) 45%, transparent);
  transition: background .15s ease, transform .12s ease;
}
.er-panel__cta:hover { background: color-mix(in srgb, var(--er-acento) 18%, transparent); }
.er-panel__cta:active { transform: scale(.97); }

/* --- Ficha del villano + subtítulos de bloque (legibles) ------------------ */
.na-ficha {
  display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 4px; padding: 14px 16px;
  border-radius: 14px; background: linear-gradient(135deg, #eef1f4, #dde2e8);
  border: 1px solid #c2cad3; color: #20262e;
}
.na-ficha__ic { font-size: 1.9rem; line-height: 1; }
.na-ficha b { color: #11151a; }
.na-sub { font-weight: 800; margin: 16px 0 7px; color: var(--er-texto); }

/* --- PANTALLA DE LOGRO (premio luminoso, alto contraste) ------------------ */
.er-logro { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 22px; opacity: 0; transition: opacity .2s ease; }
.er-logro.activa { opacity: 1; }
/* Fondo opaco: nada del tablero se transparenta */
.er-logro__backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(86,156,214,.55), transparent 60%),
    linear-gradient(180deg, #0f2138 0%, #0a1626 100%);
}
.er-logro__panel {
  position: relative; text-align: center; max-width: 410px; width: 100%; max-height: 88vh; overflow: auto;
  background: linear-gradient(180deg, #ffffff 0%, #eef6fd 100%);
  border: 2px solid #f0c24a; border-radius: 22px; padding: 28px 24px 24px;
  box-shadow: 0 26px 70px rgba(0,0,0,.5), 0 0 0 6px rgba(120,180,230,.18);
  transform: scale(.9); transition: transform .26s cubic-bezier(.2,1.3,.4,1);
}
.er-logro.activa .er-logro__panel { transform: scale(1); }
.er-logro__estallido {
  position: absolute; left: 50%; top: 46px; width: 250px; height: 250px; transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg, transparent 0 15deg, rgba(240,194,74,.55) 15deg 19deg, transparent 19deg 36deg);
  border-radius: 50%; animation: er-logro-spin 10s linear infinite; pointer-events: none; opacity: .8; z-index: 0;
}
@keyframes er-logro-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.er-logro__candado { position: relative; z-index: 1; font-size: 3.1rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); animation: er-logro-pop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes er-logro-pop { 0% { transform: scale(0) rotate(-18deg); } 100% { transform: scale(1) rotate(0); } }
.er-logro__titulo { position: relative; z-index: 1; font-family: var(--er-fuente-display); font-size: 1.55rem; color: #0c5aa6; margin: 8px 0 16px; text-shadow: 0 1px 0 #fff; }
.er-logro__rotulo { position: relative; z-index: 1; color: #5b6b7b; font-size: .82rem; text-transform: uppercase; letter-spacing: 1.6px; margin: 0 0 8px; font-weight: 700; }
.er-logro__clave {
  position: relative; z-index: 1; font-family: var(--er-fuente-display); font-size: clamp(1.7rem,7.5vw,2.5rem); font-weight: 800; letter-spacing: 2px;
  color: #0d2a44; background: #eaf3fb; border: 2px dashed #8fb8de; border-radius: 14px;
  padding: 12px 14px; margin: 0 0 16px; word-break: break-word;
}
.er-logro__nota { position: relative; z-index: 1; color: #5b6b7b; font-size: .92rem; line-height: 1.45; margin: 0 0 22px; }
.er-logro__btn {
  position: relative; z-index: 1; width: 100%; margin: 0; border: none; cursor: pointer;
  padding: 15px 18px; border-radius: 14px; font-family: var(--er-fuente-texto); font-weight: 800; font-size: 1.1rem; color: #fff;
  background: linear-gradient(135deg, #1f8bd6, #0c5aa6);
  box-shadow: 0 10px 24px rgba(12,90,166,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.er-logro__btn:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .er-comp-btn.er-cta, .er-candado-bar.er-cta, .er-cta[data-cta-hint]::after,
  .er-logro__estallido, .er-logro__candado { animation: none; }
}