/* Juegos de preguntas (piel común .re-jp): fondo con el color del área, pregunta en bocadillo,
   respuestas en tarjetas con relieve, barra de progreso con estrella y celebración al acertar.
   No toca colores de acierto/fallo de cada juego: solo relieve, tamaño y animación. */
.re-jp{--rejp2:#2f6fd6}
.re-jp .re-jp-cuerpo{background:
 radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--rejp2) 14%,transparent) 1.2px,transparent 1.6px) 0 0/18px 18px,
 linear-gradient(180deg,color-mix(in srgb,var(--rejp2) 9%,#fff) 0%,#fff 55%)}
/* pregunta */
.re-jp .rejp2-q{background:#fff;border-radius:18px;padding:14px 18px;margin:8px auto 14px!important;max-width:44rem;
 box-shadow:0 4px 0 color-mix(in srgb,var(--rejp2) 30%,#d9dee8),0 8px 18px rgba(15,23,42,.08);border:2px solid color-mix(in srgb,var(--rejp2) 25%,#e5e9f0);
 font-size:clamp(1.15rem,2.2vw,1.55rem)!important;font-weight:800;line-height:1.3;text-align:center;position:relative}
.re-jp .rejp2-q::after{content:"";position:absolute;left:50%;bottom:-10px;width:18px;height:18px;margin-left:-9px;background:#fff;transform:rotate(45deg);
 border-right:2px solid color-mix(in srgb,var(--rejp2) 25%,#e5e9f0);border-bottom:2px solid color-mix(in srgb,var(--rejp2) 25%,#e5e9f0)}
/* respuestas */
.re-jp .re-kbd{gap:12px}
.re-jp .re-kbd>.rejp2-op{box-shadow:0 5px 0 rgba(15,23,42,.14),0 8px 14px rgba(15,23,42,.06)!important;transition:transform .12s,box-shadow .12s!important;font-size:clamp(1.05rem,1.9vw,1.35rem)}
.re-jp .re-kbd>.rejp2-op:hover{transform:translateY(-3px)}
.re-jp .re-kbd>.rejp2-op:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(15,23,42,.14)!important}
.re-jp .re-kbd>.rejp2-bien{animation:rejp2-salto .5s ease-out 1}
.re-jp .re-kbd>.rejp2-mal{animation:rejp2-tiembla .4s ease-in-out 1}
/* barra de progreso con estrella */
.re-jp .re-prog{height:12px!important;border-radius:99px;background:color-mix(in srgb,var(--rejp2) 14%,#eef1f6)!important;overflow:visible!important}
.re-jp .re-prog i{position:relative;display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--rejp2) 70%,#fff),var(--rejp2))!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.re-jp .re-prog i::after{content:"★";position:absolute;right:-11px;top:50%;transform:translateY(-52%);font-size:20px;line-height:1;color:#ffc61a;text-shadow:0 1px 0 #b58300,0 0 6px rgba(255,198,26,.7)}
/* estrellitas al acertar */
.rejp2-chispa{position:fixed;z-index:99999;pointer-events:none;font-size:22px;line-height:1;color:#ffc61a;text-shadow:0 1px 0 #b58300;animation:rejp2-chispa .8s ease-out forwards}
@keyframes rejp2-salto{0%{transform:scale(1)}35%{transform:scale(1.06) translateY(-4px)}100%{transform:none}}
@keyframes rejp2-tiembla{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes rejp2-chispa{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(40deg)}}
@media (prefers-reduced-motion:reduce){.re-jp .re-kbd>.rejp2-bien,.re-jp .re-kbd>.rejp2-mal,.rejp2-chispa{animation:none!important}.rejp2-chispa{display:none}}