/* ═══════════════════════════════════════════════════════════════════
   ESCENARIO VIVO — la cara de juego de los ejercicios (prototipo, 26-sep-2026)
   ═══════════════════════════════════════════════════════════════════
   Pedro, mirando Synthesis Tutor: «darle a los ejercicios un toque de
   gamificado, que sea dinámico y llamativo». El ejercicio deja de ser una hoja
   blanca sobre gris y pasa a jugarse en un ESCENARIO del mundo del peque:
   cielo de noche con estrellas (espacio), burbujas (mar), luciérnagas (dinos,
   mariposas)… y encima, la carta del reto, blanca y bien legible.

   Reglas que no son de estilo:
   · Todo cuelga de html.pm-vivo (lo pone vivo.js); sin esa clase esta hoja no
     hace nada, y ?vivo=0 deja la app exactamente como estaba.
   · Nunca hay rojo (diferenciador 4): lo que no está bien tiembla y se apaga un
     poco, en lila; lo que está bien se ilumina en verde y suelta chispas.
   · La carta sigue siendo BLANCA: dentro viven 35 juegos con sus colores y
     ninguno se ha diseñado para fondo oscuro. Lo oscuro es solo el escenario.
   · Nada de lo de aquí cambia tamaños ni posiciones dentro del ejercicio
     (robótica, trazos y mapas miden su dibujo): bordes, fondos, sombras y
     animaciones de entrada con desplazamiento, nunca con escala.
   · diseno.css, mundos.css y materias-visuales.css son de Codex: no se tocan;
     esta hoja va detrás y gana por especificidad (html.pm-vivo delante).
*/

/* ─── Paleta del escenario por mundo ─────────────────────────────────── */
html.pm-vivo{
  --v-c1:#070b24; --v-c2:#16195a;            /* cielo: arriba y abajo */
  --v-g1:#4c3bd1; --v-g2:#1e6fb8;            /* los dos resplandores */
  --v-p:#ffffff;                             /* partículas */
  --v-asig:#6c5ce7;                          /* el color de la asignatura (carta) */
  --v-oro1:#ffe066; --v-oro2:#fcc419; --v-naranja:#fa9a3d;
  --v-verde:#2fcf74; --v-verde-osc:#1c9a52;
  --v-tinta:#221c4f;
}
html.pm-vivo[data-vivo-mundo="espacio"]{--v-c1:#060a22; --v-c2:#151a58; --v-g1:#4c3bd1; --v-g2:#1d75c2; --v-p:#ffffff;}
html.pm-vivo[data-vivo-mundo="mar"]{--v-c1:#031a2c; --v-c2:#07435f; --v-g1:#0f8aa6; --v-g2:#1b5bb5; --v-p:#bff2ff;}
html.pm-vivo[data-vivo-mundo="dinos"]{--v-c1:#06140d; --v-c2:#143a26; --v-g1:#2f7a45; --v-g2:#8a6d1c; --v-p:#e6fcb0;}
html.pm-vivo[data-vivo-mundo="princesas"]{--v-c1:#170a2e; --v-c2:#3d1a61; --v-g1:#a83e96; --v-g2:#5a33a8; --v-p:#ffd6f0;}
html.pm-vivo[data-vivo-mundo="unicornios"]{--v-c1:#170d38; --v-c2:#3c1a66; --v-g1:#c04fa6; --v-g2:#3585d6; --v-p:#fff0ff;}
html.pm-vivo[data-vivo-mundo="vaqueros"]{--v-c1:#1a0d08; --v-c2:#4a2410; --v-g1:#b8612a; --v-g2:#7a2e1c; --v-p:#ffe8c2;}
html.pm-vivo[data-vivo-mundo="mariposas"]{--v-c1:#0a1b14; --v-c2:#1f3d2b; --v-g1:#5f8a2e; --v-g2:#8a55ad; --v-p:#f4ffc9;}
html.pm-vivo[data-vivo-mundo="coches"]{--v-c1:#071c2c; --v-c2:#154964; --v-g1:#248eac; --v-g2:#c78335; --v-p:#e1f6ff;}

/* el color de la carta sigue a la asignatura, como en el boletín */
html.pm-vivo[data-vivo-asig="mat"]{--v-asig:#6c5ce7;}
html.pm-vivo[data-vivo-asig="len"]{--v-asig:#ff7a45;}
html.pm-vivo[data-vivo-asig="cmed"],
html.pm-vivo[data-vivo-asig="mun"]{--v-asig:#20b26b;}
html.pm-vivo[data-vivo-asig="ing"]{--v-asig:#2f9bff;}
html.pm-vivo[data-vivo-asig="art"],
html.pm-vivo[data-vivo-asig="mus"]{--v-asig:#ff5fa2;}
html.pm-vivo[data-vivo-asig="rob"]{--v-asig:#8b5cf6;}
html.pm-vivo[data-vivo-asig="mir"]{--v-asig:#f59f00;}

/* ─── El escenario (detrás de todo, solo en el ejercicio y el resumen) ─── */
#vivo-escenario{position:fixed; inset:0; z-index:0; display:none; overflow:hidden; pointer-events:none;
  background:linear-gradient(180deg,var(--v-c1) 0%,var(--v-c2) 100%);}
html.pm-vivo.vivo-juego #vivo-escenario{display:block;}
/* en iOS, al estirar la página asoma el body: que sea del mismo cielo */
html.pm-vivo.vivo-juego[data-motor] body.pm-app:has(#s-juego){background:var(--v-c1)!important;}
html.pm-vivo.vivo-juego .pm-app>.deco{display:none;}

.vivo-brillo{position:absolute; inset:-25%;
  background:radial-gradient(34% 30% at 22% 18%,var(--v-g1),transparent 72%),
             radial-gradient(38% 34% at 82% 86%,var(--v-g2),transparent 72%);
  opacity:.55; animation:vivoRespira 11s ease-in-out infinite alternate;}
@keyframes vivoRespira{from{transform:translate3d(0,0,0) scale(1); opacity:.42}
  to{transform:translate3d(3%,-2%,0) scale(1.08); opacity:.68}}

/* el suelo de rejilla del espacio: el guiño a la pizarra de Synthesis */
.vivo-suelo{display:none; position:absolute; left:-60%; right:-60%; bottom:-6%; height:48%;
  background-image:linear-gradient(rgba(140,160,255,.22) 1.5px,transparent 1.5px),
                   linear-gradient(90deg,rgba(140,160,255,.22) 1.5px,transparent 1.5px);
  background-size:64px 64px; transform:perspective(420px) rotateX(64deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 85%); mask-image:linear-gradient(to top,#000 5%,transparent 85%);
  animation:vivoAvanza 5s linear infinite;}
html.pm-vivo[data-vivo-mundo="espacio"] .vivo-suelo{display:block;}
@keyframes vivoAvanza{from{background-position:0 0} to{background-position:0 64px}}

.vivo-particulas{position:absolute; inset:0;}
.vivo-p{position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%;
  background:var(--v-p); box-shadow:0 0 7px var(--v-p); opacity:.2;
  animation:vivoTitila var(--d) ease-in-out var(--dly) infinite;}
@keyframes vivoTitila{0%,100%{opacity:.12; transform:scale(.6)} 50%{opacity:.95; transform:scale(1)}}
/* el mar no tiene estrellas: tiene burbujas que suben */
html.pm-vivo[data-vivo-mundo="mar"] .vivo-p{top:auto; bottom:-40px; width:calc(var(--s) * 3.4); height:calc(var(--s) * 3.4);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.7) 0 16%,transparent 18%);
  border:1.5px solid rgba(190,242,255,.55); box-shadow:none; opacity:.7;
  animation:vivoBurbuja calc(var(--d) * 2.6) linear var(--dly) infinite;}
@keyframes vivoBurbuja{from{transform:translate3d(0,0,0)} 50%{transform:translate3d(var(--dx),-55vh,0)}
  to{transform:translate3d(0,-112vh,0)}}
/* y en el valle y el jardín, luciérnagas que van y vienen */
html.pm-vivo:is([data-vivo-mundo="dinos"],[data-vivo-mundo="mariposas"]) .vivo-p{
  box-shadow:0 0 10px 3px var(--v-p); animation:vivoLuciernaga calc(var(--d) * 1.8) ease-in-out var(--dly) infinite;}
@keyframes vivoLuciernaga{0%,100%{transform:translate3d(0,0,0); opacity:.1}
  30%{opacity:.95} 50%{transform:translate3d(var(--dx),-26px,0); opacity:.6}
  70%{opacity:.9} 85%{transform:translate3d(calc(var(--dx) * -.5),12px,0)}}

.vivo-decos{position:absolute; inset:0;}
.vivo-deco{position:absolute; left:var(--x); top:var(--y); font-size:var(--t); line-height:1; opacity:.13;
  transform:rotate(var(--r)); animation:vivoFlota var(--d) ease-in-out var(--dly) infinite;}
@keyframes vivoFlota{0%,100%{transform:translateY(0) rotate(var(--r))} 50%{transform:translateY(-22px) rotate(calc(var(--r) * -1))}}

/* ─── El marcador: salir · camino de la misión · pista · gemas ────────── */
html.pm-vivo .pm-app #s-juego>.topbar{position:relative; z-index:3; flex-wrap:nowrap; gap:12px; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
html.pm-vivo .pm-app #s-juego .topbar .icono-btn{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.25);}
html.pm-vivo .pm-app #s-juego .topbar .icono-btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.25);}
html.pm-vivo .pm-app #s-juego .topbar>.chip:not(#btn-pista){background:rgba(8,6,40,.45); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-family:"Fredoka",system-ui,sans-serif; font-size:1.15rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
html.pm-vivo .pm-app #s-juego .topbar .chip .num,
html.pm-vivo .pm-app #s-juego .topbar .estrellas-num2{color:var(--v-oro1); text-shadow:0 0 10px rgba(255,224,102,.6);}
html.pm-vivo .pm-app #s-juego #btn-pista{background:linear-gradient(180deg,#fff08a,var(--v-oro2)); color:#4a3200;
  border:0; box-shadow:0 4px 0 #c99400, 0 0 18px rgba(252,196,25,.45); font-weight:800;}
html.pm-vivo .pm-app #s-juego #btn-pista:active{transform:translateY(3px); box-shadow:0 1px 0 #c99400;}
html.pm-vivo .vivo-bump{animation:vivoBump .5s cubic-bezier(.2,1.8,.4,1);}
@keyframes vivoBump{0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)}}

html.pm-vivo .pm-app #s-juego .progreso{flex:1 1 auto; min-width:0; gap:10px; color:#fff;}
html.pm-vivo .pm-app #s-juego #prog-txt{font-family:"Fredoka",system-ui,sans-serif; font-size:1rem; font-weight:600;
  color:rgba(255,255,255,.85); min-width:2.4em; text-align:right; white-space:nowrap;}
.vivo-pista{position:relative; flex:1 1 auto; min-width:90px; height:40px; display:flex; align-items:center; padding:0 30px 0 12px;}
html.pm-vivo .pm-app #s-juego .vivo-pista .pbar{width:100%; height:14px; border-radius:999px; overflow:hidden;
  background:rgba(4,2,30,.55); box-shadow:inset 0 2px 4px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.12);}
html.pm-vivo .pm-app #s-juego .vivo-pista .pbar>div{position:relative; border-radius:999px;
  background:linear-gradient(90deg,var(--v-oro1),var(--v-oro2) 55%,var(--v-naranja));
  box-shadow:0 0 14px rgba(252,196,25,.75); transition:width .7s cubic-bezier(.3,1.35,.5,1);}
html.pm-vivo .pm-app #s-juego .vivo-pista .pbar>div::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); transform:translateX(-100%);
  animation:vivoReflejo 2.8s ease-in-out infinite;}
@keyframes vivoReflejo{0%,40%{transform:translateX(-100%)} 100%{transform:translateX(100%)}}
.vivo-carril{position:absolute; left:12px; right:30px; top:0; bottom:0; pointer-events:none;}
.vivo-nodos{position:absolute; inset:0;}
.vivo-nodo{position:absolute; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:rgba(255,255,255,.35); box-shadow:0 0 0 2px rgba(10,8,50,.55);}
.vivo-nodo.hecho{width:18px; height:18px; margin:-9px 0 0 -9px; background:none; box-shadow:none;}
.vivo-nodo.hecho::before{content:"★"; position:absolute; inset:0; display:grid; place-items:center; font-size:18px; line-height:1;
  color:#fff3a3; text-shadow:0 0 8px rgba(255,214,0,.9), 0 1px 0 #b07b00;}
.vivo-nodo.recien{animation:vivoEstrella .7s cubic-bezier(.2,1.8,.4,1);}
@keyframes vivoEstrella{0%{transform:scale(0) rotate(-90deg)} 60%{transform:scale(1.7) rotate(15deg)} 100%{transform:scale(1) rotate(0)}}
.vivo-nodo.siguiente{background:#fff; box-shadow:0 0 0 3px rgba(255,224,102,.55), 0 0 12px rgba(255,224,102,.9);
  animation:vivoLatidoNodo 1.3s ease-in-out infinite;}
@keyframes vivoLatidoNodo{0%,100%{transform:scale(1)} 50%{transform:scale(1.35)}}
.vivo-pista.sin-nodos .vivo-nodos{display:none;}
.vivo-jinete{position:absolute; top:50%; left:0; font-size:24px; line-height:1; transform:translate(-50%,-78%);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.55)); transition:left .7s cubic-bezier(.3,1.35,.5,1);}
.vivo-jinete::after{content:""; position:absolute; left:50%; bottom:-6px; width:16px; height:4px; margin-left:-8px;
  border-radius:50%; background:rgba(0,0,0,.35);}
.vivo-meta{position:absolute; right:0; top:50%; transform:translateY(-54%); font-size:24px; line-height:1;
  filter:drop-shadow(0 0 8px rgba(255,214,0,.55));}
.vivo-meta.abierta{animation:vivoMeta .8s cubic-bezier(.2,1.8,.4,1) both;}
@keyframes vivoMeta{0%{transform:translateY(-54%) scale(1)} 40%{transform:translateY(-70%) scale(1.6) rotate(-12deg)}
  100%{transform:translateY(-54%) scale(1.15)}}
html.pm-vivo:not(.vivo-quieto) .vivo-jinete{animation:vivoTrote 1.5s ease-in-out infinite;}
@keyframes vivoTrote{0%,100%{transform:translate(-50%,-78%)} 50%{transform:translate(-50%,-96%)}}

/* móvil: el camino baja a su propia fila, a lo ancho */
@media (max-width:560px){
  html.pm-vivo .pm-app #s-juego>.topbar{flex-wrap:wrap; row-gap:4px; padding:8px 10px;}
  html.pm-vivo .pm-app #s-juego .progreso{order:5; flex:1 1 100%;}
  html.pm-vivo .pm-app #s-juego>.topbar>.chip:last-child{margin-left:auto;}
}

/* ─── La carta del reto ──────────────────────────────────────────────── */
html.pm-vivo .pm-app #zona-ejercicio{position:relative; z-index:2; background:#fff; border:0; border-radius:30px;
  padding:24px 18px 26px; color:var(--v-tinta);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v-asig) 60%,#fff),
             0 0 0 9px color-mix(in srgb,var(--v-asig) 18%,transparent),
             0 30px 60px -12px rgba(0,0,0,.6),
             0 0 70px -8px color-mix(in srgb,var(--v-asig) 55%,transparent);}
/* el mazo: las cartas que quedan asoman por debajo (dos, una o ninguna) */
html.pm-vivo .pm-app #zona-ejercicio.vivo-mazo-2{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v-asig) 60%,#fff),
             0 0 0 9px color-mix(in srgb,var(--v-asig) 18%,transparent),
             0 17px 0 -6px rgba(255,255,255,.62), 0 30px 0 -12px rgba(255,255,255,.3),
             0 40px 60px -12px rgba(0,0,0,.6),
             0 0 70px -8px color-mix(in srgb,var(--v-asig) 55%,transparent);}
html.pm-vivo .pm-app #zona-ejercicio.vivo-mazo-1{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v-asig) 60%,#fff),
             0 0 0 9px color-mix(in srgb,var(--v-asig) 18%,transparent),
             0 17px 0 -6px rgba(255,255,255,.62),
             0 34px 60px -12px rgba(0,0,0,.6),
             0 0 70px -8px color-mix(in srgb,var(--v-asig) 55%,transparent);}
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra{animation:vivoCartaEntra .56s cubic-bezier(.2,1.35,.4,1) both;}
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra-suave{animation:vivoFundido .4s ease-out both;}
@keyframes vivoCartaEntra{0%{opacity:0; transform:translate3d(0,46px,0)} 100%{opacity:1; transform:none}}
@keyframes vivoFundido{from{opacity:0} to{opacity:1}}
/* al terminar: la carta brilla en verde un momento (solo sombra: no mueve nada) */
html.pm-vivo .pm-app #zona-ejercicio.vivo-gana{animation:vivoGana 1s ease-out;}
@keyframes vivoGana{0%{box-shadow:0 0 0 3px var(--v-verde),0 0 0 9px rgba(47,207,116,.35),0 0 90px 10px rgba(47,207,116,.75)}
  100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--v-asig) 60%,#fff),0 0 0 9px color-mix(in srgb,var(--v-asig) 18%,transparent),0 0 70px -8px color-mix(in srgb,var(--v-asig) 55%,transparent)}}
/* la carta que se va (vivo.js la saca volando): que no se pueda tocar */
html.pm-vivo .pm-app #zona-ejercicio.vivo-sale{pointer-events:none;}
/* robótica trae su propio tablero: la carta solo le pone un fondo claro */
html.pm-vivo .pm-app #zona-ejercicio:has(.rb-experiencia){background:#f6f7fb; padding:10px;}

/* el mensaje de la familia es EL momento (diferenciador 1): una carta de verdad */
html.pm-vivo .pm-app #zona-ejercicio.vivo-mensaje{background:linear-gradient(180deg,#fffaf0,#fff3e0); padding:64px 26px 34px;
  font-family:"Fredoka",system-ui,sans-serif; font-size:clamp(1.45rem,4.2vw,2rem); line-height:1.35; text-align:center;
  color:#4a2c00; box-shadow:0 0 0 3px #ffb44a, 0 0 0 10px rgba(255,180,74,.25), 0 30px 60px -12px rgba(0,0,0,.6),
  0 0 90px -6px rgba(255,190,90,.75);}
html.pm-vivo .pm-app #zona-ejercicio.vivo-mensaje::before{content:attr(data-vivo-sobre); position:absolute; top:-30px; left:50%; font-size:58px;
  transform:translateX(-50%); filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); animation:vivoSobre 1.6s ease-in-out infinite;}
@keyframes vivoSobre{0%,100%{transform:translateX(-50%) rotate(-6deg)} 50%{transform:translateX(-50%) translateY(-8px) rotate(6deg)}}

/* ─── Dentro de la carta: títulos, enunciados y cifras por su valor ───── */
html.pm-vivo .pm-app #zona-ejercicio .lec-titulo{display:inline-flex; align-items:center; gap:6px; margin:0 0 4px;
  padding:6px 14px; border-radius:999px; font-size:1rem;
  background:color-mix(in srgb,var(--v-asig) 12%,#fff); color:color-mix(in srgb,var(--v-asig) 78%,#000);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--v-asig) 30%,#fff);}
html.pm-vivo .pm-app #zona-ejercicio .enunciado-num{font-family:"Fredoka",system-ui,sans-serif; font-weight:600;
  font-size:clamp(2.3rem,7vw,3.2rem); letter-spacing:.02em; color:var(--v-tinta);}
html.pm-vivo .pm-app #zona-ejercicio .enunciado-txt{color:#3d3670;}
html.pm-vivo .pm-app #zona-ejercicio .enunciado{color:var(--v-tinta);}
/* unidades naranja (la madera del palillo suelto), decenas rosa (la goma del
   paquete), centenas violeta, millares turquesa. Ninguna es roja. */
.vivo-num{white-space:nowrap;}
.vivo-cu{color:#e8590c;} .vivo-cd{color:#d6336c;} .vivo-cc{color:#7048e8;}
.vivo-cum,.vivo-cdm,.vivo-ccm{color:#0b8f86;} .vivo-cdec{color:#5c5694;}
/* en la ficha acertada (verde) las cifras van en blanco, que se lean */
html.pm-vivo #zona-ejercicio .bien .vivo-num,
html.pm-vivo #zona-ejercicio .bien .vivo-num span{color:inherit;}
/* las cuentas en columna: la columna entera de su color, lo escrito también */
html.pm-vivo #zona-ejercicio .vivo-col-u{color:#e8590c!important;}
html.pm-vivo #zona-ejercicio .vivo-col-d{color:#d6336c!important;}
html.pm-vivo #zona-ejercicio .vivo-col-c{color:#7048e8!important;}
html.pm-vivo #zona-ejercicio :is(.vivo-col-um,.vivo-col-dm,.vivo-col-cm){color:#0b8f86!important;}
html.pm-vivo #zona-ejercicio .cuadricula .cc-num{font-family:"Fredoka",system-ui,sans-serif; font-weight:600;}
/* y la goma del paquete de palillos, del color de las decenas en todos los
   mundos: el paquete ES una decena, que se vea igual en el número */
html.pm-vivo .paquete::after{background:#e64980;}
html.pm-vivo .paquete.sombra::after{background:transparent; border-color:#e64980;}

/* ─── Casillas ───────────────────────────────────────────────────────── */
html.pm-vivo #s-juego .celda:not(.fija){border-radius:18px; font-family:"Fredoka",system-ui,sans-serif; font-weight:600;
  transition:transform .15s, box-shadow .2s, background .2s;}
html.pm-vivo #s-juego .celda.activa:not(.fija){border:3px solid #ffb300; background:#fffbeb; color:var(--v-tinta);
  box-shadow:0 0 0 5px rgba(255,179,0,.22), 0 0 24px rgba(255,179,0,.5); animation:vivoLatido 1.25s ease-in-out infinite;}
@keyframes vivoLatido{0%,100%{box-shadow:0 0 0 4px rgba(255,179,0,.2),0 0 16px rgba(255,179,0,.35)}
  50%{box-shadow:0 0 0 8px rgba(255,179,0,.3),0 0 30px rgba(255,179,0,.6)}}
html.pm-vivo #s-juego .celda.hecha:not(.fija){border:3px solid var(--v-verde); background:#eafff2; color:#127a3e;
  box-shadow:0 4px 0 #b6ecc9; animation:vivoCeldaOk .5s cubic-bezier(.2,1.8,.4,1);}
@keyframes vivoCeldaOk{0%{transform:translateY(0)} 35%{transform:translateY(-7px)} 100%{transform:translateY(0)}}
/* el temblor de siempre, en ámbar suave y nunca en rojo */
html.pm-vivo #s-juego .celda.mal{border-color:#b9a7ff; background:#f4f0ff;}

/* los botones de dentro de la carta («Escuchar», «Comprobar»…): con relieve */
html.pm-vivo .pm-app #zona-ejercicio .btn{border-radius:18px; font-family:"Fredoka",system-ui,sans-serif; font-weight:600;}
html.pm-vivo .pm-app #zona-ejercicio .btn-cielo{background:linear-gradient(180deg,#63c7ff,#2f8bff); color:#fff;
  box-shadow:0 5px 0 #1f63c9, 0 8px 16px rgba(47,139,255,.35);}
html.pm-vivo .pm-app #zona-ejercicio .btn-cielo:active{transform:translateY(4px); box-shadow:0 1px 0 #1f63c9;}

/* las cabeceras de la rejilla: pastillas con relieve */
html.pm-vivo .pm-app #zona-ejercicio .rejilla th{background:linear-gradient(180deg,#8f7dff,#6c5ce7); color:#fff;
  border-radius:14px; box-shadow:0 4px 0 #4b3cc0; font-family:"Fredoka",system-ui,sans-serif; font-weight:600; letter-spacing:.02em;}

/* ─── Opciones: fichas de juego gordas, con relieve ──────────────────── */
html.pm-vivo .pm-app #zona-ejercicio :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn),
html.pm-vivo[data-motor="infantil"] #zona-ejercicio .opcion{
  background:#fff; color:var(--v-tinta); border:3px solid color-mix(in srgb,var(--v-asig) 32%,#e9e5ff);
  border-radius:20px; box-shadow:0 6px 0 color-mix(in srgb,var(--v-asig) 30%,#d9d3f5), 0 10px 18px rgba(34,28,79,.1);
  transition:transform .12s, box-shadow .12s, background .2s, border-color .2s, opacity .2s;}
html.pm-vivo .pm-app #zona-ejercicio .opcion-geo{font-family:"Fredoka",system-ui,sans-serif; font-weight:600; font-size:1.2rem;}
html.pm-vivo .pm-app #zona-ejercicio :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn):active,
html.pm-vivo[data-motor="infantil"] #zona-ejercicio .opcion:active{transform:translateY(5px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--v-asig) 30%,#d9d3f5), 0 3px 8px rgba(34,28,79,.1);}
@media (hover:hover){
  html.pm-vivo .pm-app #zona-ejercicio :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn):hover,
  html.pm-vivo[data-motor="infantil"] #zona-ejercicio .opcion:hover{transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--v-asig) 60%,#fff);}
}
/* van saliendo una detrás de otra al repartir la carta */
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn,.opcion,.pad-sol){
  animation:vivoFicha .45s cubic-bezier(.2,1.6,.4,1) both;}
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn,.opcion):nth-child(1){animation-delay:.16s}
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn,.opcion):nth-child(2){animation-delay:.23s}
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn,.opcion):nth-child(3){animation-delay:.30s}
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn,.opcion):nth-child(4){animation-delay:.37s}
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn,.opcion):nth-child(5){animation-delay:.44s}
html.pm-vivo .pm-app #zona-ejercicio.vivo-entra :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn,.opcion):nth-child(n+6){animation-delay:.5s}
@keyframes vivoFicha{0%{opacity:0; transform:translateY(22px)} 100%{opacity:1; transform:none}}

/* bien: verde que salta (las chispas las pone vivo.js) */
html.pm-vivo .pm-app #zona-ejercicio :is(.opcion-geo,.cesta-btn,.paso-ciclo,.frac-btn).bien,
html.pm-vivo[data-motor="infantil"] #zona-ejercicio .opcion.bien{
  background:linear-gradient(180deg,#5ee391,var(--v-verde)); border-color:var(--v-verde-osc); color:#fff;
  box-shadow:0 6px 0 var(--v-verde-osc), 0 0 26px rgba(47,207,116,.6); animation:vivoSalto .55s cubic-bezier(.2,1.8,.4,1);}
@keyframes vivoSalto{0%{transform:translateY(0)} 35%{transform:translateY(-10px)} 100%{transform:translateY(0)}}
/* no: un meneo y se apaga un poco. Sin rojo: lila */
html.pm-vivo .pm-app #zona-ejercicio :is(.opcion-geo,.cesta-btn,.paso-ciclo).malo,
html.pm-vivo[data-motor="infantil"] #zona-ejercicio .opcion.mal{
  background:#f3f0ff; border-color:#c9bdfb; color:#6e66a6; box-shadow:0 3px 0 #ddd5fb; opacity:.8;
  animation:vivoMeneo .5s ease-in-out;}
@keyframes vivoMeneo{0%,100%{transform:rotate(0)} 20%{transform:rotate(-5deg)} 40%{transform:rotate(4deg)} 60%{transform:rotate(-3deg)} 80%{transform:rotate(2deg)}}
/* la ayuda (acierto guiado) late en oro, que se vea desde lejos */
html.pm-vivo[data-motor="infantil"] #zona-ejercicio .opcion.pista{border-color:#ffb300;
  box-shadow:0 6px 0 #e09a00, 0 0 0 6px rgba(255,179,0,.3), 0 0 28px rgba(255,179,0,.65);}

/* ─── El teclado: una consola con teclas gordas ──────────────────────── */
html.pm-vivo .pm-app #s-juego .pad{position:relative; z-index:2; max-width:420px; padding:14px; gap:12px; margin-top:10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:30px;
  box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
html.pm-vivo .pm-app #s-juego .pad .pad-ultima{gap:12px;}
html.pm-vivo .pm-app #s-juego .pad button{height:66px; border-radius:22px; font-family:"Fredoka",system-ui,sans-serif;
  font-size:2rem; font-weight:600; color:var(--v-tinta);
  background:linear-gradient(180deg,#ffffff 0%,#ecebff 100%);
  box-shadow:0 6px 0 #a39be6, 0 10px 18px rgba(0,0,0,.3), inset 0 2px 0 #fff;
  transition:transform .07s, box-shadow .07s;}
html.pm-vivo .pm-app #s-juego .pad button:active{transform:translateY(5px);
  box-shadow:0 1px 0 #a39be6, 0 3px 8px rgba(0,0,0,.3), inset 0 2px 0 #fff;}
html.pm-vivo .pm-app #s-juego .pad .pad-borrar{background:linear-gradient(180deg,#ffe0ec,#ffc2d8); color:#b02a67;
  box-shadow:0 6px 0 #e493b6, 0 10px 18px rgba(0,0,0,.3), inset 0 2px 0 #fff;}
html.pm-vivo .pm-app #s-juego .pad .pad-ok{background:linear-gradient(180deg,#63e89b,var(--v-verde)); color:#fff;
  box-shadow:0 6px 0 var(--v-verde-osc), 0 10px 18px rgba(0,0,0,.3), 0 0 22px rgba(47,207,116,.45), inset 0 2px 0 rgba(255,255,255,.45);}
html.pm-vivo .pm-app #s-juego .pad .pad-coma{background:linear-gradient(180deg,#fff08a,var(--v-oro2)); color:#4a3200;
  box-shadow:0 6px 0 #c99400, 0 10px 18px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.6);}
html.pm-vivo .pm-app #s-juego .pad .pad-ok:active,
html.pm-vivo .pm-app #s-juego .pad .pad-borrar:active,
html.pm-vivo .pm-app #s-juego .pad .pad-coma:active{box-shadow:0 1px 0 rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.3);}
/* Tableta en horizontal: el teclado se pone AL LADO de la carta, como la
   consola de Synthesis. Antes quedaba debajo y en un iPad apaisado (1024×768)
   el ✓ salía por debajo del borde: había que bajar la página para contestar. */
@media (min-width:900px) and (orientation:landscape){
  html.pm-vivo .pm-app #s-juego.activa:has(#pad:not(.oculto)){display:grid; max-width:1180px;
    grid-template-columns:minmax(0,1fr) 330px; grid-template-rows:auto 1fr; column-gap:20px; row-gap:16px; align-items:start;}
  html.pm-vivo .pm-app #s-juego.activa:has(#pad:not(.oculto))>.topbar{grid-column:1 / -1;}
  html.pm-vivo .pm-app #s-juego.activa:has(#pad:not(.oculto))>#zona-ejercicio{grid-column:1; grid-row:2; min-width:0;}
  html.pm-vivo .pm-app #s-juego.activa:has(#pad:not(.oculto))>#pad{grid-column:2; grid-row:2; position:sticky; top:14px;
    margin-top:0; max-width:none; width:100%;}
  html.pm-vivo .pm-app #s-juego.activa:has(#pad:not(.oculto)) .pad button{height:62px;}
}

/* ─── Premios: el «¡genial!» es una pegatina con rayos ────────────────── */
html.pm-vivo #superpremio{overflow:hidden;}
html.pm-vivo #superpremio::before{content:""; position:absolute; left:50%; top:50%; width:150vmax; height:150vmax;
  margin:-75vmax 0 0 -75vmax; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,224,102,.28) 0 9deg,transparent 9deg 18deg);
  -webkit-mask-image:radial-gradient(circle,#000 8%,transparent 42%); mask-image:radial-gradient(circle,#000 8%,transparent 42%);
  animation:vivoRayos 7s linear infinite;}
@keyframes vivoRayos{to{transform:rotate(360deg)}}
html.pm-vivo #superpremio .texto{position:relative; font-family:"Fredoka",system-ui,sans-serif; font-weight:700;
  font-size:clamp(2rem,7vw,3.2rem); color:#26154f; text-shadow:0 2px 0 rgba(255,255,255,.65);
  background:linear-gradient(180deg,#fff7a8 0%,var(--v-oro1) 35%,var(--v-oro2) 70%,var(--v-naranja) 100%);
  border:5px solid #fff; border-radius:30px; padding:18px 32px; transform:rotate(-4deg);
  box-shadow:0 10px 0 #c46a12, 0 24px 50px rgba(0,0,0,.45), 0 0 90px rgba(252,213,68,.65);
  animation:vivoPegatina .6s cubic-bezier(.2,1.7,.35,1) both;}
@keyframes vivoPegatina{0%{opacity:0; transform:rotate(-14deg) scale(.3)} 100%{opacity:1; transform:rotate(-4deg) scale(1)}}

/* la mascota, con un halo para que no se pierda en lo oscuro */
html.pm-vivo.vivo-juego #hada .avatar{filter:drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 3px 6px rgba(0,0,0,.4));}

/* ─── Chispas, la gema que vuela y el comparador ─────────────────────── */
#vivo-fx{position:fixed; inset:0; pointer-events:none; z-index:85; overflow:hidden;}
.vivo-chispa{position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:var(--c); box-shadow:0 0 9px var(--c); animation:vivoChispa var(--t) cubic-bezier(.15,.8,.3,1) forwards;}
.vivo-chispa.estrella{width:18px; height:18px; margin:-9px 0 0 -9px; background:none; box-shadow:none;}
.vivo-chispa.estrella::before{content:"★"; display:block; font-size:18px; line-height:18px; text-align:center;
  color:var(--c); text-shadow:0 0 8px var(--c);}
@keyframes vivoChispa{0%{transform:translate(0,0) scale(.3); opacity:1} 55%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(0); opacity:0}}
.vivo-gema{position:absolute; width:40px; height:40px; margin:-20px 0 0 -20px; font-size:36px; line-height:40px; text-align:center;
  filter:drop-shadow(0 0 12px rgba(255,230,120,.95)) drop-shadow(0 4px 4px rgba(0,0,0,.4));}

/* manipular: la copia que viaja a la cesta o a la tira */
.vivo-lanzada{position:absolute; display:flex; align-items:center; justify-content:center; pointer-events:none;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.35)); transform-origin:50% 50%;}
.vivo-lanzada>*{max-width:100%; max-height:100%; margin:0!important;}
/* la cosa ya no encoge y se esfuma sola: es la copia la que vuela */
html.pm-vivo #zona-ejercicio .cosa-clasificar.vuela{transform:none; opacity:1; transition:none;}
html.pm-vivo #zona-ejercicio .cosa-clasificar.vivo-vaciada>*{visibility:hidden;}
html.pm-vivo #zona-ejercicio .cosa-clasificar.vivo-aparece>*{animation:vivoAparece .45s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes vivoAparece{0%{transform:scale(.2); opacity:0} 100%{transform:none; opacity:1}}
html.pm-vivo .pm-app #zona-ejercicio .cesta-btn.bien.vivo-traga{animation:vivoTraga .55s cubic-bezier(.2,1.6,.4,1);}
@keyframes vivoTraga{0%{transform:scale(1)} 30%{transform:scale(1.14,.86)} 60%{transform:scale(.94,1.08)} 100%{transform:scale(1)}}
html.pm-vivo #zona-ejercicio .ficha-ciclo.vivo-espera{visibility:hidden;}
html.pm-vivo #zona-ejercicio .ficha-ciclo.vivo-aterriza{animation:vivoAparece .4s cubic-bezier(.2,1.6,.4,1) both;}

/* la ficha acertada que vuela a rellenar el «?» del enunciado */
.vivo-ficha-vuela>*{display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  border:0!important; border-radius:18px; background:linear-gradient(180deg,#5ee391,#2fcf74)!important; color:#fff!important;
  font-family:"Fredoka",system-ui,sans-serif; font-weight:600; font-size:1.4rem; box-shadow:0 6px 0 #1c9a52;}
.vivo-respuesta{display:inline-block; color:#1c9a52; text-shadow:0 0 14px rgba(47,207,116,.55);
  animation:vivoAparece .45s cubic-bezier(.2,1.6,.4,1) both;}
/* 2.27: el hueco de respuesta de los juegos de elegir que no tienen dónde soltar (vivo.js, cajaRespuesta):
   la caja punteada de siempre, como las casillas del cuaderno; al acertar se queda la respuesta en verde */
.vivo-resp{display:flex; justify-content:center; margin:4px 0 8px;}
.vivo-resp-hueco{display:inline-flex; align-items:center; justify-content:center; min-width:84px; min-height:54px;
  padding:4px 16px; border:3px dashed rgba(124,92,191,.6); border-radius:16px; background:rgba(255,255,255,.72);
  font-family:"Fredoka",system-ui,sans-serif; font-weight:600; font-size:1.5rem; line-height:1.1; color:#6b55a3; box-sizing:border-box;}
.vivo-resp-hueco.vivo-lleno{border-style:solid; border-color:#2fcf74; background:rgba(94,227,145,.16); color:#1c9a52;}
.vivo-resp-hueco img, .vivo-resp-hueco svg, .vivo-resp-hueco .pm-dibujo, .vivo-resp-hueco .inf-ilustracion{max-height:58px; width:auto;}
/* 2.17: dentro de un dibujo (la recta), crece desde su sitio y no desde la esquina del dibujo */
svg .vivo-respuesta-svg{transform-box:fill-box; transform-origin:center; animation:vivoAparece .45s cubic-bezier(.2,1.6,.4,1) both;}

/* ⚡ el aviso de «ya es un rayo», arriba y breve */
#vivo-aviso{position:fixed; left:50%; top:14px; z-index:97; transform:translate(-50%,-160%); pointer-events:none;
  padding:10px 18px; border-radius:999px; font:700 1.05rem "Fredoka",system-ui,sans-serif; color:#2b1a00;
  background:linear-gradient(180deg,#fff3a3,#ffd43b); box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 30px rgba(255,212,59,.6);
  transition:transform .45s cubic-bezier(.2,1.5,.4,1);}
#vivo-aviso.ver{transform:translate(-50%,0);}
/* en la demo hay una cinta arriba: el aviso baja un poco para no quedar debajo */
html.pm-vivo-demo #vivo-aviso.ver{transform:translate(-50%,34px);}

/* 2.36: la mano que enseña a arrastrar… o a tocar (vivo.js, ensenaMano). Sus piezas nacen
   invisibles y las anima el código; la caja es solo el punto de donde sale la mano */
.vivo-mano{position:absolute; width:0; height:0;}
.vivo-mano>span{position:absolute; left:0; top:0; opacity:0; will-change:transform,opacity;}
.vivo-mano-ficha{box-sizing:border-box; border:3px dashed #6b55a3; border-radius:16px;
  background:rgba(255,255,255,.88); box-shadow:0 10px 20px rgba(0,0,0,.25);}
/* 2.41: en la vuelta de los dos toques, la ficha cogida brilla como la de verdad (.pm-elegida) */
.vivo-mano-ficha.cogida{border:3px solid #ffc61a; box-shadow:0 12px 22px rgba(0,0,0,.25), 0 0 26px rgba(255,198,26,.85);}
.vivo-mano-toque{width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%;
  border:4px solid #fff; box-shadow:0 0 0 4px rgba(255,198,26,.7), 0 0 22px rgba(255,198,26,.8);}
/* la punta del dedo cae en el punto (el dibujo propio y el emoji del aparato la tienen arriba) */
.vivo-mano-dedo{font-size:92px; line-height:1; margin:-.2em 0 0 -.6em; transform-origin:50% 20%;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));}
.vivo-mano.quieta .vivo-mano-dedo{opacity:1;}
/* el bocadillo: arriba y en medio, como el aviso de los rayos, sin tapar el ejercicio */
#vivo-mano-dice{position:fixed; left:50%; top:14px; z-index:96; max-width:calc(100vw - 24px); box-sizing:border-box;
  padding:10px 18px; border-radius:999px; text-align:center; pointer-events:none;
  font:700 1.05rem/1.25 "Fredoka",system-ui,sans-serif; color:#2b1a00;
  background:linear-gradient(180deg,#fff3a3,#ffd43b); box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 30px rgba(255,212,59,.6);
  transform:translate(-50%,-160%); transition:transform .45s cubic-bezier(.2,1.5,.4,1);}
#vivo-mano-dice.ver{transform:translate(-50%,0);}
html.pm-vivo-demo #vivo-mano-dice.ver{transform:translate(-50%,34px);}

/* ⚡ el mapa de las tablas, en el resumen */
html.pm-vivo .pm-app #s-resumen .vivo-mapa{width:100%; max-width:560px; padding:16px 14px 12px; text-align:center;
  background:#fff; border-radius:26px; box-shadow:0 8px 24px rgba(0,0,0,.25);}
.vivo-mapa .vm-titulo{margin:0; font-size:1.25rem;}
.vivo-mapa .vm-cuenta{margin:2px 0 10px; font-weight:800; color:#6c5ce7;}
.vivo-mapa .vm-rejilla{display:flex; flex-direction:column; gap:4px; align-items:center;}
.vivo-mapa .vm-fila{display:grid; grid-template-columns:26px repeat(10, 30px); gap:4px; align-items:center;}
.vivo-mapa .vm-fila b, .vivo-mapa .vm-cab i{font:700 .85rem "Fredoka",system-ui,sans-serif; color:#8a82b8; font-style:normal; text-align:center;}
.vivo-mapa .vm-c{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:1rem; line-height:1; background:#f3f1fb; box-shadow:inset 0 0 0 2px #e4e0f5;}
.vivo-mapa .vm-visto{background:#ece8ff; box-shadow:inset 0 0 0 2px #cfc6ff;}
.vivo-mapa .vm-estrella{background:#fff3c4; color:#e8a400; box-shadow:inset 0 0 0 2px #ffd666;}
.vivo-mapa .vm-rayo{background:radial-gradient(circle at 35% 30%,#fff7b0,#ffc61a); box-shadow:0 0 10px rgba(255,198,26,.8), inset 0 0 0 2px #f0a800;}
.vivo-mapa .vm-nuevo{animation:vivoEstrella .8s cubic-bezier(.2,1.8,.4,1) both, vivoLatidoNodo 1.4s ease-in-out .8s 3;}
.vivo-mapa .vm-leyenda{margin:10px 0 0; font-size:.85rem; color:#8a82b8;}
@media (max-width:420px){ .vivo-mapa .vm-fila{grid-template-columns:20px repeat(10, 25px); gap:3px;} .vivo-mapa .vm-c{width:25px; height:25px; font-size:.85rem;} }

/* 🔥 la pegatina de la racha, más encendida */
html.pm-vivo #superpremio .texto.vivo-racha{background:linear-gradient(180deg,#ffe066 0%,#ff922b 55%,#e8590c 100%); color:#fff;
  text-shadow:0 2px 0 rgba(120,20,0,.45); box-shadow:0 10px 0 #b3401a, 0 24px 50px rgba(0,0,0,.45), 0 0 110px rgba(255,120,40,.8);}

#vivo-comparar{position:fixed; right:10px; bottom:10px; z-index:96; border:0; border-radius:999px; padding:8px 14px;
  font:800 .85rem "Nunito",system-ui,sans-serif; color:#fff; background:rgba(20,16,60,.78); cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3); opacity:.8;}
#vivo-comparar:hover{opacity:1;}

/* ─── El resumen: el trofeo con rayos y las estrellas una a una ─────── */
html.pm-vivo.vivo-juego .pm-app #s-resumen h1{color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.3), 0 0 30px rgba(255,224,102,.55);}
html.pm-vivo.vivo-juego .pm-app #s-resumen .sub{color:#e4e0ff;}
html.pm-vivo.vivo-juego .pm-app #s-resumen .res-copa{position:relative; z-index:0;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(255,214,0,.6));}
html.pm-vivo.vivo-juego .pm-app #s-resumen .res-copa::before{content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:260px; height:260px; margin:-130px 0 0 -130px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,224,102,.35) 0 10deg,transparent 10deg 20deg);
  -webkit-mask-image:radial-gradient(circle,#000 20%,transparent 70%); mask-image:radial-gradient(circle,#000 20%,transparent 70%);
  animation:vivoRayos 9s linear infinite;}
html.pm-vivo .pm-app #s-resumen.vivo-resumen .res-copa{animation:vivoTrofeo .9s cubic-bezier(.2,1.6,.35,1) both;}
@keyframes vivoTrofeo{0%{opacity:0; transform:translateY(40px) scale(.3) rotate(-20deg)} 100%{opacity:1; transform:none}}
html.pm-vivo .pm-app #s-resumen.vivo-resumen #resumen-estrellas>div{animation:vivoFicha .45s cubic-bezier(.2,1.6,.4,1) both;
  animation-delay:calc(.35s + var(--i, 0) * .12s);}

/* ═══ EL CUADRO DE LA PORTADA, TAMBIÉN DETRÁS DEL EJERCICIO ═══════════════
   Pedro (27-sep): «espero que no rompa la coherencia de la web». La portada de
   cada mundo es su cuadro sobre su cielo (mundos.css, de Codex: --pm-cielo,
   --pm-entorno, --pm-panel, --pm-inicio-tinta y --pm-paisaje). El escenario sale
   de lo MISMO: el mismo cuadro, difuminado, y de noche solo el espacio, que ya es
   de noche en su portada. Los demás mundos, de día y con la letra de su portada.
   ?tono=noche lo pone todo de noche (lo de antes), para comparar. */
html.pm-vivo .vivo-paisaje{position:absolute; inset:-2%; background:var(--pm-paisaje) center / cover no-repeat;
  opacity:.28; filter:blur(3px) saturate(1.05);}
html.pm-vivo .vivo-velo{position:absolute; inset:0;
  background:linear-gradient(180deg, var(--v-c1) 0%, transparent 38%, transparent 62%, var(--v-c2) 100%); opacity:.85;}

/* de día: el cielo y el suelo de la portada (las variables del mundo viven en body) */
html.pm-vivo[data-vivo-tono="dia"] body{--v-c1:var(--pm-cielo); --v-c2:var(--pm-entorno); --v-g1:#ffffff; --v-g2:var(--pm-panel);}
html.pm-vivo[data-vivo-tono="dia"] .vivo-paisaje{opacity:.62; filter:blur(2px) saturate(1.08);}
html.pm-vivo[data-vivo-tono="dia"] .vivo-velo{opacity:.7;}
html.pm-vivo[data-vivo-tono="dia"] .vivo-brillo{opacity:.35;}
html.pm-vivo[data-vivo-tono="dia"] .vivo-p{background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.95);}
html.pm-vivo[data-vivo-tono="dia"] .vivo-deco{opacity:.18;}

/* el marcador, de cristal claro y con la letra de la portada */
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego>.topbar{background:rgba(255,255,255,.74); border-color:#fff;
  color:var(--pm-inicio-tinta); box-shadow:0 10px 28px rgba(40,30,80,.14), inset 0 1px 0 #fff;}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego .topbar .icono-btn{background:#fff; border-color:rgba(40,30,80,.12);
  color:var(--pm-inicio-tinta); box-shadow:0 3px 0 rgba(40,30,80,.14);}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego .topbar>.chip:not(#btn-pista){background:#fff; border-color:rgba(40,30,80,.12);
  color:var(--pm-inicio-tinta); box-shadow:0 3px 0 rgba(40,30,80,.1);}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego .topbar .chip .num,
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego .topbar .estrellas-num2{color:#b07a00; text-shadow:none;}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego #prog-txt{color:var(--pm-inicio-tinta);}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego .vivo-pista .pbar{background:rgba(40,30,80,.12); box-shadow:inset 0 2px 3px rgba(40,30,80,.18);}
html.pm-vivo[data-vivo-tono="dia"] .vivo-nodo{background:rgba(40,30,80,.28); box-shadow:0 0 0 2px #fff;}
html.pm-vivo[data-vivo-tono="dia"] .vivo-nodo.siguiente{background:#fff; box-shadow:0 0 0 3px #ffc61a, 0 0 10px rgba(255,198,26,.9);}

/* la carta: la misma, con sombras de día (en un cielo claro, el negro pesa) */
html.pm-vivo[data-vivo-tono="dia"] .pm-app #zona-ejercicio,
html.pm-vivo[data-vivo-tono="dia"] .pm-app #zona-ejercicio.vivo-mazo-0{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v-asig) 55%,#fff), 0 0 0 9px color-mix(in srgb,var(--v-asig) 16%,transparent),
             0 24px 44px -14px rgba(40,30,80,.35);}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #zona-ejercicio.vivo-mazo-1{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v-asig) 55%,#fff), 0 0 0 9px color-mix(in srgb,var(--v-asig) 16%,transparent),
             0 17px 0 -6px #fff, 0 17px 0 -4px color-mix(in srgb,var(--v-asig) 22%,#fff), 0 30px 44px -14px rgba(40,30,80,.35);}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #zona-ejercicio.vivo-mazo-2{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v-asig) 55%,#fff), 0 0 0 9px color-mix(in srgb,var(--v-asig) 16%,transparent),
             0 17px 0 -6px #fff, 0 17px 0 -4px color-mix(in srgb,var(--v-asig) 22%,#fff),
             0 30px 0 -12px #fff, 0 30px 0 -10px color-mix(in srgb,var(--v-asig) 16%,#fff), 0 40px 44px -14px rgba(40,30,80,.35);}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #zona-ejercicio.vivo-mensaje{box-shadow:0 0 0 3px #ffb44a, 0 0 0 10px rgba(255,180,74,.25), 0 24px 44px -14px rgba(40,30,80,.35);}

/* el teclado, de cristal claro */
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego .pad{background:rgba(255,255,255,.5); border-color:#fff;
  box-shadow:0 14px 34px rgba(40,30,80,.14), inset 0 1px 0 #fff;}
html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego .pad button{box-shadow:0 6px 0 #b8b0ea, 0 8px 14px rgba(40,30,80,.14), inset 0 2px 0 #fff;}

/* En el móvil el ✓ se quedaba por debajo del borde y había que bajar para confirmar (8-nov): el
   teclado se queda pegado abajo, casi opaco porque lo de arriba pasa por detrás, y en una
   pantalla baja con las teclas algo menos altas. En una tablet no cambia nada. */
@media (max-width:600px){
  html.pm-vivo .pm-app #s-juego .pad{position:sticky; bottom:6px; z-index:5; background:rgba(34,28,72,.92);}
  html.pm-vivo[data-vivo-tono="dia"] .pm-app #s-juego .pad{background:rgba(255,255,255,.94);}
  /* y la mascota habla arriba: abajo se ponía encima del ✓ y del borrar */
  html.pm-vivo .pm-app:has(#s-juego.activa #pad:not(.oculto)) #hada{top:128px; bottom:auto; align-items:flex-start;}
}
@media (max-width:600px) and (max-height:800px){
  html.pm-vivo .pm-app #s-juego .pad{padding:8px; gap:8px;}
  html.pm-vivo .pm-app #s-juego .pad .pad-ultima{gap:8px;}
  html.pm-vivo .pm-app #s-juego .pad button{height:50px; font-size:1.7rem;}
}

/* el resumen, con la letra de la portada */
html.pm-vivo[data-vivo-tono="dia"].vivo-juego .pm-app #s-resumen h1{color:var(--pm-inicio-tinta); text-shadow:0 2px 0 rgba(255,255,255,.7);}
html.pm-vivo[data-vivo-tono="dia"].vivo-juego .pm-app #s-resumen .sub{color:var(--pm-inicio-tinta); font-weight:700;
  text-shadow:0 1px 10px var(--pm-cielo), 0 0 20px var(--pm-cielo);}   /* con su halo: sobre el cuadro apenas se leía (10-nov) */
html.pm-vivo[data-vivo-tono="dia"].vivo-juego #hada .avatar{filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));}

/* ═══ EL MUNDO, TAMBIÉN EN PREMIOS, MISIONES Y EL JOYERO (10-nov-2026) ═══════
   Al salir del ejercicio se caía a una pantalla de color liso con botones verde
   azulado: parecía otra app. Estas pantallas (vivo.js: AMBIENTE) llevan el mismo
   cuadro y el mismo cielo que la portada de su mundo, EN CALMA: nada se mueve
   detrás de una lista. Los colores salen de las variables del mundo (mundos.css,
   en body.pm-mundos); sin esa hoja, nada de esto se aplica. */
html.pm-vivo.vivo-ambiente #vivo-escenario{display:block;}
html.pm-vivo.vivo-ambiente :is(.vivo-particulas,.vivo-decos,.vivo-suelo){display:none;}
html.pm-vivo.vivo-ambiente .vivo-brillo{animation:none;}
html.pm-vivo[data-vivo-tono="dia"].vivo-ambiente .vivo-paisaje{opacity:.5; filter:blur(7px) saturate(1.05);}
/* …y, si el mundo tiene su fondo ya difuminado (vivo.js: --vivo-fondo, 240 px), se usa ese y no
   hay filtro que calcular: se ve igual y en una tableta modesta pesa mucho menos (2.56) */
html.pm-vivo.vivo-ambiente #vivo-escenario.con-fondo .vivo-paisaje{background-image:var(--vivo-fondo); filter:none;}
html.pm-vivo[data-vivo-tono="dia"].vivo-ambiente .vivo-velo{opacity:.82;}

/* títulos con la letra de la portada y un halo del cielo para que se lean sobre el cuadro */
html.pm-vivo.vivo-ambiente .pm-mundos .screen.activa>:is(h1,h2,.sub){color:var(--pm-inicio-tinta);
  text-shadow:0 1px 10px var(--pm-cielo), 0 0 22px var(--pm-cielo);}
html.pm-vivo.vivo-ambiente .pm-mundos .screen.activa>.sub{opacity:.9; font-weight:700;}
/* el saldo y el volver, como en la portada */
html.pm-vivo.vivo-ambiente .pm-mundos .screen.activa>.topbar :is(.icono-btn,.chip){background:var(--pm-panel); color:#282746;
  border:1px solid #ffffffa8; box-shadow:0 5px 14px #152e5226;}
html.pm-vivo.vivo-ambiente .pm-mundos .screen.activa>.topbar .chip :is(.num,.estrellas-num2){color:#282746;}
/* lo blanco flota sobre el cuadro */
html.pm-vivo.vivo-ambiente .pm-mundos .screen.activa :is(.tarjeta,.mision-card,.insig:not(.bloq,.estrena)){box-shadow:0 10px 24px #152e5224;}
html.pm-vivo.vivo-ambiente .pm-mundos .mision-card{border-color:#fff; background:#fff;}
html.pm-vivo.vivo-ambiente .pm-mundos #misiones-hechas-wrap{background:color-mix(in srgb,var(--pm-panel) 88%,transparent);
  border:1px solid #ffffffa8; border-radius:22px; padding:12px 14px; box-sizing:border-box;}
html.pm-vivo.vivo-ambiente .pm-mundos #misiones-hechas-wrap h2{color:#403956!important;}   /* lleva el color en línea */
/* (la insignia que falta la pinta album.css: el hueco del álbum, con su silueta) */

/* Botones con el color del mundo en vez del verde azulado y el azul marino fijos
   (diseno.css): aquí y en el fin de la misión. El principal, relleno; «volver», de papel. */
html.pm-vivo .pm-mundos :is(#s-premios,#s-misiones,#s-joyero,#s-cofre,#s-resumen) :is(.btn-menta,.btn-verde,.btn-azul,.btn-cielo):not(.pm-juego-tarjeta){
  background:linear-gradient(160deg,color-mix(in srgb,var(--pm-acento) 94%,#fff),var(--pm-acento)); color:#fff;
  box-shadow:inset 0 2px 0 #ffffff38, 0 5px 0 color-mix(in srgb,var(--pm-acento) 75%,#191631);}
html.pm-vivo .pm-mundos #s-resumen #btn-resumen-volver{background:var(--pm-panel); color:var(--pm-acento);
  border:1px solid var(--pm-acento); box-shadow:0 5px 14px #152e5226;}

/* sin misiones: la mascota espera la carta de la familia, que se mece despacio */
html.pm-vivo .mision-espera{display:flex; justify-content:center; align-items:flex-end; gap:6px; margin-bottom:6px;}
html.pm-vivo .mision-espera .me-sobre{display:inline-block; font-size:.62em; transform-origin:50% 80%;
  animation:vivoEspera 3.2s ease-in-out infinite;}
@keyframes vivoEspera{0%,100%{transform:translateY(0) rotate(-7deg)} 50%{transform:translateY(-7px) rotate(7deg)}}

/* «Menos animaciones» (10-nov-2026): lo mismo que con prefers-reduced-motion, cuando lo pide
   la familia en Ajustes (la clase vivo-quieto la pone el motor). Se queda el color, se va el baile. */
html.pm-vivo.vivo-quieto .mision-espera .me-sobre{animation:none!important;}
html.pm-vivo.vivo-quieto #vivo-escenario *, html.pm-vivo.vivo-quieto .vivo-pista *, html.pm-vivo.vivo-quieto #zona-ejercicio,
html.pm-vivo.vivo-quieto #zona-ejercicio *, html.pm-vivo.vivo-quieto #superpremio::before,
html.pm-vivo.vivo-quieto #s-resumen .res-copa, html.pm-vivo.vivo-quieto #s-resumen .res-copa::before,
html.pm-vivo.vivo-quieto #s-resumen #resumen-estrellas>div{animation:none!important; transition:none!important;}
html.pm-vivo.vivo-quieto :is(.vivo-particulas,.vivo-decos){display:none;}
/* y lo que flota en la portada de su mundo (mundos.css) */
html.vivo-quieto .pm-mundos .pm-ambiente{display:none;}

/* quien pide menos movimiento, lo tiene: se queda el color, se va el baile */
@media (prefers-reduced-motion:reduce){
  html.pm-vivo .mision-espera .me-sobre{animation:none!important;}
  html.pm-vivo #vivo-escenario *, html.pm-vivo .vivo-pista *, html.pm-vivo #zona-ejercicio,
  html.pm-vivo #zona-ejercicio *, html.pm-vivo #superpremio::before,
  html.pm-vivo #s-resumen .res-copa, html.pm-vivo #s-resumen .res-copa::before,
  html.pm-vivo #s-resumen #resumen-estrellas>div{animation:none!important; transition:none!important;}
}