/* ═══════════════════════════════════════════════════════════════════
   EL ÁLBUM DE INSIGNIAS — el joyero (primaria) y el cofre (infantil)
   ═══════════════════════════════════════════════════════════════════
   Lo pinta album.js. La rejilla (.joyero-grid) y el fondo de cada pegatina
   (.insig) siguen siendo los de cada motor; aquí va lo que hace de aquello un
   álbum: la silueta de la que falta, el recuento y el salto al estrenar una.
   Funciona con o sin el escenario vivo (no cuelga de html.pm-vivo).
   Nunca hay rojo, y un hueco no es un fallo: es el sitio de una pegatina. */

/* cada pegatina es un botón: se toca y la mascota la lee */
.pm-album .insig{appearance:none; -webkit-appearance:none; border:0; font:inherit; color:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; width:100%;
  min-height:128px; box-sizing:border-box; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.pm-album .insig .em{display:block; line-height:1.2;}
.pm-album .insig .nom{display:block; line-height:1.2;}
.pm-album .insig .desc{display:block; font-size:.85rem; font-weight:600; line-height:1.3; margin-top:2px;
  color:var(--tinta-suave,#8a7ba8);}

/* la que falta: el hueco del álbum, con su silueta y cómo se consigue */
.pm-album .insig.bloq{opacity:1; filter:none; box-shadow:none;
  background:color-mix(in srgb,#fff 70%,transparent);
  outline:2px dashed color-mix(in srgb,var(--tinta-suave,#8a7ba8) 50%,transparent); outline-offset:-5px;}
.pm-album .insig.bloq .em{filter:brightness(0); opacity:.16;}
.pm-album .insig.bloq .desc{color:var(--tinta,#4b3b67); opacity:.78;}

/* al tocarla, un respingo */
.pm-album .insig.toca{animation:albumToca .34s ease-out;}
@keyframes albumToca{0%{transform:scale(1)} 45%{transform:scale(1.07)} 100%{transform:scale(1)}}

/* la que se estrena se pega con un salto y un cerco dorado */
.pm-album .insig.estrena{box-shadow:0 0 0 3px var(--oro,#ffc94d), 0 10px 22px rgba(21,46,82,.16);
  animation:albumPega .75s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(.3s + var(--i,0) * .2s);}
@keyframes albumPega{0%{opacity:0; transform:scale(1.7) rotate(-9deg)} 60%{opacity:1; transform:scale(.94) rotate(2deg)}
  100%{opacity:1; transform:none}}

/* el recuento: cuántas lleva de cuántas */
.album-cuenta{display:flex; flex-direction:column; align-items:stretch; gap:8px; width:100%; max-width:440px;
  box-sizing:border-box; padding:12px 18px; border-radius:20px; background:#fff; text-align:center;
  box-shadow:0 6px 16px rgba(21,46,82,.1);}
.album-cuenta:empty{display:none;}
.album-cuenta-txt{display:block; font-weight:800; font-size:1.1rem; line-height:1.25; color:var(--tinta,#4b3b67);}
.album-barra{display:block; width:100%; height:14px; border-radius:999px; overflow:hidden; background:#efebf7;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.08);}
.album-barra>span{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#ffe066,#ffc94d 55%,#ffa94d);}

@media (max-width:420px){ .pm-album .insig{min-height:116px;} .pm-album .insig .desc{font-size:.8rem;} }

/* ═══════════════════════════════════════════════════════════════════
   EL FIN DE LA MISIÓN — la copa con la mascota, las cartas y los premios
   ═══════════════════════════════════════════════════════════════════
   Antes: una columna «🔮 1. ⭐⭐⭐» y hasta nueve botones de premio apilados.
   Ahora cada reto es una carta (album.js: cartas) y los premios son las
   tarjetas de la tienda, en rejilla (album.js: premios). Los rayos de la copa
   y la entrada de las cartas una a una los pone vivo.css, si está encendido. */
.res-heroe{display:flex; align-items:flex-end; justify-content:center; gap:10px; margin-top:4vh;}
.res-copa{line-height:1.1;}
.res-mascota{font-size:2.8rem; line-height:1.1; transform-origin:50% 100%;}
.res-mascota:empty{display:none;}
/* la mascota da tres saltitos al llegar; en infantil no (ya hay fuegos, confeti y su vuelo) */
html[data-motor="primaria"] #s-resumen.activa .res-mascota{animation:resSalta .55s ease-out .9s 3;}
@keyframes resSalta{0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-16px) rotate(-6deg)}}

/* una carta por reto: su dibujo arriba y sus estrellas debajo */
.res-cartas{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.res-carta{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:70px; padding:8px 8px 7px; box-sizing:border-box; border-radius:16px; background:#fbf9ff;
  box-shadow:0 0 0 2px #ece6fa, 0 4px 10px rgba(21,46,82,.08);}
.res-carta .res-que{display:block; font-size:1.9rem; line-height:1.15;}
.res-carta .res-est{display:block; font-size:.95rem; line-height:1.2; white-space:nowrap;}

/* los premios: las tarjetas ilustradas de la tienda, en pequeño, sobre un panel claro */
.res-premios{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:580px;
  box-sizing:border-box; padding:14px; border-radius:26px; background:rgba(255,255,255,.88);
  box-shadow:0 10px 24px rgba(21,46,82,.12);}
.res-premios-titulo{margin:0; font:600 1.35rem/1.2 "Fredoka",system-ui,sans-serif; color:#443852;}
.res-premios-rejilla{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%;}
.res-premio{appearance:none; -webkit-appearance:none; display:flex; flex-direction:column; flex:0 1 calc(50% - 6px);
  min-width:0; padding:0; overflow:hidden; border:2px solid #fff; border-radius:22px; cursor:pointer;
  background:var(--juego-color,#efeaf8); color:#443852; font:inherit; text-align:center;
  box-shadow:0 5px 0 #493b6118, 0 10px 20px #493b6112; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.res-premio:active{transform:translateY(3px); box-shadow:0 2px 0 #493b6118;}
.res-premio:focus-visible{outline:3px solid #785fbc; outline-offset:3px;}
.res-premio .pm-juego-arte{display:block; width:100%; height:92px; overflow:hidden;}
.res-premio .pm-juego-info{display:block; padding:8px 8px 10px; background:#ffffff91;}
.res-premio .pm-juego-nombre{display:block; font:600 1.05rem/1.2 "Fredoka",system-ui,sans-serif;}
.res-premio .pm-juego-texto, .res-premio .pm-juego-datos{display:none;}
@media (min-width:640px){ .res-premio{flex-basis:calc(33.333% - 8px);} .res-premio .pm-juego-arte{height:104px;} }

@media (prefers-reduced-motion:reduce){ .pm-album .insig, .res-mascota{animation:none!important;} }
/* y lo mismo con «Menos animaciones» de Ajustes (la clase vivo-quieto) */
html.vivo-quieto .pm-album .insig, html.vivo-quieto .res-mascota{animation:none!important;}