/* ============================================================
   VN Engine — estilos del runtime
   Paleta "luz de escenario": tinta nocturna + lámpara ámbar
   ============================================================ */
:root {
  /* ---- paleta de marca "Construyendo Paz" ---- */
  --cp-green: #2e9e5e;   /* verde (Construyendo) */
  --cp-lime: #8dc63f;    /* verde lima (pieza de rompecabezas) */
  --cp-navy: #2b3b6b;    /* azul marino */
  --cp-cyan: #33aee0;    /* cian (paloma / "paz") */
  --cp-teal: #2c9e77;    /* verde azulado */

  --vn-ink: #0e1420;
  --vn-ink-soft: rgba(14, 22, 42, .84);
  --vn-ivory: #f3eee3;
  /* acento de la interfaz = cian de la marca */
  --vn-lamp: var(--cp-cyan);
  --vn-lamp-dim: rgba(51, 174, 224, .35);
  /* Tipografía moderna sin serif. --vn-display es la voz del diálogo y las
     decisiones; --vn-sans es la interfaz. Ambas usan fuentes del sistema,
     así que se ven bien sin depender de internet. */
  /* Por defecto ("Moderna"): la tipografía del producto, embebida en fonts.css → igual en todas las tabletas.
     Si el cuento elige otra fuente (theme.font), el motor sobreescribe --vn-display. */
  --vn-display: "Plus Jakarta Sans", "Segoe UI", "Roboto", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --vn-serif: var(--vn-display);
  --vn-sans: "Plus Jakarta Sans", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- variables de TEMA (personalizables por proyecto) ---- */
  --vn-box-bg: linear-gradient(180deg, rgba(43, 59, 107, .92), rgba(24, 33, 60, .94));
  --vn-box-border: transparent;
  --vn-box-radius: 6px;
  --vn-box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  --vn-text-color: var(--vn-ivory);
  --vn-text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  --vn-name-bg: linear-gradient(180deg, #2b3b6b, #1f2c52);
  --vn-name-color: var(--vn-ivory);
  --vn-choice-bg: linear-gradient(90deg, rgba(35, 48, 88, .94), rgba(22, 31, 58, .84));
  --vn-choice-color: var(--vn-ivory);
  --vn-choice-radius: 3px;
}

/* ============ PRESETS DE TEMA ============ */
.theme-limpio {
  --vn-box-bg: #f4efe4;
  --vn-box-border: #e3d6b5;
  --vn-box-radius: 22px;
  --vn-box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --vn-text-color: #26344c;
  --vn-text-shadow: none;
  --vn-name-bg: var(--vn-lamp);
  --vn-name-color: #26344c;
  --vn-choice-bg: #f4efe4;
  --vn-choice-color: #26344c;
  --vn-choice-radius: 30px;
}

.theme-madera {
  --vn-lamp: #e0a23f;
  --vn-lamp-dim: rgba(224, 162, 63, .4);
  --vn-box-bg: linear-gradient(180deg, #3a2b1c, #241813);
  --vn-box-border: #6b4a2c;
  --vn-box-radius: 12px;
  --vn-box-shadow: 0 20px 56px rgba(0, 0, 0, .6);
  --vn-text-color: #f3e6cf;
  --vn-text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  --vn-name-bg: linear-gradient(180deg, #7a5530, #4a3320);
  --vn-name-color: #f7ecd6;
  --vn-choice-bg: linear-gradient(90deg, rgba(58, 43, 28, .96), rgba(36, 24, 19, .9));
  --vn-choice-color: #f3e6cf;
  --vn-choice-radius: 9px;
}

/* Hogar — madera cálida y hogareña, pero con UI limpio (claro, aireado). */
.theme-hogar {
  --vn-lamp: #c17d3a;
  --vn-lamp-dim: rgba(193, 125, 58, .34);
  --vn-box-bg: linear-gradient(180deg, #fbf5ea, #f2e6d2);
  --vn-box-border: #e6d4b4;
  --vn-box-radius: 16px;
  --vn-box-shadow: 0 18px 46px rgba(74, 48, 20, .26), inset 0 1px 0 rgba(255, 255, 255, .6);
  --vn-text-color: #3e2c1a;
  --vn-text-shadow: none;
  --vn-name-bg: linear-gradient(180deg, #b07a3e, #8a5b2a);
  --vn-name-color: #fdf3e2;
  --vn-choice-bg: linear-gradient(180deg, #fdf8ef, #f4e9d6);
  --vn-choice-color: #3e2c1a;
  --vn-choice-radius: 14px;
}

.theme-noche {
  --vn-lamp: #7cc7ff;
  --vn-lamp-dim: rgba(124, 199, 255, .35);
  --vn-box-bg: rgba(8, 10, 16, .92);
  --vn-box-border: #223148;
  --vn-box-radius: 5px;
  --vn-box-shadow: 0 22px 60px rgba(0, 0, 0, .7);
  --vn-text-color: #eaf2ff;
  --vn-name-bg: #12203a;
  --vn-name-color: #cfe6ff;
  --vn-choice-bg: rgba(10, 16, 28, .92);
  --vn-choice-color: #eaf2ff;
  --vn-choice-radius: 4px;
}

.vn-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #07070b;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.vn-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
  background: #000;
  overflow: hidden;   /* recorta el fondo y las capas al marco 16:9 (barras limpias) */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---------- mundo y cámara ---------- */
.vn-camera {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  /* IMPORTANTE (móvil): NO promovemos/aplanamos la cámara. Si se aplana con
     will-change/backface, al hacer zoom su textura crece (1920·Z·1.24 ≈ 4500px)
     y supera el límite de textura de la GPU → aparecen ARTEFACTOS NEGROS.
     Sin aplanar, cada capa pesada (fondo/personajes) compone por separado a un
     tamaño acotado y el zoom es solo un transform compuesto. */
  transform: translateZ(0);
}

.vn-world {
  position: absolute;
  inset: 0;
}

.vn-layer {
  position: absolute;
  inset: -14%;
  /* Margen extra para que el zoom/mover/rotación NUNCA muestre borde negro.
     La cámara se limita a BG_MARGIN=12% (ver engine.js _applyCam); el fondo se
     extiende 14% → deja 2% de colchón de seguridad contra redondeos. */
}

.vn-bg {
  background-size: cover;
  background-position: center;
  /* Capa propia y acotada (no se hornea en la textura de la cámara): así el
     fondo (imagen, gradiente o SVG) nunca forma una textura gigante al hacer zoom. */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Imagen de fondo como <img> (mejor escalado en GPU móvil que background-image). */
.vn-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.vn-bg-b {
  opacity: 0;
}

.vn-chars,
.vn-fg {
  inset: 0;
}
/* Los actores llevan z-index propio (~110). Damos a la capa de personajes su
   propio contexto de apilamiento (z-index) para contenerlos, y ponemos el
   primer plano por encima de TODOS los personajes, pero por debajo de la
   interfaz (diálogos, decisiones, HUD), que vive en .vn-ui (z-index 500). */
.vn-chars { z-index: 10; }
/* primer plano: capa propia acotada (no se hornea en la cámara al hacer zoom) */
.vn-fg { z-index: 20; will-change: transform; transform: translateZ(0); }

.vn-actor {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
  transition: filter .26s linear;
}

.vn-sprite {
  display: block;
  height: 900px;
  width: auto;
  pointer-events: none;
}

.vn-sprite-b {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
}

/* ---------- capa de interfaz (espacio de pantalla) ---------- */
.vn-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  /* Propio plano 3D: en móvil (iOS/Android) los hermanos de un elemento con
     transform 3D — aquí .vn-camera al hacer zoom/mover — ignoran el z-index y
     pueden quedar TAPADOS. Darles su propia capa translateZ(0) restaura el orden. */
  transform: translateZ(0);
}

.vn-ui button {
  pointer-events: auto;
  font: inherit;
}

/* ---------- caja de diálogo ---------- */
.vn-box {
  position: absolute;
  box-sizing: content-box;   /* igual en el editor (que usa border-box global) y en el reproductor */
  left: 96px;
  right: 96px;
  bottom: 64px;
  min-height: 210px;
  padding: 42px 56px 46px;
  border-radius: var(--vn-box-radius);
  background: transparent;   /* el relleno va en ::before para poder darle opacidad sin desvanecer el texto */
  border: 2px solid var(--vn-box-border);
  box-shadow: var(--vn-box-shadow);
  isolation: isolate;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .28s ease, transform .34s cubic-bezier(.16, .84, .32, 1);
}

/* Relleno del cuadro con OPACIDAD configurable (--vn-box-opacity). El texto y el
   nombre quedan por encima y siempre nítidos. */
.vn-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--vn-box-bg);
  opacity: var(--vn-box-opacity, 1);
}
/* Con sprite 9-slice el relleno lo pone border-image: no dupliques el fondo. */
.has-boxsprite .vn-box::before { display: none; }

.vn-box::after {
  /* filo luminoso superior: la "luz de escenario" */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vn-lamp-dim) 18%, var(--vn-lamp) 50%, var(--vn-lamp-dim) 82%, transparent);
  opacity: .75;
}

.vn-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.vn-name {
  position: absolute;
  /* Anclado por su BASE al borde superior VISIBLE del cuadro: crece hacia ARRIBA,
     así el label nunca invade la primera línea del diálogo por más alto que sea el
     sprite. Se compensa el grosor del borde 9-slice del cuadro (--vn-box-bt/bl)
     para que la posición sea relativa al borde visible, no al área de contenido.
     --vn-name-y = solapamiento con el borde (neg = baja/solapa más). */
  top: auto;
  bottom: calc(100% + var(--vn-name-y, -6px) + var(--vn-box-bt, 0px));
  left: calc(var(--vn-name-x, 40px) - var(--vn-box-bl, 0px));
  padding: var(--vn-name-pad-y, 10px) var(--vn-name-pad-x, 22px) calc(var(--vn-name-pad-y, 10px) - 1px);
  font-family: var(--vn-name-font, var(--vn-sans));
  font-size: calc(26px * var(--vn-name-scale, 1));
  font-weight: var(--vn-name-weight, 650);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--name-color, var(--vn-name-color));
  background: var(--vn-name-bg);
  border-radius: var(--vn-box-radius) var(--vn-box-radius) 0 0;
  box-shadow: 0 -3px 0 var(--name-color, var(--vn-lamp)) inset, 0 8px 24px rgba(0, 0, 0, .4);
}

/* Legibilidad del nombre (Tema › Estilo › Nombre del personaje).
   vn-name-themecolor: el texto usa el color del TEMA; el del personaje queda
   en la línea inferior del label. vn-name-ol: contorno alrededor de las letras
   (--name-stroke por línea en modo automático, --vn-name-stroke fijo si no). */
.vn-name-themecolor .vn-name { color: var(--vn-name-color); }
.vn-name-ol .vn-name,
.vn-name-ol .vn-choice-prompt-who {
  --_s: var(--name-stroke, var(--vn-name-stroke, rgba(28, 16, 6, .92)));
  text-shadow:
    -2px -2px 0 var(--_s), 0 -2.5px 0 var(--_s), 2px -2px 0 var(--_s),
    2.5px 0 0 var(--_s), 2px 2px 0 var(--_s), 0 2.5px 0 var(--_s),
    -2px 2px 0 var(--_s), -2.5px 0 0 var(--_s),
    -1px -2.5px 0 var(--_s), 1px -2.5px 0 var(--_s), 2.5px -1px 0 var(--_s), 2.5px 1px 0 var(--_s),
    1px 2.5px 0 var(--_s), -1px 2.5px 0 var(--_s), -2.5px 1px 0 var(--_s), -2.5px -1px 0 var(--_s),
    0 3px 7px rgba(0, 0, 0, .45);
}

.vn-text {
  font-family: var(--vn-display);
  font-size: calc(42px * var(--vn-text-scale, 1));
  line-height: 1.5;
  color: var(--vn-text-color);
  text-shadow: var(--vn-text-shadow);
}

.vn-box.is-narration .vn-text {
  font-style: italic;
  /* Narración = versión atenuada del color de texto del tema (legible en temas
     claros como "Limpio" y en oscuros); antes era un beige fijo casi invisible en claro. */
  color: color-mix(in srgb, var(--vn-text-color, #ddd6c8) 80%, transparent);
}

/* ---------- Paneles / split (segunda toma) ---------- */
.vn-splitlayer {
  position: absolute;
  inset: 0;
  z-index: 400;                /* sobre la escena, bajo el cuadro de diálogo */
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);    /* propio plano 3D (ver .vn-ui) */
}

/* ---------- viñetas múltiples (paneles tipo cómic) ----------
   La capa se pinta con el color de los huecos (gutter, blanco por defecto); cada
   .vn-panel recorta su viñeta y deja ver ese color entre ellas, como los márgenes
   de una página de cómic. Mismo patrón anti-artefactos que el split: el elemento
   recortado (.vn-panel) es ESTÁTICO; sólo su hijo (.vn-panel-inner) se anima. */
.vn-panelslayer {
  position: absolute;
  inset: 0;
  z-index: 401;                /* sobre la escena, bajo el cuadro de diálogo */
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
  background: var(--vn-panel-gutter, #f6f4ee);   /* color de los huecos entre viñetas */
}
.vn-panel {
  position: absolute;
  inset: 0;
  /* SOLO recorta (clip-path inline por plantilla). No se promueve ni se anima. */
}
.vn-panel-inner {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}
.vn-panel-bg {
  position: absolute;
  inset: -3%;
  background-size: cover;
  background-position: center;
}
.vn-panel-char {
  position: absolute;
  left: var(--pcx, 50%);
  bottom: -2%;
  width: 70%;
  height: 96%;
  transform: translateX(-50%) scale(var(--pcs, 1));
  transform-origin: bottom center;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
}
/* Personaje en un panel superior (tríptico): más pequeño y anclado más arriba. */
.vn-panel-char.is-top { height: 62%; bottom: 44%; width: 40%; }
.vn-panel-inner { transition: filter .35s ease; }
/* quien habla queda pleno; las demás viñetas se atenúan tantito */
.vn-panelslayer.has-focus .vn-panel:not(.is-speaking) .vn-panel-inner { filter: brightness(.58) saturate(.8); }
.vn-split-panel {
  position: absolute;
  inset: 0;
  /* IMPORTANTE (móvil): este elemento SOLO recorta (clip-path). NO lo promovemos
     ni lo animamos. En iOS/Android, un elemento que a la vez tiene clip-path y es
     una capa compuesta (transform/will-change) reserva una textura del tamaño
     total y pinta la zona recortada con téxeles SIN INICIALIZAR → ARTEFACTOS
     NEGROS (el mismo fallo que el zoom de cámara). El recorte se queda aquí
     (capa estática, se aplica en el pintado) y la animación de deslizamiento va
     en .vn-split-inner. */
}
/* Contenido que SÍ se desliza (transform animado). Va sin recortar; el recorte
   lo pone el padre estático .vn-split-panel. Así ningún elemento es a la vez
   recortado y compuesto-mientras-anima. */
.vn-split-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}
/* región que cubre cada lado (recto) */
.vn-split-panel.side-right { clip-path: inset(0 0 0 44%); }
.vn-split-panel.side-left { clip-path: inset(0 56% 0 0); }
.vn-split-panel.side-top { clip-path: inset(0 0 56% 0); }
.vn-split-panel.side-bottom { clip-path: inset(44% 0 0 0); }
/* diagonal */
.vn-split-panel.side-right.is-diag { clip-path: polygon(52% 0, 100% 0, 100% 100%, 40% 100%); }
.vn-split-panel.side-left.is-diag { clip-path: polygon(0 0, 60% 0, 48% 100%, 0 100%); }
.vn-split-panel.side-top.is-diag { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 52%); }
.vn-split-panel.side-bottom.is-diag { clip-path: polygon(0 52%, 100% 40%, 100% 100%, 0 100%); }
.vn-split-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
}
.vn-split-char {
  position: absolute;
  left: var(--split-cx, 50%);
  bottom: -2%;
  width: 58%;
  height: 96%;
  transform: translateX(-50%) scale(var(--cs, 1));
  transform-origin: bottom center;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5));
}
/* Centro por defecto DENTRO de la mitad visible de cada lado (antes salía en el
   centro de la pantalla y quedaba cortado por el recorte del panel). */
.side-right .vn-split-char { left: var(--split-cx, 72%); }
.side-left .vn-split-char { left: var(--split-cx, 28%); }
.side-top .vn-split-char { left: var(--split-cx, 50%); bottom: 48%; height: 50%; }
.side-bottom .vn-split-char { left: var(--split-cx, 50%); height: 54%; }
/* línea divisoria negra al borde del panel */
/* Divisoria (gutter) dibujada como una línea SVG EXACTA sobre el borde del
   recorte del panel — así nunca sale chueca ni desalineada, en cualquier lado
   y también en diagonal. Va en la capa (sin recortar) para no perder grosor. */
.vn-split-divider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .55));
}
.vn-split-divider line {
  stroke: #0b0b0d;
  stroke-width: 14;
  vector-effect: non-scaling-stroke;
}

/* ---------- Tutorial guiado (onboarding del cuento y minijuegos) ---------- */
.vn-tuto {
  position: absolute; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center; padding: 4.2vmin;
  background: radial-gradient(120% 120% at 50% 30%, rgba(10, 14, 22, .52), rgba(6, 9, 14, .72));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: vn-tuto-bgin .3s ease;
  /* tipografía del PRODUCTO (no la de la historia): igual que portada y compuerta */
  font-family: var(--te-font, var(--vn-sans, ui-sans-serif, system-ui, sans-serif));
  -webkit-font-smoothing: antialiased;
  /* acento del tutorial: toma el color de lámpara del cuento → se siente a medida */
  --tuto-accent: var(--vn-lamp, #e8b04b);
}
.vn-tuto.is-out { opacity: 0; transition: opacity .2s ease; }
.vn-tuto button { font-family: inherit; }
@keyframes vn-tuto-bgin { from { opacity: 0; } to { opacity: 1; } }
.vn-tuto-card {
  position: relative; width: 100%; max-width: 430px; overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe, #eef3f8);
  border: 1px solid rgba(20, 30, 45, .10); border-radius: 24px;
  padding: 40px 32px 24px; text-align: center;
  box-shadow: 0 30px 80px rgba(6, 12, 22, .5), 0 2px 0 rgba(255, 255, 255, .7) inset;
  color: #22303f;
  animation: vn-tuto-pop .42s cubic-bezier(.16, .84, .32, 1) both;
}
.vn-tuto.is-compact .vn-tuto-card { max-width: 380px; padding: 34px 26px 20px; }
@keyframes vn-tuto-pop { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
/* barra de progreso superior */
.vn-tuto-prog { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(20, 30, 45, .08); }
.vn-tuto-prog i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tuto-accent) 62%, #fff), var(--tuto-accent));
  border-radius: 0 4px 4px 0; transition: width .42s cubic-bezier(.16, .84, .32, 1); }
.vn-tuto-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  display: grid; place-items: center; background: rgba(20, 30, 45, .05); border: 0; border-radius: 10px;
  color: rgba(34, 48, 63, .5); cursor: pointer; transition: background .15s, color .15s;
}
.vn-tuto-x svg { width: 15px; height: 15px; }
.vn-tuto-x:hover { background: rgba(20, 30, 45, .1); color: #22303f; }
.vn-tuto-body.is-in { animation: vn-tuto-stepin .34s cubic-bezier(.16, .84, .32, 1); }
@keyframes vn-tuto-stepin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ícono en un "chip" con tinte del acento */
.vn-tuto-ico {
  width: 74px; height: 74px; margin: 4px auto 16px; border-radius: 20px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tuto-accent) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--tuto-accent) 30%, transparent);
  color: color-mix(in srgb, var(--tuto-accent) 72%, #2a2318);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tuto-accent) 22%, transparent);
}
.vn-tuto-ico svg { width: 38px; height: 38px; }
.vn-tuto-ico.is-emoji { font-size: 40px; background: rgba(20, 30, 45, .05); border-color: transparent; box-shadow: none; }
.vn-tuto.is-compact .vn-tuto-ico { width: 62px; height: 62px; }
.vn-tuto.is-compact .vn-tuto-ico svg { width: 32px; height: 32px; }
.vn-tuto-step { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tuto-accent) 55%, #6b7887); margin-bottom: 8px; }
.vn-tuto-title { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: #141d28; }
.vn-tuto-text { margin: 0 auto 22px; max-width: 30ch; font-size: 15.5px; font-weight: 500; line-height: 1.6; color: #52647a; }
.vn-tuto-dots { display: flex; gap: 8px; justify-content: center; margin: 0 0 22px; }
.vn-tuto-dots i {
  width: 7px; height: 7px; border-radius: 50%; cursor: pointer;
  background: rgba(34, 48, 63, .16); transition: background .2s, transform .2s, width .2s;
}
.vn-tuto-dots i.on { background: var(--tuto-accent); width: 20px; border-radius: 4px; }
.vn-tuto-actions { display: flex; gap: 8px; justify-content: center; align-items: center; }
.vn-tuto-skip {
  background: none; border: 0; color: #7a889a; font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 12px 16px; border-radius: 11px; transition: background .15s, color .15s;
}
.vn-tuto-skip:hover { color: #22303f; background: rgba(20, 30, 45, .05); }
.vn-tuto-key {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tuto-accent) 78%, #fff), var(--tuto-accent));
  color: #241c0a; border: 0; font-size: 15.5px; font-weight: 800; cursor: pointer;
  padding: 14px 24px; border-radius: 13px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--tuto-accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: filter .15s, transform .05s, box-shadow .15s;
}
.vn-tuto-key:hover { filter: brightness(1.05); box-shadow: 0 14px 30px color-mix(in srgb, var(--tuto-accent) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5); }
.vn-tuto-key:active { transform: translateY(1px); }
.vn-tuto-arrow { width: 17px; height: 17px; }

/* ---------- Retrato del hablante en el cuadro de diálogo ---------- */
.vn-portrait {
  position: absolute;
  left: 8px;
  bottom: -46px;                 /* alineado al borde inferior del cuadro */
  width: 300px;
  height: 420px;
  pointer-events: none;
  transform-origin: bottom center;
  animation: vn-portrait-in .28s cubic-bezier(.16, .84, .32, 1);
}
.vn-portrait.is-framed { overflow: hidden; }   /* con encuadre se recorta al cuadro */
/* Fallback con sprite del personaje (sin retrato dedicado): acercamos a la parte
   superior para que se vea la cara/torso en lugar del cuerpo entero. */
.vn-portrait.is-sprite { overflow: hidden; }
.vn-portrait.is-sprite .vn-portrait-img {
  object-position: top center;
  transform: scale(1.85);
  transform-origin: top center;
}
.vn-portrait-img {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: bottom center;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
}
@keyframes vn-portrait-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- intro de logos (juegos exportados) ---------- */
.vn-intro {
  position: absolute; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: #000; overflow: hidden;
  /* Medidas relativas al propio intro (cqw/cqh) y no a la ventana: así se ve igual
     a pantalla completa y dentro de la vista previa del editor. */
  container-type: size;
  transition: opacity .46s ease, background-color .5s ease;
}
.vn-intro.is-out { opacity: 0; pointer-events: none; }
.vn-intro-slide {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center; padding: 6%;
  opacity: 0; transform: translateY(14px) scale(.94);
  transition: opacity .6s ease, transform .9s cubic-bezier(.16, .84, .32, 1);
  will-change: opacity, transform;
}
.vn-intro-slide.is-in { opacity: 1; transform: translateY(0) scale(1); }
.vn-intro-slide.is-leaving { opacity: 0; transform: translateY(-12px) scale(1.04); transition: opacity .5s ease, transform .6s ease; }
.vn-intro-kicker {
  font: 600 clamp(13px, 2.2vw, 20px)/1 var(--vn-sans);
  font-size: clamp(13px, 2.2cqw, 20px);
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.vn-intro-logo {
  max-width: min(56vw, 620px); max-height: 44vh; width: auto; height: auto;
  max-width: min(56cqw, 620px); max-height: 44cqh;
  transform: scale(var(--intro-logo-scale, 1));
  /* La sombra la fija el motor por logo (auto/personalizada/sin sombra), no el CSS. */
  animation: vn-intro-breathe 5s ease-in-out infinite;
}
@keyframes vn-intro-breathe { 0%, 100% { transform: scale(calc(var(--intro-logo-scale, 1) * 1)); } 50% { transform: scale(calc(var(--intro-logo-scale, 1) * 1.03)); } }
.vn-intro-tag {
  font: 500 clamp(15px, 2.6vw, 26px)/1.4 var(--vn-display, var(--vn-sans));
  font-size: clamp(15px, 2.6cqw, 26px);
  color: rgba(255, 255, 255, .82); max-width: 24em;
}
/* Marca del estudio como texto (p. ej. «D-TRAIL» en Construyendo Paz) cuando no hay logo. */
.vn-intro-brandtext {
  font: 800 clamp(34px, 8vw, 84px)/1 var(--vn-display, var(--vn-sans));
  font-size: clamp(34px, 8cqw, 84px);
  letter-spacing: .04em; color: #fff;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .5);
  animation: vn-intro-breathe 5s ease-in-out infinite;
}
.vn-intro-skip {
  position: absolute; right: 22px; bottom: 18px;
  font: 500 12.5px/1 var(--vn-sans); letter-spacing: .06em;
  color: rgba(255, 255, 255, .35);
  animation: vn-intro-skip-fade 1.2s ease both; animation-delay: 1.4s;
}
@keyframes vn-intro-skip-fade { from { opacity: 0; } to { opacity: 1; } }
.vn-box.has-portrait .vn-text { padding-left: 300px; }
.vn-box.has-portrait .vn-name { left: 300px; }

/* Sombra del retrato: sólo cuando la imagen NO se recorta. Con encuadre (o con el
   sprite de reserva) el contenedor recorta la imagen, y la sombra recortada se veía
   como un rectángulo gris translúcido detrás de la cara. */
.vn-portrait.is-framed .vn-portrait-img,
.vn-portrait.is-sprite .vn-portrait-img { filter: none; }

/* ---------- Retrato DENTRO del cuadro (tema: portraitStyle = "inside") ----------
   El retrato va en un marco cuadrado dentro del cuadro de diálogo, a la izquierda
   del texto; nada sobresale del cuadro. --pt = lado interior del marco. */
.vn-pt-inside .vn-portrait {
  --pt: var(--vn-pt, 254px);   /* el motor lo ajusta al alto del cuadro */
  box-sizing: content-box;
  left: 20px; top: 20px; bottom: auto;
  width: var(--pt); height: var(--pt);
  overflow: hidden;
  border: 2px solid var(--vn-box-border);
  border-radius: max(6px, calc(var(--vn-box-radius) - 8px));
  background: color-mix(in srgb, var(--vn-text-color, #3a2f24) 7%, transparent);
  transform-origin: center;
}
/* Retrato dedicado sin encuadre: llena el marco desde arriba (cara). */
.vn-pt-inside .vn-portrait-img { filter: none; object-fit: cover; object-position: top center; }
/* Con encuadre (o sprite de reserva) la imagen conserva la proporción 5:7 del retrato
   clásico, centrada en el marco: así los encuadres ya ajustados en el editor de
   personajes se ven IGUAL de altos (misma cara, mismo corte) y sólo ganan aire a los lados. */
.vn-pt-inside .vn-portrait.is-framed .vn-portrait-img,
.vn-pt-inside .vn-portrait.is-sprite .vn-portrait-img {
  left: 50%; width: calc(var(--pt) * 5 / 7); margin-left: calc(var(--pt) * -5 / 14);
  object-fit: contain;
}
.vn-pt-inside .vn-portrait.is-sprite .vn-portrait-img { object-position: top center; }
.vn-pt-inside .vn-box.has-portrait .vn-text { padding-left: calc(var(--vn-pt, 254px) - 2px); }
/* El nombre vuelve a su lugar normal: ya no hay retrato asomando sobre el cuadro. */
.vn-pt-inside .vn-box.has-portrait .vn-name { left: calc(var(--vn-name-x, 40px) - var(--vn-box-bl, 0px)); }

/* ---------- Sprites 9-slice para cuadros (border-image) ---------- */
/* El CENTRO se pinta con un color sólido (fill del sprite o color del tema) y el
   border-image dibuja SOLO el marco (sin `fill`). Así el interior es una sola
   pintura y no aparecen costuras del 9-slice al escalar el escenario. El relleno
   se recorta al INTERIOR del marco (background-clip: padding-box) para no asomar
   por las esquinas redondeadas del sprite. */
.vn-box.has-sprite {
  background: var(--vn-boxsprite-fill, var(--vn-box-bg));
  background-clip: padding-box;
  border-style: solid;
  border-color: transparent;
  border-width: var(--vn-boxsprite-bw, 40px);
  border-image-source: var(--vn-boxsprite-src);
  border-image-slice: var(--vn-boxsprite-slice, 40);
  border-image-width: var(--vn-boxsprite-bw, 40px);
  border-image-repeat: var(--vn-boxsprite-repeat, stretch);
  border-radius: 0;
  box-shadow: none;
}
.vn-box.has-sprite::before { display: none; }

.vn-name.has-sprite {
  background: var(--vn-namesprite-fill, var(--vn-name-bg));
  background-clip: padding-box;
  border-style: solid;
  border-color: transparent;
  border-width: var(--vn-namesprite-bw, 18px);
  border-image-source: var(--vn-namesprite-src);
  border-image-slice: var(--vn-namesprite-slice, 18);
  border-image-width: var(--vn-namesprite-bw, 18px);
  border-image-repeat: var(--vn-namesprite-repeat, stretch);
  border-radius: 0;
  box-shadow: none;
}

.has-choicesprite .vn-choice {
  background: var(--vn-choicesprite-fill, var(--vn-choice-bg));
  background-clip: padding-box;
  border-style: solid;
  border-color: transparent;
  border-left-width: var(--vn-choicesprite-bw, 24px);
  border-width: var(--vn-choicesprite-bw, 24px);
  border-image-source: var(--vn-choicesprite-src);
  border-image-slice: var(--vn-choicesprite-slice, 24);
  border-image-width: var(--vn-choicesprite-bw, 24px);
  border-image-repeat: var(--vn-choicesprite-repeat, stretch);
  border-radius: 0;
  box-shadow: none;
}
.has-choicesprite .vn-choice:hover,
.has-choicesprite .vn-choice:focus-visible { transform: translateX(6px); filter: brightness(1.08); }

.vn-ch {
  opacity: 0;
  transition: opacity .14s linear;
}

.vn-ch.on {
  opacity: 1;
}

.vn-ch.b {
  font-weight: 700;
}

.vn-ch.i {
  font-style: italic;
}

.vn-ch.big {
  font-size: 1.25em;
}

.vn-next {
  position: absolute;
  right: 34px;
  bottom: 26px;
  width: 26px;
  height: 26px;
  opacity: 0;
  border-right: 3px solid var(--vn-lamp);
  border-bottom: 3px solid var(--vn-lamp);
  transform: rotate(45deg);
}

.vn-next.ready {
  animation: vn-next 1.5s ease-in-out infinite;
}

@keyframes vn-next {

  0%,
  100% {
    opacity: .25;
    transform: rotate(45deg) translate(-3px, -3px);
  }

  50% {
    opacity: 1;
    transform: rotate(45deg) translate(3px, 3px);
  }
}

/* ---------- decisiones ---------- */
.vn-choices {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  /* "safe center" centra cuando caben y, cuando hay demasiadas, se comporta
     como flex-start para que la parte de arriba siga siendo accesible al hacer scroll. */
  justify-content: safe center;
  gap: 18px;
  padding: 40px 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.vn-choices::-webkit-scrollbar { width: 10px; }
.vn-choices::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; }

.vn-choices.is-visible {
  display: flex;
}

/* "Mantener el cuadro de diálogo": el cuadro real (abajo) muestra la pregunta,
   así que las opciones se elevan para no taparlo. */
.vn-choices.keep-box {
  padding-bottom: 380px;
  justify-content: safe center;
}

/* pregunta/última línea mostrada arriba de las opciones */
.vn-choice-prompt {
  flex: none;
  width: min(1120px, 100%);
  margin-bottom: 4px;
  padding: 18px 32px;
  background: linear-gradient(180deg, rgba(10, 15, 25, .82), rgba(10, 15, 25, .64));
  border-radius: 12px;
  border-left: 4px solid var(--vn-lamp);
  text-align: left;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  animation: vn-choice-in .42s cubic-bezier(.16, .84, .32, 1) forwards;
}
.vn-choice-prompt-who {
  display: block;
  font-family: var(--vn-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--name-color, var(--vn-lamp));
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.vn-choice-prompt-text {
  font-family: var(--vn-display);
  font-size: calc(28px * var(--vn-choice-scale, 1));
  color: var(--vn-ivory);
  line-height: 1.4;
}
.vn-choices.layout-circle .vn-choice-prompt,
.vn-choices.layout-star .vn-choice-prompt,
.vn-choices.layout-thoughts .vn-choice-prompt {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  width: min(900px, 80%);
}

.vn-choice {
  position: relative;
  flex: none;
  width: min(1120px, 100%);
  padding: calc(24px * var(--vn-ui-scale, 1)) calc(40px * var(--vn-ui-scale, 1));
  text-align: left;
  font-family: var(--vn-display);
  font-size: calc(34px * var(--vn-choice-scale, 1) * var(--vn-ui-scale, 1));
  color: var(--vn-choice-color);
  background: transparent;   /* el relleno va en ::after, para poder darle opacidad sin desvanecer el texto ni la insignia */
  border: 0;
  /* acento por opción (--ci lo pone el motor); si no hay, usa la lámpara del tema */
  border-left: 6px solid var(--ci, var(--vn-lamp-dim));
  border-radius: var(--vn-choice-radius);
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(4px) saturate(1.08);
  backdrop-filter: blur(4px) saturate(1.08);
  opacity: 0;
  transform: translateX(-28px);
  animation: vn-choice-in .42s cubic-bezier(.16, .84, .32, 1) forwards;
  transition: border-color .18s, filter .18s, transform .18s, box-shadow .18s;
}

/* Relleno de la opción con OPACIDAD configurable (--vn-choice-opacity). */
.vn-choices:not(.layout-thoughts) .vn-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--vn-choice-bg);
  opacity: var(--vn-choice-opacity, 1);
}
/* thoughts usa ::after para la colita → conserva su fondo en el elemento.
   sprite de opciones → el fondo lo pone border-image. */
.vn-choices.layout-thoughts .vn-choice,
.has-choicesprite .vn-choice { background: var(--vn-choicesprite-fill, var(--vn-choice-bg)); }
.has-choicesprite .vn-choice::after { display: none; }

/* Insignia numerada por opción — sólo en los diseños en lista (center/left/right).
   Da un ancla visual y ayuda a distinguir cada decisión de las demás.
   APARIENCIA (compartida por los tres diseños en lista): */
.vn-choices:not(.layout-circle):not(.layout-star):not(.layout-thoughts) .vn-choice::before {
  content: attr(data-n);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(44px * var(--vn-ui-scale, 1));
  height: calc(44px * var(--vn-ui-scale, 1));
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-family: var(--vn-sans);
  font-size: calc(24px * var(--vn-ui-scale, 1));
  font-weight: 900;
  line-height: 1;
  color: #fff;
  background: var(--ci, var(--vn-lamp));
  /* anillo blanco + sombra: el carácter resalta sobre cualquier fondo */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 4px 12px rgba(0, 0, 0, .4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  z-index: 2;
}
/* POSICIÓN — center/left: insignia a la izquierda. */
.vn-choices:not(.layout-right):not(.layout-circle):not(.layout-star):not(.layout-thoughts) .vn-choice {
  padding-left: calc(34px * var(--vn-ui-pad, 1) + 58px);
}
.vn-choices:not(.layout-right):not(.layout-circle):not(.layout-star):not(.layout-thoughts) .vn-choice::before {
  left: calc(14px * var(--vn-ui-pad, 1));
}
/* POSICIÓN — a la derecha: insignia y relleno del otro lado. */
.vn-choices.layout-right .vn-choice {
  padding-left: calc(34px * var(--vn-ui-pad, 1));
  padding-right: calc(34px * var(--vn-ui-pad, 1) + 58px);
}
.vn-choices.layout-right .vn-choice::before {
  right: calc(14px * var(--vn-ui-pad, 1));
}

/* Especificidad por encima de ".vn-ui button { font: inherit }" para que
   el tamaño/fuente de las opciones (center, left, right) sí se apliquen. */
.vn-choices .vn-choice {
  font-family: var(--vn-display);
  /* El aumento de móvil (ui-scale) agranda las opciones, PERO se topa para que
     nunca superen al texto del diálogo (42px): así la pregunta y las opciones
     quedan balanceadas en cualquier tamaño de ventana. */
  font-size: min(calc(32px * var(--vn-choice-scale, 1) * var(--vn-ui-scale, 1)), calc(38px * var(--vn-choice-scale, 1)));
  padding: calc(18px * var(--vn-ui-pad, 1)) calc(34px * var(--vn-ui-pad, 1));
}

.vn-choice:hover,
.vn-choice:focus-visible {
  border-left-color: var(--ci, var(--vn-lamp));
  filter: brightness(1.1) saturate(1.05);
  transform: translateX(6px);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .5), inset 0 0 0 1px color-mix(in srgb, var(--ci, var(--vn-lamp)) 55%, transparent);
  outline: none;
}
.vn-choices.layout-right .vn-choice:hover,
.vn-choices.layout-right .vn-choice:focus-visible { border-right-color: var(--ci, var(--vn-lamp)); }

.vn-choice:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ci, var(--vn-lamp)) 55%, transparent), 0 12px 40px rgba(0, 0, 0, .45);
}

@keyframes vn-choice-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- diseños de las decisiones ---------- */
.vn-choices.layout-left {
  align-items: flex-start;
  padding-left: 120px;
  padding-right: 220px;
}

.vn-choices.layout-right {
  align-items: flex-end;
  padding-right: 120px;
  padding-left: 220px;
}

.vn-choices.layout-left .vn-choice,
.vn-choices.layout-right .vn-choice {
  width: min(760px, 62%);
}

.vn-choices.layout-right .vn-choice {
  text-align: right;
  border-left: 0;
  border-right: 6px solid var(--ci, var(--vn-lamp-dim));
}

.vn-choices.layout-right .vn-choice:hover,
.vn-choices.layout-right .vn-choice:focus-visible {
  border-right-color: var(--ci, var(--vn-lamp));
}

.vn-choices.layout-circle,
.vn-choices.layout-star {
  padding: 0;
  overflow: visible;   /* los diseños radiales se posicionan absolutos: sin scroll */
}

.vn-choices.layout-circle .vn-choice,
.vn-choices.layout-star .vn-choice {
  width: auto;
  max-width: 440px;
  text-align: center;
  font-size: calc(30px * var(--vn-choice-scale, 1));
  padding: 20px 30px;
  border-left: 0;
  border-bottom: 5px solid var(--ci, var(--vn-lamp-dim));
}

.vn-choices.layout-circle .vn-choice:hover,
.vn-choices.layout-circle .vn-choice:focus-visible,
.vn-choices.layout-star .vn-choice:hover,
.vn-choices.layout-star .vn-choice:focus-visible {
  border-bottom-color: var(--ci, var(--vn-lamp));
  transform: scale(1.07);
}

/* Insignia numerada para los diseños RADIALES y de PENSAMIENTO: en la esquina
   superior izquierda (el texto va centrado, así que no cabe en línea). */
.vn-choices.layout-circle .vn-choice::before,
.vn-choices.layout-star .vn-choice::before,
.vn-choices.layout-thoughts .vn-choice::before {
  content: attr(data-n);
  position: absolute;
  /* insignia como pestaña ARRIBA-CENTRO: su borde inferior queda ~2px dentro del
     globo (sin importar la escala), así NUNCA tapa el texto centrado. */
  top: calc(2px - 38px * var(--vn-ui-scale, 1));
  left: 50%;
  transform: translateX(-50%);
  width: calc(38px * var(--vn-ui-scale, 1));
  height: calc(38px * var(--vn-ui-scale, 1));
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-family: var(--vn-sans);
  font-size: calc(20px * var(--vn-ui-scale, 1));
  font-weight: 900;
  line-height: 1;
  color: #fff;
  background: var(--ci, var(--vn-lamp));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 4px 12px rgba(0, 0, 0, .4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  z-index: 3;
}

/* ---------- pensamientos interactivos (globos flotantes) ---------- */
.vn-choices.layout-thoughts { padding: 0; overflow: visible; }
.vn-choices.layout-thoughts .vn-choice {
  width: auto;
  max-width: 360px;
  text-align: center;
  font-size: calc(30px * var(--vn-choice-scale, 1));
  padding: 24px 30px;
  border: 0;
  border-radius: 44px;
  background: radial-gradient(120% 120% at 50% 30%, rgba(247, 249, 255, .97), rgba(226, 233, 246, .95));
  color: #23324a;
  /* aro sutil del color de la opción para distinguir un globo de otro */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ci, var(--vn-lamp)) 62%, transparent), 0 14px 40px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .8);
  animation: vn-choice-in .42s cubic-bezier(.16, .84, .32, 1) forwards, vn-thought-float 4s ease-in-out infinite;
}
/* colita de globo de pensamiento */
.vn-choices.layout-thoughts .vn-choice::after {
  content: "";
  position: absolute;
  left: 26px; bottom: -20px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(232, 238, 249, .95);
  box-shadow: -16px 12px 0 -8px rgba(232, 238, 249, .95);
}
.vn-choices.layout-thoughts .vn-choice:hover,
.vn-choices.layout-thoughts .vn-choice:focus-visible {
  filter: brightness(1.04);
  transform: scale(1.06);
  outline: none;
}
@keyframes vn-thought-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -14px; }
}

/* ---------- temporizador de decisiones ---------- */
.vn-timer {
  position: absolute;
  top: 26px; left: 12%; right: 12%;
  height: 16px;
  border-radius: 10px;
  background: rgba(8, 12, 20, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
  z-index: 900;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.vn-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--vn-lamp, #e8b04b), #ffd27a);
  transition: none;
}
.vn-timer.is-low .vn-timer-fill { background: linear-gradient(90deg, #d9483f, #ff7a5b); }
.vn-timer.is-low { animation: vn-timer-pulse .6s ease-in-out infinite; }
@keyframes vn-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ---------- HUD ---------- */
.vn-hud {
  position: absolute;
  top: 28px;
  right: 32px;
  display: flex;
  gap: 10px;
}

.vn-hud-btn {
  pointer-events: auto;
  min-width: 62px;
  height: 54px;
  padding: 0 16px;
  font-family: var(--vn-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(243, 238, 227, .62);
  background: rgba(10, 15, 25, .5);
  border: 1px solid rgba(243, 238, 227, .12);
  border-radius: 3px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.vn-hud-btn:hover {
  color: var(--vn-ivory);
  border-color: rgba(243, 238, 227, .3);
}

.vn-hud-btn.on {
  color: var(--vn-ink);
  background: var(--vn-lamp);
  border-color: var(--vn-lamp);
}

/* ---------- historial ---------- */
.vn-log {
  position: absolute;
  inset: 0;
  display: none;
  background: rgba(6, 9, 16, .97);
  z-index: 1200;            /* por encima del menú (incluido el menú de fin) */
  pointer-events: auto;
}

.vn-log.is-visible {
  display: block;
}

.vn-log-inner {
  position: absolute;
  inset: 90px 200px;
  overflow-y: auto;
  font-family: var(--vn-serif);
  font-size: 34px;
  line-height: 1.55;
  color: #ddd6c8;
}

.vn-log-inner p {
  margin: 0 0 22px;
}

.vn-log-inner b {
  font-family: var(--vn-sans);
  font-size: 24px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vn-lamp);
  display: block;
  margin-bottom: 4px;
}

.vn-log-inner p.is-choice {
  color: var(--vn-lamp);
  font-style: italic;
}

/* ---------- efectos de pantalla ---------- */
.vn-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  /* Propio plano 3D para que el fundido/destello queden SIEMPRE por encima de
     la cámara (con transform 3D) en móvil. Sin esto, el fade podía "no verse"
     o parpadear al coincidir con un zoom/movimiento de cámara. */
  transform: translateZ(0);
}

.vn-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #fff;
  /* mix-blend-mode: screen daba destellos negros/rotos sobre contenido con
     transform 3D en móvil; un velo con opacidad es fiable y se ve igual de bien. */
  transform: translateZ(0);
  will-change: opacity;
}

.vn-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---------- capa de transición genérica (wipe / iris) ---------- */
.vn-trans {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 2;
  background: #000;
  transform: translateZ(0);
}

/* ---------- telón de teatro (dos paneles de terciopelo) ---------- */
.vn-curtain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 3;                 /* dentro de .vn-fx, sobre fundido/destello */
  overflow: hidden;
}
.vn-curtain-panel {
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: 54%;
  will-change: transform;
  background-color: #7a1111;
  /* pliegues (sombras y luces verticales) + volumen del panel */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .12) 2.2%, rgba(255, 175, 175, .30) 4.6%,
      rgba(0, 0, 0, .12) 7%, rgba(0, 0, 0, .55) 9.2%),
    linear-gradient(90deg, #3d0707 0%, #7c1212 26%, #ab1c1c 56%, #6d1010 100%);
  box-shadow: inset 0 40px 90px rgba(0, 0, 0, .45), inset 0 -34px 70px rgba(0, 0, 0, .5);
}
.vn-curtain-l {
  left: 0;
  transform: translateX(-100%);
  border-right: 2px solid rgba(0, 0, 0, .45);
}
.vn-curtain-r {
  right: 0;
  transform: translateX(100%);
  border-left: 2px solid rgba(0, 0, 0, .45);
  /* espejo: la luz cae hacia el CENTRO (borde izquierdo del panel derecho) */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .12) 2.2%, rgba(255, 175, 175, .30) 4.6%,
      rgba(0, 0, 0, .12) 7%, rgba(0, 0, 0, .55) 9.2%),
    linear-gradient(90deg, #6d1010 0%, #ab1c1c 44%, #7c1212 74%, #3d0707 100%);
}

/* ============================================================
   Efectos de cómic / manga: líneas cinéticas, foco, viñeta,
   recuadros flotantes (inset) y "pop" de onomatopeya.
   ============================================================ */
.vn-comic { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vn-comic-back { z-index: 5; }              /* dentro del mundo: detrás de personajes */
.vn-comic-front { z-index: 400; }           /* en el escenario: sobre todo, bajo el diálogo */

/* líneas de velocidad (rectas) */
.vn-speed { position: absolute; inset: -6%; pointer-events: none; will-change: transform; }
.vn-speed.is-horiz { animation: vnSpeedX .55s linear infinite; }
.vn-speed.is-vert { animation: vnSpeedY .55s linear infinite; }
@keyframes vnSpeedX { from { transform: translateX(0); } to { transform: translateX(-11px); } }
@keyframes vnSpeedY { from { transform: translateY(0); } to { transform: translateY(-11px); } }

/* líneas de concentración/foco (radiales) */
.vn-foco { position: absolute; inset: 0; pointer-events: none; transform-origin: center; animation: vnFoco 2.2s ease-in-out infinite; }
@keyframes vnFoco { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(.5deg); } }

/* viñeta */
.vn-vignette { position: absolute; inset: 0; pointer-events: none; }

/* recuadro/imagen flotante de narración */
.vn-inset {
  position: absolute; transform: translate(-50%, -50%) scale(.86); opacity: 0;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, 1.3, .4, 1);
  --inset-border: #17171b;
  border: 5px solid var(--inset-border);
  border-radius: 4px;
  background: #0c0d10;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5), 0 2px 0 rgba(0, 0, 0, .35);
}
.vn-inset.no-frame { border: 0; background: transparent; box-shadow: none; }
.vn-inset > img { display: block; width: 100%; height: auto; }
.vn-inset.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vn-inset.is-out { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.vn-inset.is-bob.is-in { animation: vnInsetBob 1.5s ease-in-out infinite; }
@keyframes vnInsetBob {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0); }
  50% { transform: translate(-50%, -50%) scale(1) translateY(-2.2%); }
}

/* "pop" de onomatopeya (imagen centrada con rebote) */
.vn-pop {
  position: absolute; transform: translate(-50%, -50%) scale(.5) rotate(-6deg); opacity: 0;
  transition: opacity .16s ease, transform .22s cubic-bezier(.2, 1.5, .35, 1);
}
.vn-pop > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.vn-pop.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.vn-pop.is-out { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(-3deg); }

@media (prefers-reduced-motion: reduce) {
  .vn-speed, .vn-foco, .vn-inset.is-bob.is-in { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vn-next.ready {
    animation: none;
    opacity: .6;
  }

  .vn-choice {
    animation-duration: .01ms;
    opacity: 1;
    transform: none;
  }
}

/* ---------- marionetas (personajes por piezas) ---------- */
.vn-rig {
  position: relative;
  width: 100%;
  height: 100%;
}

.vn-slot {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.vn-slot img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}

/* ---------- menú y pantalla final ---------- */
.vn-menu {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 60px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 28%, rgba(22, 32, 47, .96), rgba(7, 7, 11, .98) 72%);
  pointer-events: auto;
}

.vn-menu.is-visible {
  display: flex;
}
.vn-menu-copyright {
  position: absolute;
  left: 0; right: 0; bottom: calc(16px * var(--vn-ui-pad, 1));
  text-align: center;
  /* escala con la UI para que no se vea diminuto en móvil (igual que los botones) */
  font: 500 calc(15px * var(--vn-ui-scale, 1))/1.25 var(--vn-sans);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .58);
  padding: 0 16px;
  pointer-events: none;
}

.vn-menu.has-cover {
  background-color: #06090e;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.vn-menu h1 {
  margin: 0;
  font-family: var(--vn-display, var(--vn-serif));
  font-size: 92px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.04;
  color: var(--vn-ivory);
  text-shadow: 0 4px 34px rgba(0, 0, 0, .45);
}

/* Título como imagen (logotipo): el ancho lo fija titleScale en línea. */
.vn-menu-titleimg {
  display: block;
  max-width: 92%;
  height: auto;
  object-fit: contain;
  margin: 0 auto 8px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
  user-select: none;
  -webkit-user-drag: none;
}

.vn-menu .vn-menu-sub {
  margin: -14px 0 10px;
  font-family: var(--vn-sans);
  font-size: 26px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vn-lamp);
}

.vn-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(620px, 100%);
}

/* ---- Menú con layout libre: cada bloque se ancla por su centro (x/y del tema) ---- */
.vn-menu.has-layout > h1,
.vn-menu.has-layout > .vn-menu-titleimg,
.vn-menu.has-layout > .vn-menu-sub,
.vn-menu.has-layout > .vn-menu-actions {
  margin: 0;              /* la posición manda; sin márgenes que la desvíen */
}
.vn-menu.has-layout > .vn-menu-actions {
  width: auto;
  min-width: min(420px, 74%);
}
.vn-menu.has-layout[data-align="left"] { text-align: left; }
.vn-menu.has-layout[data-align="right"] { text-align: right; }
.vn-menu.has-layout[data-align="left"] > .vn-menu-actions { align-items: stretch; }
.vn-menu.has-layout[data-align="right"] > .vn-menu-actions { align-items: stretch; }

/* Panel de información (botón de menú tipo «texto»: créditos, agradecimientos…) */
.vn-info {
  position: absolute; inset: 0; z-index: 1100;
  display: grid; place-items: center; padding: 6vh 6vw;
  background: rgba(6, 9, 14, .72); backdrop-filter: blur(3px);
  pointer-events: auto;
}
.vn-info-card {
  max-width: min(680px, 92%); max-height: 82%; overflow: auto;
  display: flex; flex-direction: column; gap: 18px; text-align: center;
  padding: clamp(22px, 4vw, 40px);
  background: rgba(18, 25, 38, .96); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.vn-info-card h3 {
  margin: 0; font-family: var(--vn-display, var(--vn-serif));
  font-size: clamp(26px, 5vw, 44px); font-weight: 500; color: var(--vn-ivory);
}
.vn-info-body {
  font-family: var(--vn-sans); font-size: clamp(15px, 2.4vw, 19px); line-height: 1.6;
  color: rgba(255, 255, 255, .82); white-space: pre-wrap;
}
.vn-info-card .vn-menu-btn { align-self: center; min-width: 200px; }

/* Aviso para reingresar a pantalla completa (tras suspender/desbloquear). */
.vn-fsprompt {
  position: absolute; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 6vh 6vw;
  background: rgba(6, 9, 14, .82); backdrop-filter: blur(3px);
  pointer-events: auto;
}
.vn-fsprompt .vn-menu-btn { font-size: clamp(18px, 3.4vw, 30px); }

/* Especificidad por encima de ".vn-ui button { font: inherit }" para que
   el tamaño/tipografía de los botones del menú (portada, resultados, info)
   SÍ se apliquen — antes heredaban 16px y por eso casi no se leían en móvil. */
.vn-ui .vn-menu-btn {
  padding: calc(24px * var(--vn-ui-pad, 1)) calc(44px * var(--vn-ui-pad, 1));
  font-family: var(--vn-serif);
  font-size: calc(34px * var(--vn-ui-scale, 1));
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--vn-btn-text, var(--vn-ivory));
  background: var(--vn-btn-bg, rgba(20, 28, 44, .88));
  border: 2px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  box-shadow: inset 6px 0 0 var(--vn-btn-accent, var(--vn-lamp-dim)), 0 14px 34px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: background .16s, transform .16s, box-shadow .16s;
}

.vn-menu-btn:hover,
.vn-menu-btn:focus-visible {
  background: var(--vn-btn-hover-bg, rgba(34, 44, 66, .94));
  box-shadow: inset 6px 0 0 var(--vn-btn-accent, var(--vn-lamp)), 0 18px 40px rgba(0, 0, 0, .36);
  transform: translateY(-3px);
  outline: none;
}
.vn-menu-btn:active {
  background: var(--vn-btn-press-bg, var(--vn-btn-hover-bg, rgba(46, 58, 84, .98)));
  transform: translateY(0) scale(.99);
}

.vn-menu-btn.is-key {
  color: var(--vn-btn-key-text, #0e1420);
  background: var(--vn-btn-key-bg, var(--vn-lamp));
  border-color: transparent;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .28);
}
.vn-menu-btn.is-key:hover,
.vn-menu-btn.is-key:focus-visible {
  box-shadow: 0 20px 44px rgba(0, 0, 0, .36), inset 0 2px 0 rgba(255, 255, 255, .28);
}

.vn-menu-btn.is-key:hover {
  /* sin color de hover propio: el mismo color del botón, un poco más luminoso (antes era dorado fijo) */
  background: var(--vn-btn-key-hover-bg, var(--vn-btn-key-bg, var(--vn-lamp)));
  filter: brightness(1.06);
}
.vn-menu-btn.is-key:active {
  background: var(--vn-btn-press-bg, var(--vn-btn-key-hover-bg, var(--vn-btn-key-bg, var(--vn-lamp))));
  filter: brightness(.96);
}

.vn-scenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  width: min(1200px, 100%);
  max-height: 620px;
  overflow-y: auto;
}

.vn-scenes button {
  padding: 20px 24px;
  text-align: left;
  font-family: var(--vn-sans);
  font-size: 24px;
  color: #c9d3e0;
  background: rgba(18, 26, 40, .9);
  border: 1px solid rgba(243, 238, 227, .12);
  border-radius: 3px;
  cursor: pointer;
}

.vn-scenes button:hover {
  color: var(--vn-ivory);
  border-color: var(--vn-lamp);
}


/* ============================================================
   Minijuegos (overlay sobre la escena)
   ============================================================ */
.vn-minigame {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5vmin;
  box-sizing: border-box;
  background: rgba(6, 10, 16, .72);
  backdrop-filter: blur(3px);
  animation: mgIn .2s ease;
  touch-action: manipulation;            /* táctil: sin retardo de doble toque */
  -webkit-tap-highlight-color: transparent;
}
@keyframes mgIn { from { opacity: 0 } to { opacity: 1 } }

/* Modo INTEGRADO en la escena: sin fondo oscurecido ni ventana. El minijuego
   flota sobre el fondo/personajes actuales, como parte del cuento. Se añade una
   sombra suave para que los controles sigan siendo legibles sobre cualquier fondo. */
.vn-minigame.is-inline {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: end;                 /* el juego se apoya hacia la parte baja de la escena */
  padding-bottom: 4vmin;
}
.vn-minigame.is-inline .mg-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: min(760px, 96vw);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .85));
}
.vn-minigame.is-inline .mg-title,
.vn-minigame.is-inline .mg-status {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .9);
}

/* Fondo/escenario del minijuego integrado (mesa de madera, fieltro, recurso…).
   Aparece con un fundido y las piezas del juego van encima, como parte de la escena. */
.vn-minigame.is-scene { align-items: center; padding-bottom: 2.5vmin; }
/* Juego a pantalla completa (baile, mensajes): sin margen — abarca toda la escena.
   El contenido se ancla en absoluto para llenar exactamente, sin márgenes del flex. */
.vn-minigame.is-full { padding: 0; }
.vn-minigame.is-full > .bl,
.vn-minigame.is-full > .dm,
.vn-minigame.is-full > .mg-panel,
.vn-minigame.is-full > .dm-wrap {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; max-width: none; margin: 0;
}
.mg-scenebg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  animation: mgIn .45s ease;
}
.vn-minigame .mg-panel { position: relative; z-index: 1; }
/* acento configurable del minijuego (color del título/botón principal) */
.vn-minigame { --mg-accent: #ffce54; }
.mg-title { color: var(--mg-accent, #ffce54); }
/* tarjetas de memoria con imagen (sprite/recurso) */
.mg-card img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* ---- Capacitación: Quiz / Verdadero-Falso ---- */
.mg-quiz { max-width: min(680px, 96vw); }
.mg-quiz-prog { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 4px 0 6px; }
.mg-quiz-prog > span { display: block; height: 100%; background: var(--mg-accent, #ffce54); transition: width .3s ease; }
.mg-quiz-count { font-size: 12px; color: #9fb0c4; margin-bottom: 10px; }
.mg-quiz-q { font-size: clamp(16px, 3.2vmin, 22px); font-weight: 700; margin-bottom: 14px; line-height: 1.35; }
.mg-quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.mg-opt {
  text-align: left; padding: 13px 16px; border-radius: 12px; cursor: pointer; font-size: 15px;
  background: rgba(255, 255, 255, .06); color: #eef3f9; border: 1px solid rgba(255, 255, 255, .16);
  transition: background .12s, border-color .12s;
}
.mg-opt:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: var(--mg-accent, #ffce54); }
.mg-opt:disabled { cursor: default; }
.mg-opt.is-ok { background: rgba(46, 158, 99, .25); border-color: #58d68d; color: #d6f5e3; }
.mg-opt.is-bad { background: rgba(217, 72, 63, .22); border-color: #ff6b5e; color: #ffd9d4; }
.mg-quiz-result { font-size: clamp(38px, 9vmin, 60px); font-weight: 900; line-height: 1; margin: 6px 0 8px; }
.mg-quiz-result.is-win { color: #58d68d; }
.mg-quiz-result.is-lose { color: #ff6b5e; }

/* ---- Verdadero / Falso (dos botones grandes, distinto del cuestionario) ---- */
.mg-quiz.is-vf .mg-quiz-q.is-claim {
  font-size: clamp(18px, 3.8vmin, 26px); font-style: italic; margin: 10px auto 22px; max-width: 34ch;
  padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
}
.mg-vf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 6px; }
.mg-vf-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: clamp(18px, 5vmin, 34px) 10px; border-radius: 16px; cursor: pointer; font-size: clamp(16px, 3.4vmin, 21px);
  font-weight: 800; color: #eef3f9; border: 2px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  transition: transform .08s, background .15s, border-color .15s;
}
.mg-vf-btn:hover:not(:disabled) { transform: translateY(-2px); }
.mg-vf-btn.is-true { border-color: rgba(88, 214, 141, .55); }
.mg-vf-btn.is-true:hover:not(:disabled) { background: rgba(88, 214, 141, .16); }
.mg-vf-btn.is-false { border-color: rgba(255, 107, 94, .55); }
.mg-vf-btn.is-false:hover:not(:disabled) { background: rgba(255, 107, 94, .16); }
.mg-vf-ico { font-size: clamp(28px, 7vmin, 46px); line-height: 1; }
.mg-vf-btn.is-true .mg-vf-ico { color: #58d68d; }
.mg-vf-btn.is-false .mg-vf-ico { color: #ff6b5e; }
.mg-vf-btn.is-ok { background: rgba(88, 214, 141, .28); border-color: #58d68d; }
.mg-vf-btn.is-bad { background: rgba(217, 72, 63, .28); border-color: #ff6b5e; }
.mg-vf-btn:disabled { cursor: default; }

/* ---- Emparejar conceptos ---- */
.mg-match { max-width: min(720px, 96vw); }
.mg-match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 12px; }
.mg-match-col { display: flex; flex-direction: column; gap: 8px; }
.mg-match-cell {
  padding: 12px 14px; border-radius: 12px; cursor: pointer; font-size: 14.5px; line-height: 1.3;
  background: rgba(255, 255, 255, .06); color: #eef3f9; border: 1px solid rgba(255, 255, 255, .16);
}
.mg-match-cell:hover:not(.is-done) { border-color: var(--mg-accent, #ffce54); }
.mg-match-cell.is-sel { border-color: var(--mg-accent, #ffce54); background: rgba(255, 206, 84, .16); }
.mg-match-cell.is-done { background: rgba(46, 158, 99, .22); border-color: #58d68d; color: #cdeede; cursor: default; opacity: .85; }
.mg-match-cell.is-bad { background: rgba(217, 72, 63, .22); border-color: #ff6b5e; }

/* ---- Ordenar pasos ---- */
.mg-order { max-width: min(640px, 96vw); }
.mg-order-list { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mg-order-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); text-align: left;
}
.mg-order-item.is-bad { border-color: #ff6b5e; background: rgba(217, 72, 63, .16); }
.mg-order-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--mg-accent, #ffce54); color: #0b1018; font-weight: 800; font-size: 13px; display: grid; place-content: center; }
.mg-order-tx { flex: 1; min-width: 0; font-size: 14.5px; }
.mg-order-btns { flex: none; display: flex; gap: 4px; }
.mg-order-btns button {
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px;
  background: rgba(255, 255, 255, .1); color: #eef3f9; border: 1px solid rgba(255, 255, 255, .2);
}
.mg-order-btns button:disabled { opacity: .35; cursor: default; }

/* ===== Constancia / Certificado de capacitación ===== */
.mg-panel.mg-cert { background: transparent; border: none; box-shadow: none; padding: 0; max-width: min(560px, 96vw); }
.cert-card {
  position: relative; text-align: center; border-radius: 18px;
  padding: clamp(22px, 4.5vmin, 40px) clamp(18px, 4vmin, 34px) clamp(18px, 3.5vmin, 30px);
  background: linear-gradient(180deg, #fbf7ec, #f2ead6);
  color: #2a2418;
  border: 2px solid var(--mg-accent, #c9a24b);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 6px rgba(255, 255, 255, .55), inset 0 0 0 7px rgba(201, 162, 75, .35);
  animation: certIn .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes certIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.cert-card.is-no { background: linear-gradient(180deg, #f6f1ec, #eae1d8); border-color: #b07a5c; }
.cert-seal {
  position: absolute; top: -14px; right: clamp(12px, 4vmin, 26px);
  padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 1.5px;
  color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.cert-seal.is-ok { background: linear-gradient(180deg, #37b26e, #1f8a4c); }
.cert-seal.is-no { background: linear-gradient(180deg, #d98b5b, #b46236); }
.cert-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #9a7a34; }
.cert-org { margin-top: 4px; font-size: 16px; font-weight: 800; color: #4a3f28; }
.cert-lead { margin-top: 16px; font-size: 13px; color: #7a6d52; font-style: italic; }
.cert-name {
  margin: 4px 0 2px; font-size: clamp(24px, 6vmin, 38px); font-weight: 800; line-height: 1.1;
  font-family: "Georgia", "Times New Roman", serif; color: #2a2418;
  border-bottom: 2px solid rgba(201, 162, 75, .5); display: inline-block; padding: 0 10px 4px;
}
.cert-body { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: #4a3f28; }
.cert-body b { color: #2a2418; }
.cert-scorerow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 10px; flex-wrap: wrap; }
.cert-ring { position: relative; width: 84px; height: 84px; flex: none; }
.cert-ring-bg { fill: none; stroke: rgba(42, 36, 24, .12); stroke-width: 8; }
.cert-ring-fg { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.cert-ring-fg.is-ok { stroke: #1f8a4c; }
.cert-ring-fg.is-no { stroke: #c0553a; }
.cert-ring-num { position: absolute; inset: 0; display: grid; place-content: center; font-size: 22px; font-weight: 900; color: #2a2418; }
.cert-ring-num span { font-size: 12px; font-weight: 700; }
.cert-check { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-content: center; font-size: 30px; font-weight: 900; color: #fff; }
.cert-check.is-ok { background: linear-gradient(180deg, #37b26e, #1f8a4c); }
.cert-check.is-no { background: linear-gradient(180deg, #d98b5b, #b46236); }
.cert-scoretx { font-size: 13.5px; color: #6a5c40; max-width: 260px; text-align: left; }
.cert-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px dashed rgba(201, 162, 75, .5); }
.cert-date, .cert-sign { font-size: 14px; font-weight: 700; color: #2a2418; display: flex; flex-direction: column; gap: 2px; }
.cert-sign { text-align: right; }
.cert-date span, .cert-sign span { font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #9a8a68; }
.mg-cert .mg-actions { flex-wrap: wrap; gap: 8px; }
.mg-btn-dl { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: #eef3f9; }
.mg-btn-dl:hover { background: rgba(255, 255, 255, .18); }

/* ===== Baile en modo integrado (escena a pantalla completa, sin marco) =====
   El personaje va al centro, el escenario ocupa todo, y la pista de flechas
   se superpone a lo ancho de la pantalla. Toque para móvil. */
.bl.bl-integrado { max-width: none !important; width: 100%; height: 100%; padding: 0; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; display: flex; flex-direction: column; }
.bl.bl-integrado .bl-luces, .bl.bl-integrado .bl-rot { display: none !important; }
.bl.bl-integrado .bl-caja { flex: 1 1 auto; padding: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.bl.bl-integrado #blJuego.on { position: relative; height: 100%; display: block; }
.bl.bl-integrado .bl-cuerpo { position: absolute; inset: 0; display: block; gap: 0; }
.bl.bl-integrado .bl-esc { position: absolute; inset: 0; flex: none; border-radius: 0; }
.bl.bl-integrado .bl-ram { height: 76%; }
.bl.bl-integrado .bl-pista { position: absolute; inset: 0; flex: none; border-radius: 0; border: none !important; box-shadow: none !important; background: linear-gradient(180deg, rgba(8, 10, 14, .22), rgba(8, 10, 14, .42)) !important; }
.bl.bl-integrado .bl-pista canvas { background: transparent; }
.bl.bl-integrado .bl-hud { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 10px; right: 82px; z-index: 12; margin: 0; }
/* los 4 botones de carril (←↓↑→) son el control principal: van al fondo, a lo ancho */
.bl.bl-integrado .bl-botones { padding: 10px clamp(6px, 3vw, 46px) max(10px, env(safe-area-inset-bottom)); gap: clamp(6px, 2.2vw, 16px); }
/* botones utilitarios (sonido / salir): arriba a la derecha, chiquitos, sin estorbar */
.bl.bl-integrado .bl-pie { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 10px; left: auto; bottom: auto; width: auto; z-index: 13; margin: 0; padding: 0; }
/* fuera Sonido y "Otra vez": dejan la escena limpia */
.bl.bl-integrado #blMute, .bl.bl-integrado #blRe, .bl.bl-integrado .bl-son { display: none !important; }
/* botón de salir (rendirse) claro y discreto, arriba a la derecha */
.bl.bl-integrado .bl-salir {
  padding: 8px 15px; font-size: 12.5px; font-weight: 700; border-radius: 999px;
  background: rgba(20, 24, 32, .62); color: #f3ecdf; border: 1.5px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer;
}
.bl.bl-integrado .bl-salir:hover { background: rgba(217, 72, 63, .55); border-color: rgba(255, 160, 150, .6); }
.bl.bl-integrado .bl-tecla { display: none; }
.bl.bl-integrado .bl-combo { top: 14%; }

/* ===== Mensajes en modo integrado (escena a pantalla completa, sin marco) =====
   El celular es el protagonista: centrado, grande y completo. Los botones de
   respuesta (Contestar/Silenciar/Feo) viven DENTRO del chat, como app real.
   Abajo solo un pie mínimo: la reacción del personaje y "Apagar el celular". */
.dm.dm-integrado { max-width: none !important; width: 100%; height: 100%; padding: 0; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.dm.dm-integrado .dm-luces, .dm.dm-integrado .dm-rot { display: none !important; }
.dm.dm-integrado .dm-son, .dm.dm-integrado .dm-menu { display: none !important; }   /* fuera Sonido y Menú */
.dm.dm-integrado .dm-caja { padding: 4px !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.dm.dm-integrado #dmJuego.on {
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 8px max(8px, env(safe-area-inset-bottom));
  container-type: size;   /* el celular se mide contra ESTE contenedor (cqh) */
}
/* el celular ocupa casi todo el alto (solo se reserva un pie fino), escalado para caber completo */
.dm.dm-integrado .fon { --w: clamp(150px, calc((100cqh - 84px) / 2.13), min(346px, 94cqw)); flex: 0 0 auto; }

/* --- botones de respuesta DENTRO del chat del celular (barra de acción nativa) --- */
.dm.dm-integrado .dm-acc.en-chat {
  flex: 0 0 auto; grid-template-columns: 1fr 1fr 1fr; gap: calc(6 * var(--pt));
  padding: calc(8 * var(--pt)) calc(9 * var(--pt)) calc(11 * var(--pt));
  background: rgba(255, 255, 255, .55); border-top: 1px solid rgba(43, 58, 85, .1);
}
.dm.dm-integrado .dm-acc.en-chat .dm-ab {
  border: none; border-radius: calc(14 * var(--pt)); padding: calc(9 * var(--pt)) calc(3 * var(--pt)) calc(8 * var(--pt));
  box-shadow: 0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, .16);
}
.dm.dm-integrado .dm-acc.en-chat .dm-ab em { font-size: calc(17 * var(--pt)); }
.dm.dm-integrado .dm-acc.en-chat .dm-ab b { font-size: calc(11 * var(--pt)); }
.dm.dm-integrado .dm-acc.en-chat .dm-ab i { display: none; }   /* sin el número: look limpio */

/* --- pie mínimo: reacción del personaje + Apagar --- */
.dm.dm-integrado .dm-lado {
  width: min(560px, 96%); flex: 0 0 auto; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 4px 10px; text-align: center;
}
.dm.dm-integrado .dm-quien { flex: 0 1 auto; max-width: 66%; align-items: center; }
.dm.dm-integrado .dm-cara { width: 34px; height: 34px; border-width: 2px; border-radius: 10px; }
.dm.dm-integrado .dm-canta { font-size: 12px; padding: 5px 9px; }
.dm.dm-integrado .dm-pista { flex: 1 1 100%; order: -1; font-size: 12px; margin-bottom: 1px; }
.dm.dm-integrado .dm-salir {
  flex: 0 0 auto; padding: 7px 15px; font-size: 12px; font-weight: 700; border-radius: 999px;
  background: rgba(20, 24, 32, .5); color: #dfe8f0; border: 1.5px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer;
}
.dm.dm-integrado .dm-salir:hover { background: rgba(217, 72, 63, .5); border-color: rgba(255, 160, 150, .55); color: #fff; }
.dm.dm-integrado .dm-tecla { display: none; }

/* --- integrado: escritorio simplificado (sin dock ni páginas; 3 columnas grandes) --- */
.dm.dm-integrado .fon-dock, .dm.dm-integrado .fon-puntos { display: none; }
.dm.dm-integrado .fon-rejilla { grid-template-columns: repeat(3, 1fr); column-gap: calc(14 * var(--pt)); row-gap: calc(24 * var(--pt)); padding: calc(26 * var(--pt)) calc(26 * var(--pt)) 0; }
.dm.dm-integrado .fon-ico { width: calc(70 * var(--pt)); height: calc(70 * var(--pt)); border-radius: calc(16 * var(--pt)); font-size: calc(34 * var(--pt)); }
.dm.dm-integrado .fon-nom { font-size: calc(13 * var(--pt)); margin-top: calc(7 * var(--pt)); max-width: calc(96 * var(--pt)); font-weight: 600; }
.dm.dm-integrado .fon-badge { min-width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); line-height: calc(24 * var(--pt)); border-radius: calc(12 * var(--pt)); font-size: calc(13.5 * var(--pt)); top: calc(-7 * var(--pt)); right: calc(-7 * var(--pt)); }
/* Mensajes llama la atención: un halo suave que late (sin tapar nada) */
.dm.dm-integrado .fon-app.app-msj .fon-ico:before { content: ""; position: absolute; inset: calc(-5 * var(--pt)); border-radius: calc(20 * var(--pt)); border: calc(2.5 * var(--pt)) solid rgba(122, 214, 160, .9); animation: dmHalo 1.6s ease-out infinite; pointer-events: none; }
@keyframes dmHalo { 0% { opacity: .95; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.28); } }
/* lista: fuera buscador y "Editar"; renglones más holgados */
.dm.dm-integrado #dmVLista .fon-nav, .dm.dm-integrado .fon-buscar { display: none; }
.dm.dm-integrado .fon-grande { padding-top: calc(12 * var(--pt)); font-size: calc(30 * var(--pt)); }
.dm.dm-integrado .fon-row { min-height: calc(76 * var(--pt)); padding-top: calc(11 * var(--pt)); padding-bottom: calc(11 * var(--pt)); }
.dm.dm-integrado .fon-av:not(.chico) { width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); font-size: calc(19 * var(--pt)); }
.dm.dm-integrado .fon-row { grid-template-columns: calc(16 * var(--pt)) calc(48 * var(--pt)) 1fr auto; }
.dm.dm-integrado .fon-nombre { font-size: calc(17 * var(--pt)); }
.dm.dm-integrado .fon-prev { font-size: calc(14.5 * var(--pt)); line-height: calc(19 * var(--pt)); }
.dm.dm-integrado .fon-esp { height: calc(5 * var(--pt)); border-radius: calc(3 * var(--pt)); }
/* chat: globos y botones de respuesta más grandes */
.dm.dm-integrado .fon-burb { font-size: calc(16.5 * var(--pt)); line-height: calc(22 * var(--pt)); padding: calc(8 * var(--pt)) calc(13 * var(--pt)); max-width: 82%; }
.dm.dm-integrado .dm-acc.en-chat { gap: calc(7 * var(--pt)); padding: calc(10 * var(--pt)) calc(10 * var(--pt)) calc(24 * var(--pt)); }
.dm.dm-integrado .dm-acc.en-chat .dm-ab { padding: calc(11 * var(--pt)) calc(3 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(16 * var(--pt)); gap: calc(3 * var(--pt)); }
.dm.dm-integrado .dm-acc.en-chat .dm-ab em { font-size: calc(22 * var(--pt)); }
.dm.dm-integrado .dm-acc.en-chat .dm-ab b { font-size: calc(12.5 * var(--pt)); font-weight: 700; }
.dm.dm-integrado .dm-guia { display: none; }

/* --- tableta horizontal (dm-ancho): celular a todo lo alto + panel guía a la derecha --- */
.dm.dm-integrado.dm-ancho #dmJuego.on { flex-direction: row; gap: clamp(22px, 4.5cqw, 64px); padding: 8px clamp(16px, 3cqw, 40px); }
.dm.dm-integrado.dm-ancho .fon {
  --w: clamp(240px, calc((100cqh - 18px) / 2.13), min(430px, 44cqw));
  /* el contenido se dibuja ~16 % más grande que un teléfono real (340 pt de ancho lógico) */
  --pt: calc(var(--sw) / 340);
  --sh: calc(var(--sw) * 2.168);
}
.dm.dm-integrado .dm-lado, .dm.dm-integrado .dm-salir, .dm.dm-integrado .dm-canta, .dm.dm-integrado .dm-pista { font-family: var(--te-font, system-ui, sans-serif); }
.dm.dm-integrado .dm-salir { font-style: normal; }
.dm.dm-integrado.dm-ancho .dm-lado {
  width: clamp(250px, 30cqw, 380px); flex-direction: column; flex-wrap: nowrap;
  align-items: stretch; justify-content: center; gap: 14px; text-align: left;
}
.dm.dm-integrado.dm-ancho .dm-guia {
  display: block; padding: 18px 20px 16px; border-radius: 20px; color: #f3efe7;
  background: rgba(16, 13, 10, .62); border: 1px solid rgba(255, 236, 200, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.dm.dm-integrado.dm-ancho .dm-guia-t { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9fd8b4; font-weight: 800; margin-bottom: 6px; }
.dm.dm-integrado.dm-ancho .dm-guia p { margin: 0 0 12px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.dm.dm-integrado.dm-ancho .dm-guia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dm.dm-integrado.dm-ancho .dm-guia li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #d9d2c5; }
.dm.dm-integrado.dm-ancho .dm-guia li em { font-style: normal; width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; font-size: 17px; }
.dm.dm-integrado.dm-ancho .dm-guia li.bien em { background: linear-gradient(180deg, #79d2a0, #2d7a4f); }
.dm.dm-integrado.dm-ancho .dm-guia li.sil em { background: linear-gradient(180deg, #9a8f7c, #5c5346); }
.dm.dm-integrado.dm-ancho .dm-guia li.feo em { background: linear-gradient(180deg, #e8836c, #c2452f); }
.dm.dm-integrado.dm-ancho .dm-guia li b { color: #fff; font-weight: 700; }
.dm.dm-integrado.dm-ancho .dm-pista {
  order: 2; flex: 0 0 auto; font-size: 17px; font-weight: 700; color: #fff; text-align: left;
  padding: 12px 16px 12px 44px; border-radius: 16px; position: relative; min-height: 0; margin: 0;
  background: linear-gradient(180deg, rgba(79, 157, 114, .95), rgba(45, 122, 79, .95));
  box-shadow: 0 10px 24px rgba(20, 60, 38, .4);
}
.dm.dm-integrado.dm-ancho .dm-pista:first-letter { text-transform: uppercase; }
.dm.dm-integrado.dm-ancho .dm-pista:before { content: "←"; position: absolute; left: 16px; top: 50%; transform: translateY(-52%); font-size: 18px; animation: dmFlecha 1.2s ease-in-out infinite; }
@keyframes dmFlecha { 0%, 100% { transform: translate(0, -52%); } 50% { transform: translate(-5px, -52%); } }
.dm.dm-integrado.dm-ancho .dm-guia { order: 1; }
.dm.dm-integrado.dm-ancho .dm-salir { order: 4; }
.dm.dm-integrado.dm-ancho .dm-quien { order: 3; max-width: none; align-items: center; gap: 12px; }
.dm.dm-integrado.dm-ancho .dm-cara { width: 60px; height: 60px; border-radius: 16px; border-width: 3px; }
.dm.dm-integrado.dm-ancho .dm-cara .em { font-size: 34px; }
.dm.dm-integrado.dm-ancho .dm-canta { font-size: 15px; padding: 10px 14px; line-height: 1.35; }
.dm.dm-integrado.dm-ancho .dm-salir { align-self: flex-start; padding: 11px 20px; font-size: 14px; margin-top: 4px; }

/* ===== v214 · Mensajes: celular más grande y controles al alcance del pulgar =====
   Ya no se muestra la carita con el pensamiento de Ramiro (dm-quien): distraía.
   Horizontal (dm-ancho): el celular crece a todo lo alto y los tres botones van
   en el panel de la derecha, grandes, con su explicación debajo (sustituyen la
   lista de «Tu misión»). Vertical/angosto: siguen dentro del chat, más grandes. */
.dm.dm-integrado .dm-quien { display: none !important; }
.dm.dm-integrado.dm-ancho #dmJuego.on { gap: clamp(18px, 3.5cqw, 56px); padding: 6px clamp(12px, 2.5cqw, 36px); }
.dm.dm-integrado.dm-ancho .fon { --w: clamp(150px, calc((100cqh - 10px) / 2.13), min(500px, 46cqw)); }
.dm.dm-integrado.dm-ancho .dm-lado { width: clamp(240px, 32cqw, 400px); gap: 12px; }
.dm.dm-integrado.dm-ancho .dm-guia ul { display: none; }
.dm.dm-integrado.dm-ancho .dm-guia p { margin: 0; }
.dm.dm-integrado.dm-ancho .dm-guia { padding: 16px 18px; }
/* botones en el panel */
.dm.dm-integrado .dm-acc.en-lado { order: 3; display: flex; flex-direction: column; gap: 10px; }
.dm.dm-integrado .dm-acc.en-lado .dm-ab {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center;
  column-gap: 14px; row-gap: 1px; text-align: left; min-height: 74px; padding: 12px 18px;
  border: none; border-radius: 20px; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  font-family: var(--te-font, system-ui, sans-serif);
}
.dm.dm-integrado .dm-acc.en-lado .dm-ab em {
  grid-row: 1 / span 2; width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 26px; border-radius: 14px; background: rgba(255, 255, 255, .16);
}
.dm.dm-integrado .dm-acc.en-lado .dm-ab b { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.dm.dm-integrado .dm-acc.en-lado .dm-ab small { display: block; font-size: 13.5px; opacity: .88; font-weight: 500; line-height: 1.2; }
.dm.dm-integrado .dm-acc.en-lado .dm-ab i { display: none; }
.dm.dm-integrado .dm-acc.en-lado .dm-ab:hover { transform: none; }
.dm.dm-integrado .dm-acc.en-lado .dm-ab:active { transform: translateY(3px) scale(.985); }
/* apagados hasta que hay una conversación abierta (la pista verde dice qué hacer) */
.dm.dm-integrado .dm-acc.en-lado:not(.listo) .dm-ab { opacity: .32; filter: saturate(.35); }
.dm.dm-integrado.dm-ancho .dm-salir { order: 5; align-self: stretch; text-align: center; padding: 12px 20px; font-size: 15px; margin-top: 2px; }
/* pantallas bajas (teléfono acostado): sin la tarjeta de misión, todo más compacto */
@container (max-height: 560px) {
  .dm.dm-integrado.dm-ancho .dm-guia { display: none; }
  .dm.dm-integrado.dm-ancho .dm-lado { gap: 8px; }
  .dm.dm-integrado.dm-ancho .dm-pista { font-size: 14.5px; padding: 9px 12px 9px 38px; }
  .dm.dm-integrado.dm-ancho .dm-pista:before { left: 13px; }
  .dm.dm-integrado .dm-acc.en-lado { gap: 7px; }
  .dm.dm-integrado .dm-acc.en-lado .dm-ab { min-height: 56px; padding: 8px 14px; border-radius: 16px; column-gap: 11px; }
  .dm.dm-integrado .dm-acc.en-lado .dm-ab em { width: 36px; height: 36px; font-size: 20px; border-radius: 11px; }
  .dm.dm-integrado .dm-acc.en-lado .dm-ab b { font-size: 16.5px; }
  .dm.dm-integrado .dm-acc.en-lado .dm-ab small { font-size: 12px; }
  .dm.dm-integrado.dm-ancho .dm-salir { padding: 8px 14px; font-size: 13px; }
}
@container (max-height: 400px) {
  .dm.dm-integrado .dm-acc.en-lado .dm-ab small { display: none; }
  .dm.dm-integrado .dm-acc.en-lado .dm-ab { min-height: 48px; grid-template-rows: auto; }
  .dm.dm-integrado .dm-acc.en-lado .dm-ab em { grid-row: auto; }
}
/* dentro del chat (vertical/angosto): barra de respuesta más grande y fácil de tocar */
.dm.dm-integrado .dm-acc.en-chat { gap: calc(8 * var(--pt)); padding: calc(10 * var(--pt)) calc(10 * var(--pt)) calc(26 * var(--pt)); }
.dm.dm-integrado .dm-acc.en-chat .dm-ab { min-height: calc(70 * var(--pt)); touch-action: manipulation; justify-content: center; }
.dm.dm-integrado .dm-acc.en-chat .dm-ab em { font-size: calc(26 * var(--pt)); }
.dm.dm-integrado .dm-acc.en-chat .dm-ab b { font-size: calc(14 * var(--pt)); }
.dm.dm-integrado:not(.dm-ancho) .dm-lado { gap: 6px 10px; }
.dm.dm-integrado:not(.dm-ancho) .fon { --w: clamp(150px, calc((100cqh - 96px) / 2.13), min(520px, 94cqw)); }
.dm.dm-integrado:not(.dm-ancho) .dm-pista { font-size: clamp(13px, 1.6cqh, 17px); }
.dm.dm-integrado:not(.dm-ancho) .dm-salir { font-size: clamp(12px, 1.5cqh, 16px); padding: 9px 20px; }

.mg-panel {
  background: #131a24;
  color: #e8eef6;
  border: 1px solid #2a3a4d;
  border-radius: 16px;
  padding: clamp(14px, 3vmin, 26px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font-family: ui-sans-serif, "Inter", "Segoe UI", system-ui, sans-serif;
  max-width: min(620px, 96vw);
  max-height: 96vh;
  overflow: auto;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
.mg-title {
  font-size: clamp(20px, 4.4vmin, 32px);
  font-weight: 700;
  color: #ffce54;
  margin-bottom: 2px;
}
.mg-status {
  font-size: clamp(13px, 2.7vmin, 19px);
  color: #b9c6d6;
  margin: 6px 0 14px;
  min-height: 1.3em;
}

/* ---- Conecta 4 ---- */
.mg-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 7), 1fr);
  gap: clamp(4px, 1.1vmin, 9px);
  background: #1b53c0;
  padding: clamp(7px, 1.5vmin, 12px);
  border-radius: 12px;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
}
.mg-cell {
  width: clamp(34px, 9.6vmin, 74px);
  height: clamp(34px, 9.6vmin, 74px);
  border-radius: 50%;
  background: #0c1622;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .5);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: transform .08s ease, filter .12s ease;
  touch-action: manipulation;
}
.mg-cell:active { filter: brightness(1.25); }
@media (hover: hover) { .mg-cell:hover { transform: scale(1.06); } }
.mg-cell.p1 { background: radial-gradient(circle at 38% 32%, #ff8080, #d63a3a); cursor: default; }
.mg-cell.p2 { background: radial-gradient(circle at 38% 32%, #ffe27a, #e6b800); cursor: default; }

/* ---- Memoria ---- */
.mg-grid-mem {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: clamp(6px, 1.4vmin, 12px);
  width: fit-content;
  margin: 0 auto;
  max-width: 100%;
}
.mg-card {
  width: clamp(48px, 13vmin, 96px);
  height: clamp(58px, 16vmin, 118px);
  border-radius: 12px;
  border: 1px solid #33465c;
  background: linear-gradient(160deg, #24405e, #182a3d);
  color: #fff;
  font-size: clamp(22px, 6.5vmin, 46px);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: transform .1s ease, background .15s ease;
  touch-action: manipulation;
}
.mg-card:active { transform: scale(.96); }
.mg-card.up { background: #f2ead6; }
.mg-card.done { background: #2e7d5b; border-color: #2e7d5b; opacity: .85; }

/* ---- Piedra, papel o tijera ---- */
.mg-score {
  font-size: clamp(15px, 3vmin, 22px);
  font-weight: 700;
  color: #ffce54;
  margin-bottom: 12px;
}
.mg-rps-btns {
  display: flex;
  gap: clamp(8px, 2vmin, 16px);
  justify-content: center;
  flex-wrap: wrap;
}
.mg-rbtn {
  flex: 1 1 auto;
  min-width: clamp(84px, 24vmin, 150px);
  min-height: clamp(90px, 22vmin, 150px);
  border-radius: 16px;
  border: 1px solid #33465c;
  background: #1d2a3a;
  color: #e8eef6;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 4px;
  transition: transform .08s ease, background .15s ease;
  touch-action: manipulation;
}
.mg-rbtn:active { transform: scale(.95); background: #26374b; }
@media (hover: hover) { .mg-rbtn:hover { background: #26374b; } }
.mg-emoji { font-size: clamp(34px, 9vmin, 66px); line-height: 1; }
.mg-lab { font-size: clamp(12px, 2.4vmin, 16px); color: #b9c6d6; text-transform: capitalize; }

/* ---- botones comunes ---- */
.mg-actions { margin-top: clamp(12px, 2.4vmin, 20px); }
.mg-btn {
  border: 1px solid #33465c;
  background: #1d2a3a;
  color: #e8eef6;
  padding: clamp(10px, 1.8vmin, 14px) clamp(18px, 3.4vmin, 28px);
  min-height: 46px;
  border-radius: 11px;
  font-size: clamp(14px, 2.7vmin, 18px);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.mg-btn:active { background: #26374b; }
@media (hover: hover) { .mg-btn:hover { background: #26374b; } }
.mg-btn-key { background: var(--vn-lamp, #e8b04b); border-color: transparent; color: #21170a; }
.mg-btn-key:active { background: #f2c264; }
@media (hover: hover) { .mg-btn-key:hover { background: #f2c264; } }

/* ---- Barra de tino / ritmo (barra.js) ---- */
.mg-score { font-size: clamp(13px, 2.6vmin, 18px); color: #ffce54; font-weight: 600; margin-bottom: 12px; }
.mg-track {
  position: relative; height: clamp(30px, 7vmin, 46px);
  background: #0d1622; border: 1px solid #2a3a4d; border-radius: 10px;
  overflow: hidden; cursor: pointer; margin: 4px 0 4px;
}
.mg-zone {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(232,176,75,.42), rgba(232,176,75,.22));
  border-left: 2px solid rgba(232,176,75,.9); border-right: 2px solid rgba(232,176,75,.9);
}
.mg-marker {
  position: absolute; top: -4px; bottom: -4px; left: 0; width: 6px;
  transform: translateX(-50%);
  background: #ff5252; border-radius: 4px; box-shadow: 0 0 12px rgba(255,82,82,.8);
}
.mg-marker.is-hit { background: #57d38a; box-shadow: 0 0 16px rgba(87,211,138,.9); }
.mg-marker.is-miss { background: #9aa7b6; box-shadow: none; }

/* ============================================================
   Pantalla de resultados (medición de decisiones)
   ============================================================ */
.vn-results {
  position: absolute;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5vmin;
  box-sizing: border-box;
  background: radial-gradient(120% 90% at 50% 20%, rgba(22, 32, 47, .96), rgba(7, 7, 11, .99) 72%);
  font-family: var(--vn-sans, ui-sans-serif, system-ui, sans-serif);
  animation: mgIn .25s ease;
  overflow: auto;
}
/* color de acento según el tono del final */
.vn-results.tone-good    { --rc: #58d68d; --rc2: #7ee0a6; }
.vn-results.tone-bad     { --rc: #ff6b5e; --rc2: #ff9a6b; }
.vn-results.tone-neutral { --rc: #ffce54; --rc2: #ffd97a; }
.vn-res-card {
  position: relative;
  width: min(1060px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* el scroll vive DENTRO (decisiones), no en la tarjeta */
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--rc) 14%, transparent), transparent 60%),
    linear-gradient(180deg, #182130, #10151f);
  border: 1px solid #2a3a4d;
  border-top: none;
  border-radius: 18px;
  padding: clamp(20px, 3.4vmin, 32px) clamp(18px, 3.2vmin, 32px) clamp(14px, 2.6vmin, 22px);
  color: #e8eef6;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255,255,255,.02) inset;
  text-align: center;
}
/* dos columnas: métricas | decisiones */
.vn-res-cols {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(16px, 3vmin, 36px); align-items: stretch;
  overflow: hidden;
}
.vn-res-left { min-height: 0; overflow: auto; padding-right: 4px; text-align: center;
  display: flex; flex-direction: column; justify-content: center; }
.vn-res-right { min-height: 0; display: flex; flex-direction: column; text-align: left; }
.vn-res-left::-webkit-scrollbar, .vn-res-declist::-webkit-scrollbar { width: 8px; }
.vn-res-left::-webkit-scrollbar-thumb, .vn-res-declist::-webkit-scrollbar-thumb { background: #2a3a4d; border-radius: 8px; }
/* en pantallas angostas: una sola columna que hace scroll como un todo */
@media (max-width: 760px) {
  .vn-res-cols { grid-template-columns: 1fr; overflow: auto; gap: 14px; align-items: start; grid-auto-rows: min-content; }
  .vn-res-left, .vn-res-right { overflow: visible; min-height: auto; justify-content: flex-start; }
}
/* barra de acento superior de color */
.vn-res-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--rc), var(--rc2));
  box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 70%, transparent);
}
.vn-res-head {
  font-size: clamp(11px, 2vmin, 14px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9fb0c4;
  font-weight: 700;
}
.vn-res-title {
  font-size: clamp(24px, 5vmin, 40px);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 4px 0 10px;
  color: var(--rc2);
  text-shadow: 0 2px 24px color-mix(in srgb, var(--rc) 45%, transparent);
}

/* ---- aro de puntaje ---- */
.vn-res-ringwrap {
  position: relative;
  width: clamp(150px, 30vmin, 190px);
  aspect-ratio: 1;
  margin: 6px auto 8px;
}
.vn-res-glow {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 42%, transparent), transparent 70%);
  filter: blur(14px);
  z-index: 0;
}
.vn-res-ring { position: relative; z-index: 1; width: 100%; height: 100%; transform: rotate(-90deg); }
.vn-res-ring-bg { fill: none; stroke: #0c1622; stroke-width: 10; }
.vn-res-ring-fg {
  fill: none; stroke: var(--rc); stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 75%, transparent));
  transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1);
}
.vn-res-ringc {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.vn-res-score {
  font-size: clamp(38px, 9vmin, 62px);
  font-weight: 900; line-height: 1;
  color: var(--rc2);
  font-variant-numeric: tabular-nums;
}
.vn-res-badge {
  font-size: clamp(10px, 1.8vmin, 12px);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  padding: 2px 12px; border-radius: 20px;
  color: var(--rc2);
  background: color-mix(in srgb, var(--rc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
}
.vn-res-sub { font-size: clamp(11px, 2vmin, 14px); color: #9fb0c4; margin-bottom: 18px; }

.vn-res-inds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 14px;
  text-align: left;
  margin: 6px 0 4px;
}
.vn-res-ind {
  background: rgba(255, 255, 255, .03);
  border: 1px solid #223243;
  border-radius: 12px;
  padding: 11px 13px;
}
.vn-res-ind-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(12px, 2.2vmin, 15px);
  margin-bottom: 8px;
  gap: 8px;
}
.vn-res-ind-name { font-weight: 600; color: #dfe8f2; }
.vn-res-ind-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.vn-res-ind-pct { font-variant-numeric: tabular-nums; font-weight: 800; color: #eef3f9; }
.vn-res-ind-top .lvl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
}
.lvl-alta { background: rgba(88, 214, 141, .18); color: #7ee0a6; }
.lvl-media { background: rgba(255, 206, 84, .18); color: #ffce54; }
.lvl-baja { background: rgba(217, 72, 63, .2); color: #ff8a7a; }
.vn-res-bar {
  height: 9px;
  border-radius: 6px;
  background: #0c1622;
  overflow: hidden;
}
.vn-res-bar > i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #4a7fb5, #79c7d8);
  transition: width 1s cubic-bezier(.2, .8, .2, 1);
}
.vn-res-bar.lvl-fill-alta > i { background: linear-gradient(90deg, #2e9e63, #7ee0a6); }
.vn-res-bar.lvl-fill-media > i { background: linear-gradient(90deg, #c99a3a, #ffce54); }
.vn-res-bar.lvl-fill-baja > i { background: linear-gradient(90deg, #d9483f, #ff8a5b); }
.vn-res-decs {
  text-align: left;
  margin: 0;
  font-size: clamp(12px, 2.2vmin, 15px);
  display: flex; flex-direction: column; min-height: 0; height: 100%;
}
.vn-res-decs b { color: #ffce54; display: block; margin-bottom: 8px; flex: none; }
.vn-res-decs p.muted { color: #6f7d8f; margin: 4px 0; }
.vn-res-declist { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 6px; }
.vn-res-declist.is-scroll { max-height: none; }
.vn-res-more { flex: none; }
@media (max-width: 760px) {
  .vn-res-decs { height: auto; }
  .vn-res-declist { overflow: visible; max-height: none; }
}

/* resumen detallado: pregunta → respuesta + impacto */
.vn-res-dec {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; margin: 6px 0;
  background: rgba(255, 255, 255, .03);
  border: 1px solid #22303f; border-left: 3px solid #4a7fb5;
  border-radius: 8px;
}
.vn-res-dec.is-plain { opacity: .6; border-left-color: #2a3a4d; }
.vn-res-dec-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #1b2634; color: #9fb0c4; font-size: 12px; font-weight: 700;
  display: grid; place-content: center; margin-top: 1px;
}
.vn-res-dec-body { flex: 1; min-width: 0; }
.vn-res-dec-q { color: #8494a6; font-size: .86em; margin-bottom: 2px; }
.vn-res-dec-a { color: #eef3f9; font-weight: 600; }
.vn-res-dec-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.vn-res-tag {
  font-size: .8em; padding: 1px 8px; border-radius: 10px;
  font-weight: 600; letter-spacing: .01em;
}
.vn-res-tag.up { background: rgba(88, 214, 141, .16); color: #7ee0a6; }
.vn-res-tag.down { background: rgba(217, 72, 63, .18); color: #ff8a7a; }
.vn-res-more {
  margin-top: 8px;
  background: transparent;
  border: 1px solid #2a3a4d;
  color: #9fb0c4;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: clamp(12px, 2vmin, 14px);
  cursor: pointer;
}
.vn-res-more:hover { color: #dbe3ee; border-color: #3a4d63; }
.vn-res-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(12px, 2vmin, 18px);
  padding-top: clamp(12px, 2vmin, 18px);
  border-top: 1px solid #223243;
}
.vn-res-actions .vn-menu-btn {
  min-width: min(360px, 82%);
  font-weight: 800;
  font-size: clamp(17px, 2.7vmin, 22px);
  letter-spacing: .01em;
  padding: 17px 44px;
  border-radius: 12px;
}
.vn-res-actions .vn-menu-btn.is-key {
  background: linear-gradient(180deg, var(--rc2), var(--rc));
  border: none;
  color: #0c1119;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--rc) 45%, transparent);
}
.vn-res-actions .vn-menu-btn.is-key:hover {
  filter: brightness(1.06);
}