/* ============================================================================
   VISION ENGLISH — ESCENARIO DE JUEGO
   ----------------------------------------------------------------------------
   Antes esto era un modal centrado: se sentía una tarjeta con botones. Ahora
   cada juego toma la pantalla completa y trae su propia identidad de color,
   fondo y ritmo, para que entrar a Contrarreloj no se sienta igual que entrar
   a Memoria.

   Reparto: el hub (.jx-*) y el kit visual son de Codex en juegos.css. Aquí
   viven la estructura y los valores por defecto, para que el motor nunca se
   quede sin estilo si el kit todavía no llegó. Codex sobreescribe los tokens
   --jx-acento / --jx-acento-2 / --jx-fondo / --jx-brillo y manda su versión.
   ========================================================================= */

/* ── Tokens por juego ──────────────────────────────────────────────────────
   Un solo lugar donde vive la identidad de cada uno. Todo lo demás los lee. */

.jxp-escenario {
  --jx-acento:   hsl(266, 85%, 62%);
  --jx-acento-2: hsl(286, 80%, 66%);
  --jx-fondo:    hsl(258, 30%, 98.5%);
  --jx-brillo:   hsla(266, 85%, 62%, .34);
  --jx-tinta:    hsl(258, 40%, 16%);
  --jx-suave:    hsla(266, 85%, 62%, .10);
  --jx-vidrio:   rgba(255, 255, 255, .72);
  --jx-borde:    rgba(255, 255, 255, .9);
}

.jxp-escenario[data-juego="contrarreloj"] {
  --jx-acento: hsl(206, 96%, 52%); --jx-acento-2: hsl(190, 92%, 52%);
  --jx-fondo: hsl(205, 34%, 98.5%);  --jx-brillo: hsla(206, 96%, 52%, .36);
  --jx-tinta: hsl(212, 60%, 15%);  --jx-suave: hsla(206, 96%, 52%, .10);
}
.jxp-escenario[data-juego="pronuncia"] {
  --jx-acento: hsl(336, 84%, 56%); --jx-acento-2: hsl(354, 88%, 62%);
  --jx-fondo: hsl(340, 34%, 98.5%);  --jx-brillo: hsla(336, 84%, 56%, .34);
  --jx-tinta: hsl(338, 55%, 17%);  --jx-suave: hsla(336, 84%, 56%, .10);
}
.jxp-escenario[data-juego="dictado"] {
  --jx-acento: hsl(32, 94%, 50%);  --jx-acento-2: hsl(44, 96%, 54%);
  --jx-fondo: hsl(38, 42%, 98.5%);   --jx-brillo: hsla(32, 94%, 50%, .34);
  --jx-tinta: hsl(28, 58%, 16%);   --jx-suave: hsla(32, 94%, 50%, .11);
}
.jxp-escenario[data-juego="memoria"] {
  --jx-acento: hsl(158, 72%, 40%); --jx-acento-2: hsl(180, 70%, 44%);
  --jx-fondo: hsl(160, 30%, 98.5%);  --jx-brillo: hsla(158, 72%, 40%, .32);
  --jx-tinta: hsl(168, 52%, 14%);  --jx-suave: hsla(158, 72%, 40%, .10);
}
.jxp-escenario[data-juego="cadena"] {
  --jx-acento: hsl(268, 82%, 60%); --jx-acento-2: hsl(292, 78%, 62%);
  --jx-fondo: hsl(268, 32%, 98.5%);  --jx-brillo: hsla(268, 82%, 60%, .34);
  --jx-tinta: hsl(266, 52%, 16%);  --jx-suave: hsla(268, 82%, 60%, .10);
}
.jxp-escenario[data-juego="duelo"] {
  --jx-acento: hsl(348, 88%, 56%); --jx-acento-2: hsl(220, 90%, 58%);
  --jx-fondo: hsl(350, 32%, 98.5%);  --jx-brillo: hsla(348, 88%, 56%, .34);
  --jx-tinta: hsl(346, 55%, 16%);  --jx-suave: hsla(348, 88%, 56%, .10);
}

/* En oscuro el color no se apaga: cambia de papel a vidrio iluminado. */
body.dark .jxp-opcion { background: rgba(255, 255, 255, .06); }

body.dark .jxp-escenario {
  --jx-fondo:  hsl(258, 34%, 9%);
  --jx-tinta:  hsl(258, 30%, 96%);
  --jx-vidrio: rgba(255, 255, 255, .055);
  --jx-borde:  rgba(255, 255, 255, .12);
  --jx-suave:  color-mix(in srgb, var(--jx-acento) 18%, transparent);
}
body.dark .jxp-escenario[data-juego="contrarreloj"] { --jx-fondo: hsl(212, 55%, 8%); }
body.dark .jxp-escenario[data-juego="pronuncia"]    { --jx-fondo: hsl(336, 42%, 9%); }
body.dark .jxp-escenario[data-juego="dictado"]      { --jx-fondo: hsl(28, 45%, 8%); }
body.dark .jxp-escenario[data-juego="memoria"]      { --jx-fondo: hsl(168, 42%, 7%); }
body.dark .jxp-escenario[data-juego="cadena"]       { --jx-fondo: hsl(266, 42%, 9%); }
body.dark .jxp-escenario[data-juego="duelo"]        { --jx-fondo: hsl(346, 40%, 9%); }

/* ── La capa y el escenario ───────────────────────────────────────────── */

.jxp-capa {
  position: fixed;
  inset: 0;
  z-index: 9000;
  animation: jxpAparecer .26s ease;
}
.jxp-capa[hidden] { display: none; }
body.jxp-abierto { overflow: hidden; }

@keyframes jxpAparecer { from { opacity: 0; } to { opacity: 1; } }

.jxp-escenario {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--jx-fondo);
  color: var(--jx-tinta);
  animation: jxpEntrar .38s cubic-bezier(.2, .9, .25, 1);
}

@keyframes jxpEntrar {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: none; }
}

/* ── Atmósfera: el fondo vivo de cada juego ───────────────────────────── */

.jxp-atmosfera {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.jxp-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .26;
}
.jxp-halo-1 {
  width: 46vw; height: 46vw;
  top: -14vw; right: -10vw;
  background: var(--jx-acento);
  animation: jxpFlotar1 17s ease-in-out infinite;
}
.jxp-halo-2 {
  width: 38vw; height: 38vw;
  bottom: -13vw; left: -9vw;
  background: var(--jx-acento-2);
  animation: jxpFlotar2 21s ease-in-out infinite;
}
body.dark .jxp-halo { opacity: .34; }

@keyframes jxpFlotar1 {
  0%, 100% { transform: none; }
  50% { transform: translate(-4vw, 5vw) scale(1.1); }
}
@keyframes jxpFlotar2 {
  0%, 100% { transform: none; }
  50% { transform: translate(5vw, -4vw) scale(1.13); }
}

/* Rejilla tenue: da profundidad sin competir con el contenido. */
.jxp-rejilla {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(var(--jx-suave) 1px, transparent 1px),
    linear-gradient(90deg, var(--jx-suave) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}

/* ── HUD superior ─────────────────────────────────────────────────────── */

.jxp-hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(18px, 4vw, 44px) 12px;
}

.jxp-kicker {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jx-acento);
}

.jxp-titulo {
  margin: 3px 0 0;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}

.jxp-hud-derecha { display: flex; align-items: center; gap: 14px; }

.jxp-hud-marca {
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--jx-vidrio);
  border: 1px solid var(--jx-borde);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: .92rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--jx-acento);
}
.jxp-hud-marca:empty { display: none; }

.jxp-hud-salir {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--jx-borde);
  border-radius: 50%;
  background: var(--jx-vidrio);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--jx-tinta);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background .16s, transform .1s, border-color .16s;
}
.jxp-hud-salir:hover { background: var(--jx-suave); border-color: var(--jx-acento); }
.jxp-hud-salir:active { transform: scale(.92); }

/* Reloj: la barra que se vacía o se llena según el juego. */
.jxp-hud-reloj {
  position: relative;
  z-index: 2;
  height: 6px;
  margin: 0 clamp(18px, 4vw, 44px);
  border-radius: 999px;
  background: var(--jx-suave);
  overflow: hidden;
}

.jxp-hud-reloj-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jx-acento), var(--jx-acento-2));
  box-shadow: 0 0 16px -1px var(--jx-brillo);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* ── Arena: donde se juega ────────────────────────────────────────────── */

.jxp-arena {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding: clamp(20px, 4vh, 48px) clamp(18px, 4vw, 44px) clamp(26px, 5vh, 56px);
}

/* El contenido no se estira a lo ancho de un monitor grande. */
.jxp-escena, .jxp-final {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.jxp-escena { animation: jxpEscena .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes jxpEscena {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.jxp-cargando {
  text-align: center;
  font-weight: 800;
  opacity: .6;
}

.jxp-instruccion {
  display: block;
  margin-bottom: 14px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jx-acento);
}

.jxp-pregunta {
  margin: 0 0 26px;
  font-size: clamp(1.3rem, 3.2vw, 1.72rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.022em;
}

.jxp-nota { margin-top: 16px; font-size: .85rem; opacity: .62; }

/* ── Opciones ─────────────────────────────────────────────────────────── */

.jxp-opciones { display: grid; gap: 11px; }

.jxp-opcion {
  position: relative;
  width: 100%;
  padding: 17px 21px;
  border: 1.5px solid var(--jx-borde);
  border-radius: 17px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 10px rgba(20, 24, 45, .06);
  color: inherit;
  font: inherit;
  font-size: 1.04rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}

.jxp-opcion:hover:not(:disabled) {
  border-color: var(--jx-acento);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px var(--jx-brillo);
}
.jxp-opcion:active:not(:disabled) { transform: translateY(0) scale(.995); }
.jxp-opcion:disabled { cursor: default; }

.jxp-opcion.bien {
  border-color: hsl(150, 68%, 44%);
  background: hsla(150, 68%, 44%, .16);
  box-shadow: 0 0 0 3px hsla(150, 68%, 44%, .2);
}
.jxp-opcion.mal {
  border-color: hsl(352, 82%, 58%);
  background: hsla(352, 82%, 58%, .14);
  animation: jxpNegar .34s ease;
}
@keyframes jxpNegar {
  0%, 100% { transform: none; }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* ── Eco de respuesta ─────────────────────────────────────────────────── */

.jxp-eco {
  margin: 20px 0 0;
  min-height: 24px;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.5;
}
.jxp-eco.es-bien { color: hsl(150, 72%, 34%); }
.jxp-eco.es-mal { color: hsl(352, 74%, 48%); }
body.dark .jxp-eco.es-bien { color: hsl(150, 72%, 66%); }
body.dark .jxp-eco.es-mal { color: hsl(352, 90%, 74%); }

/* ── Voz y dictado ───────────────────────────────────────────────────── */

.jxp-frase-en {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 4.4vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.16;
}
.jxp-frase-es { margin: 0 0 24px; opacity: .6; font-size: 1rem; }

.jxp-voz { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 18px; }

.jxp-btn-audio, .jxp-mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 1.5px solid var(--jx-borde);
  border-radius: 15px;
  background: var(--jx-vidrio);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--jx-acento);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.jxp-btn-audio:hover, .jxp-mic:hover { border-color: var(--jx-acento); background: var(--jx-suave); }
.jxp-btn-audio:active, .jxp-mic:active { transform: scale(.97); }
.jxp-btn-audio.grande { font-size: 1.08rem; padding: 17px 30px; }

.jxp-mic.escuchando {
  border-color: hsl(352, 82%, 58%);
  background: hsla(352, 82%, 58%, .14);
  color: hsl(352, 76%, 48%);
  animation: jxpLatido 1.15s ease-in-out infinite;
}
@keyframes jxpLatido {
  0%, 100% { box-shadow: 0 0 0 0 hsla(352, 82%, 58%, .5); }
  50% { box-shadow: 0 0 0 15px hsla(352, 82%, 58%, 0); }
}

.jxp-input {
  width: 100%;
  padding: 17px 20px;
  border: 1.5px solid var(--jx-borde);
  border-radius: 15px;
  background: var(--jx-vidrio);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
}
.jxp-input:focus {
  outline: none;
  border-color: var(--jx-acento);
  box-shadow: 0 0 0 4px var(--jx-suave);
}

.jxp-enviar {
  margin-top: 14px;
  padding: 15px 28px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(140deg, var(--jx-acento), var(--jx-acento-2));
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 22px -6px var(--jx-brillo);
  transition: transform .1s, box-shadow .16s, filter .16s;
}
.jxp-enviar:hover { box-shadow: 0 12px 30px -6px var(--jx-brillo); filter: brightness(1.06); }
.jxp-enviar:active { transform: translateY(1px) scale(.99); }
.jxp-enviar:disabled { opacity: .5; cursor: default; }

.jxp-secundario {
  margin-top: 14px;
  padding: 15px 28px;
  border: 1.5px solid var(--jx-borde);
  border-radius: 15px;
  background: var(--jx-vidrio);
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.jxp-secundario:hover { background: var(--jx-suave); border-color: var(--jx-acento); }

/* ── Memoria ──────────────────────────────────────────────────────────── */

.jxp-memoria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  gap: 12px;
  perspective: 1000px;
}

.jxp-ficha {
  position: relative;
  min-height: clamp(78px, 11vh, 104px);
  padding: 10px 8px;
  border: none;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--jx-acento), var(--jx-acento-2));
  color: transparent;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.28;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 14px -4px var(--jx-brillo), inset 0 1px 0 rgba(255, 255, 255, .3);
  transform-style: preserve-3d;
  transition: transform .34s cubic-bezier(.3, .9, .3, 1.2), background .25s, box-shadow .25s, opacity .3s;
}
.jxp-ficha span {
  opacity: 0;
  word-break: break-word;
  transition: opacity .16s .12s;
}
.jxp-ficha::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 900;
  color: rgba(255, 255, 255, .9);
  transition: opacity .14s;
}
.jxp-ficha:hover:not(.abierta):not(.hecha) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 26px -6px var(--jx-brillo);
}

/* ── Ficha destapada ───────────────────────────────────────────────────
   Aquí se cruzaron dos implementaciones del giro 3D: la del kit visual gira
   la ficha y contragira el texto con `backface-visibility: hidden`, y esta
   hoja hacía lo suyo. Combinadas, la ficha quedaba BLANCA sobre la tarjeta
   blanca y el texto invisible: destapabas y no se veía nada.

   Se resuelve renunciando al giro y quedándose con lo que importa: que la
   palabra se lea. El selector lleva `.jxp-escenario` delante solo para tener
   la especificidad necesaria y no recurrir a !important, que arrastraría a
   una guerra de estilos con el kit. */

.jxp-escenario .jxp-ficha.abierta,
.jxp-escenario .jxp-ficha.hecha {
  transform: none;
  animation: jxpDestapar .26s cubic-bezier(.34, 1.4, .64, 1);
}

.jxp-escenario .jxp-ficha.abierta span,
.jxp-escenario .jxp-ficha.hecha span {
  opacity: 1;
  transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.jxp-escenario .jxp-ficha.abierta::after,
.jxp-escenario .jxp-ficha.hecha::after { opacity: 0; }

@keyframes jxpDestapar {
  from { transform: scale(.9); }
  to { transform: none; }
}

/* Fondo claro con borde de acento: se distingue de la tarjeta blanca. */
.jxp-escenario .jxp-ficha.abierta {
  background: color-mix(in srgb, var(--jx-acento) 9%, #fff);
  border: 2px solid var(--jx-acento);
  color: hsl(222, 45%, 18%);
  box-shadow: 0 6px 18px -6px var(--jx-brillo);
}

.jxp-escenario .jxp-ficha.falla {
  background: hsla(352, 84%, 58%, .16);
  border-color: hsl(352, 84%, 56%);
  color: hsl(352, 70%, 34%);
}

.jxp-escenario .jxp-ficha.hecha {
  background: hsla(150, 68%, 46%, .2);
  border: 2px solid hsl(150, 66%, 42%);
  color: hsl(154, 86%, 17%);
  cursor: default;
  /* Bajar la opacidad de toda la ficha apagaba también la palabra, que es
     justo lo que el alumno necesita leer. La ficha resuelta se distingue por
     el verde y el borde, no por estar desvanecida. */
  opacity: 1;
  box-shadow: none;
}

body.dark .jxp-escenario .jxp-ficha.abierta {
  background: color-mix(in srgb, var(--jx-acento) 26%, hsl(258, 34%, 15%));
  color: hsl(258, 30%, 97%);
}
body.dark .jxp-escenario .jxp-ficha.falla { color: hsl(352, 92%, 80%); }
body.dark .jxp-escenario .jxp-ficha.hecha { color: hsl(150, 74%, 72%); }

/* ── Duelo ────────────────────────────────────────────────────────────── */

.jxp-duelo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--jx-vidrio);
  border: 1px solid var(--jx-borde);
  font-weight: 900;
  font-size: 1.05rem;
}
.jxp-vs-yo { color: hsl(220, 90%, 56%); }
.jxp-vs-ollie { color: hsl(348, 88%, 56%); }
.jxp-vs-sep { font-size: .68rem; opacity: .5; letter-spacing: .16em; }

/* ── Pantalla final ───────────────────────────────────────────────────── */

.jxp-final { text-align: center; animation: jxpEscena .34s ease; }

.jxp-final-icono {
  font-size: clamp(3.6rem, 11vw, 5.4rem);
  line-height: 1;
  animation: jxpRebote .58s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes jxpRebote {
  from { transform: scale(.3) rotate(-14deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.jxp-final-titulo {
  margin: 18px 0 8px;
  font-size: clamp(1.6rem, 4.6vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -.03em;
}
.jxp-final-detalle { margin: 0 0 24px; font-weight: 700; opacity: .62; }

.jxp-final-xp {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 999px;
  background: linear-gradient(140deg, hsl(44, 96%, 56%), hsl(30, 94%, 52%));
  color: hsl(28, 70%, 14%);
  font-size: 1.22rem;
  font-weight: 900;
  box-shadow: 0 10px 28px -8px hsla(38, 95%, 50%, .7);
  animation: jxpPremio .5s .16s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes jxpPremio {
  from { transform: scale(.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Sin premio no hay medalla dorada: celebrar un cero se siente burla. */
.jxp-final-xp.jxp-final-sinxp {
  background: var(--jx-vidrio);
  border: 1.5px solid var(--jx-borde);
  color: var(--jx-tinta);
  opacity: .62;
  font-size: 1rem;
  box-shadow: none;
}

.jxp-final-botones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
.jxp-final-botones button { margin-top: 0; }

/* ── Pantallas chicas ─────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .jxp-hud { padding: 16px 18px 10px; }
  .jxp-kicker { font-size: .6rem; letter-spacing: .08em; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
  .jxp-titulo { font-size: 1.3rem; }
  .jxp-hud-marca { padding: 7px 13px; font-size: .82rem; }
  .jxp-arena { padding-top: 20px; }
  .jxp-memoria { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .jxp-ficha { min-height: 68px; font-size: .7rem; padding: 6px 4px; }
  .jxp-ficha::after { font-size: 1.3rem; }
  .jxp-opcion { padding: 15px 17px; font-size: .98rem; }
  .jxp-final-botones { flex-direction: column; }
  .jxp-halo { filter: blur(64px); }
}

@media (prefers-reduced-motion: reduce) {
  .jxp-capa, .jxp-escenario, .jxp-escena, .jxp-final,
  .jxp-final-icono, .jxp-final-xp, .jxp-halo,
  .jxp-opcion.mal, .jxp-mic.escuchando { animation: none; }
  .jxp-ficha, .jxp-opcion { transition: opacity .2s, background .2s, border-color .2s; }
  .jxp-escenario .jxp-ficha.abierta,
  .jxp-escenario .jxp-ficha.hecha { animation: none; }
}