/* Íconos de los valores (Manual gráfico → "Versión de iconos"):
   placa del color del valor con el ícono en blanco; sobre un fondo del color
   del valor, placa navy con el ícono en el color del valor.
   Incluye reacciones, burbujas, chispas, elenco y asomarse en el ingreso. */

.bex-slot{display:inline-flex;align-items:center;justify-content:center;position:relative}
/* La placa: cuadrada, del tamaño del lado menor del espacio */
.bex-slot .placa{display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:1/1;
  border-radius:24%;background:var(--pv);box-shadow:0 8px 20px rgba(20,10,60,.25);transform-origin:50% 60%;
  animation:icoIdle 3.2s ease-in-out infinite}
.bex-slot .placa-ico{display:block;width:66%;height:66%;background:#fff;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Sobre el fondo del valor: placa navy, ícono del color del valor */
.valor-top .bex-slot .placa{background:var(--navy)}
.valor-top .bex-slot .placa .placa-ico{background:var(--pv)}
/* Variantes chicas (encabezado de pregunta y lista de reglas) */
.placa.mini{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--pv);vertical-align:-6px;margin:-4px 7px -4px -4px}
.placa.mini .placa-ico{display:block;width:72%;height:72%;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.placa.lista{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--pv)}
.placa.lista .placa-ico{display:block;width:70%;height:70%;background:#fff;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* reposo: flota suave */
@keyframes icoIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* interludio / tarjetas */
.bex-inter{display:flex;flex-direction:column;align-items:center;margin:-4px 0 10px}
.bex-inter-img{width:104px;height:104px;display:flex}

/* acierto: salto con rebote */
.bex-slot.rx-win .bex-svg{animation:icoWin .8s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes icoWin{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-22px) scale(1.1) rotate(-6deg)}65%{transform:translateY(-4px) scale(1.02) rotate(4deg)}100%{transform:translateY(0) scale(1)}}
/* error: sacudida */
.bex-slot.rx-fail .bex-svg{animation:icoFail .5s ease 1}
@keyframes icoFail{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px) rotate(-4deg)}40%{transform:translateX(8px) rotate(3deg)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
/* entrada */
.bex-slot.rx-enter .bex-svg{animation:icoEnter .7s cubic-bezier(.22,1,.36,1) 1}
@keyframes icoEnter{0%{transform:translateY(50px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
/* saludo: se balancea */
.bex-slot.rx-wave .bex-svg{animation:icoWave .8s ease-in-out 1}
@keyframes icoWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}55%{transform:rotate(8deg)}80%{transform:rotate(-3deg)}}
/* giro */
.bex-slot.rx-spin .bex-svg{animation:icoSpin .7s ease 1}
@keyframes icoSpin{to{transform:rotateY(360deg)}}

/* halo del color del valor al acertar */
.bex-slot .bx-halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,var(--v,#fff),transparent 72%);opacity:0;pointer-events:none}
.bex-slot.rx-win .bx-halo{animation:haloFade 1s ease forwards}
@keyframes haloFade{0%{opacity:0}25%{opacity:.7}100%{opacity:0}}

/* burbuja de diálogo */
.bex-bubble2{position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%) scale(.9);background:#fff;color:var(--navy);font-family:'Open Sans',sans-serif;font-weight:700;font-size:.8rem;line-height:1.25;padding:7px 12px;border-radius:12px;box-shadow:0 6px 18px rgba(20,10,60,.28);opacity:0;transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:5;width:max-content;max-width:min(200px,70vw);text-align:center}
.bex-bubble2::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;border-bottom:0}
.bex-bubble2.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
.bex-bubble2.ok{color:#3C7A12}.bex-bubble2.bad{color:#A8324A}

/* chispas */
.bex-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.bex-fx .p{position:absolute;font-size:20px;opacity:0;will-change:transform,opacity}
@keyframes fxRise{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(var(--rot))}}

/* ===== Elenco: los 5 íconos en fila, flotando desfasados ===== */
.elenco{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.elenco .elenco-ico{flex:0 1 58px;aspect-ratio:1/1}
.elenco .elenco-ico .placa{animation-delay:calc(var(--i) * -.6s)}
.elenco .bex-bubble2{font-size:.72rem;max-width:104px;width:max-content}
.elenco .elenco-ico:first-child .bex-bubble2{left:62%}
.elenco .elenco-ico:last-child .bex-bubble2{left:38%}

/* ===== Ingreso: un ícono se asoma sobre el cuadro ===== */
.bex-peek{position:absolute;z-index:1;width:72px;height:72px;left:50%;top:-82px;transform:translateX(-50%);pointer-events:none;opacity:0}
.bex-peek .bex-bubble2{white-space:nowrap}
.bex-peek.peeking{animation:peek 3s ease-in-out 1}
@keyframes peek{
  0%{opacity:0;transform:translateX(-50%) translateY(70px)}
  15%{opacity:1;transform:translateX(-50%) translateY(0)}
  80%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(70px)}
}
.bex-slot:focus-visible{outline:3px solid var(--cian);outline-offset:4px;border-radius:24%}