/* La ruleta de premios: lo que comparten el panel y el overlay de OBS. */
.rd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rd-giro { transform-box: view-box; transform-origin: 0 0; will-change: transform; }
.rd-flecha { transform-box: fill-box; transform-origin: 50% 30%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55)); }
.rd-texto { font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: 0.01em; }
.rd-clavija { fill: #eef3ee; stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.5; }

/* Las lucecitas del aro: quietas, corren mientras gira y festejan al final. */
.rd-luz { fill: #ffe7a3; opacity: 0.3; }
.rd-girando .rd-luz { animation: rdCorre 1.1s linear infinite; animation-delay: calc(var(--i) * -39ms); }
.rd-revelado .rd-luz { animation: rdFiesta 520ms steps(1, end) 6; }
.rd-revelado .rd-luz:nth-child(even) { animation-delay: 260ms; }
@keyframes rdCorre { 0% { opacity: 1; } 18%, 100% { opacity: 0.22; } }
@keyframes rdFiesta { 0% { opacity: 1; } 50% { opacity: 0.18; } }

/* El resultado: el premio que salió queda prendido y el resto se apaga. */
.rd-seg { transition: opacity 420ms ease; }
.rd-revelado .rd-seg:not(.rd-gana) { opacity: 0.3; }
.rd-gana path, .rd-gana circle { stroke: #fff; stroke-width: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .rd-girando .rd-luz, .rd-revelado .rd-luz { animation: none; opacity: 0.8; }
}