/* MIKA · Ruleta de reencarnación. Vive en la pila de toasts de la izquierda (#toast),
   así que respeta el tope de 4 visibles y espera su turno en la cola como cualquier toast.
   pointer-events:none: NUNCA bloquea clics. Se carga después de tabs.css. */
.whtoast{--wc:#f472b6;position:relative;z-index:1;width:min(280px,calc(100vw - 28px));
  display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;padding:12px 14px 16px;border-radius:18px;pointer-events:none;
  background:linear-gradient(160deg,rgba(61,10,68,.96),rgba(26,5,24,.97));border:2px solid var(--wc);
  box-shadow:0 12px 36px rgba(0,0,0,.55),0 0 28px color-mix(in srgb,var(--wc) 45%,transparent);
  opacity:0;transform:translateX(-120%);
  transition:transform .4s cubic-bezier(.2,1.15,.35,1),opacity .3s}
.whtoast.show{opacity:1;transform:translateX(0)}
.whtoast.done{box-shadow:0 12px 36px rgba(0,0,0,.55),0 0 46px color-mix(in srgb,var(--wc) 80%,transparent)}
.wt-stage{width:104px;height:104px}
.wt-stage svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.wt-info{min-width:0}
.wt-top{font-size:10.5px;font-weight:800;letter-spacing:.4px;color:var(--dim)}
.wt-name{margin-top:2px;font-family:'Fredoka','Nunito',sans-serif;font-weight:700;font-size:17px;line-height:1.15;color:#fff}
.wt-gain{margin-top:3px;font-size:11.5px;font-weight:800;color:#ffe29a}
.wt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.wt-tags span{padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:800;border:1px solid}
.wt-tags .gold{color:#ffe29a;border-color:rgba(251,191,36,.6);background:rgba(251,191,36,.12)}
.wt-tags .keep{color:#86efac;border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.1)}
.wt-tags .lose{color:#fda4af;border-color:rgba(251,113,133,.5);background:rgba(251,113,133,.1)}
.wt-bar{position:absolute;left:14px;right:14px;bottom:6px;height:4px;border-radius:9px;background:rgba(0,0,0,.5);overflow:hidden}
.wt-bar i{display:block;width:100%;height:100%;border-radius:9px;background:linear-gradient(90deg,#ec4899,#fbbf24);transform-origin:left}

/* la ruleta en miniatura */
/* la ruleta en miniatura: el icono es un <use> de icons.js (antes era un emoji en <text>) */
.wh-ico{fill:#fff}
.wh-sl{transition:opacity .5s,filter .5s}
.whtoast.done .wh-sl{opacity:.3}
.whtoast.done .wh-sl.win{opacity:1;filter:brightness(1.25) drop-shadow(0 0 8px #fff)}
.wh-bulbs{filter:drop-shadow(0 0 4px #ffd978)}
.wh-bulb{fill:#fff6cf;opacity:.3;animation:whBulb 1.3s ease-in-out infinite;animation-delay:calc(var(--i)*-.054s)}
.whtoast.spinning .wh-bulb{animation-duration:.4s}
@keyframes whBulb{50%{opacity:1}}
.wh-heart{transform-box:fill-box;transform-origin:center;animation:whBeat 1.1s ease-in-out infinite}
@keyframes whBeat{40%{transform:scale(1.14)}}

/* popup de reencarnar: notas pequeñas bajo las líneas que dependen de la ruleta */
.pm-col li small{display:block;opacity:.7;font-size:10.5px}

/* móvil: más compacta (y como no recibe clics, aunque se solape con el corazón sigue sin estorbar) */
@media (max-width:520px){.whtoast{grid-template-columns:76px 1fr;gap:9px;padding:9px 11px 14px}.wt-stage{width:76px;height:76px}.wt-name{font-size:15px}}
@media (prefers-reduced-motion:reduce){.wh-bulb,.wh-heart{animation:none}.wh-bulb{opacity:.8}.whtoast{transition:opacity .2s}}