/* La ruleta girando de la ruleta de recursos, aparte para poder usarla en dos
   sitios: la página del Ruleton y el widget que se mete en OBS. Lo mismo que se
   hizo con la tragaperras (css/tragaperras.css), y por lo mismo: el widget solo
   sabía enseñar la tragaperras, aunque el dueño tuviera puesta la ruleta.

   El sitio donde se coloca (fijo en el centro de la página, o dentro del panel
   del widget) lo pone cada uno; aquí va solo la ruleta. El giro NO está aquí: lo
   mueve js/rueda.js cuadro a cuadro, porque tiene que saber dónde se para.

   Las variables del tema llevan valor de respaldo, porque los widgets no cargan
   el CSS de la página: --anim-scale sale del tamaño que haya puesto el dueño,
   --wheel-image de la imagen que haya subido y --accent de su color. */

.roulette-wheel{position:relative;width:calc(340px * var(--anim-scale, 1));height:calc(340px * var(--anim-scale, 1));border-radius:50%;background:radial-gradient(circle at center, rgba(255,255,255,0.16) 0 18%, rgba(255,255,255,0.03) 19% 24%, transparent 25%), conic-gradient(#ff6b8a 0 16%, #ffd166 16% 32%, #6ee7b7 32% 48%, #60a5fa 48% 64%, #c084fc 64% 80%, #f472b6 80% 100%);border:calc(16px * var(--anim-scale, 1)) solid rgba(255,255,255,0.18);box-shadow:0 28px 70px rgba(0,0,0,0.6), inset 0 0 35px rgba(255,255,255,0.08);will-change:transform}
/* Con imagen personalizada se ocultan el degradado y los adornos del centro. */
.roulette-wheel.custom{background:var(--wheel-image, none) center center / cover no-repeat, #0b1220;border-color:rgba(255,255,255,0.35)}
.roulette-wheel.custom::before, .roulette-wheel.custom::after{display:none}
.roulette-wheel::before{content:'';position:absolute;inset:calc(46px * var(--anim-scale, 1));border-radius:50%;background:radial-gradient(circle at center, rgba(7,16,34,0.35) 0%, rgba(7,16,34,0.8) 58%, rgba(7,16,34,1) 100%);border:4px solid rgba(255,255,255,0.2)}
.roulette-wheel::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(42px * var(--anim-scale, 1));height:calc(42px * var(--anim-scale, 1));border-radius:50%;background:linear-gradient(135deg,#fff,#d7fef0);box-shadow:0 0 0 14px rgba(110,231,183,0.18), 0 0 26px rgba(110,231,183,0.7)}
/* Al pararse, un destello alrededor: ya ha caído. */
.roulette-wheel.parada{animation:ruedaDestello 1s ease-out}
@keyframes ruedaDestello{0%{box-shadow:0 28px 70px rgba(0,0,0,0.6), 0 0 0 0 rgba(110,231,183,0.75)}100%{box-shadow:0 28px 70px rgba(0,0,0,0.6), 0 0 0 calc(40px * var(--anim-scale, 1)) rgba(110,231,183,0)}}

/* La flecha, quieta encima del recurso de arriba. Da un golpecito cada vez que
   pasa uno por debajo (lo lanza js/rueda.js). */
.roulette-pin{position:absolute;left:50%;top:calc(50% - 272px * var(--anim-scale, 1) - 36px);transform:translateX(-50%);transform-origin:50% 0;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:34px solid #fdf2f8;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5)) drop-shadow(0 0 8px rgba(255,255,255,0.35));z-index:4;pointer-events:none}

.roulette-items{position:absolute;left:50%;top:50%;width:calc(520px * var(--anim-scale, 1));height:calc(520px * var(--anim-scale, 1));transform:translate(-50%,-50%);pointer-events:none}
.roulette-item{position:absolute;left:50%;top:50%;width:calc(52px * var(--anim-scale, 1));height:calc(52px * var(--anim-scale, 1));border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,0.7);background:rgba(255,255,255,0.06);box-shadow:0 8px 16px rgba(0,0,0,0.35);transform:translate(-50%, -50%);}
.roulette-item.winner{border-color:var(--accent, #6ee7b7);box-shadow:0 0 0 3px rgba(110,231,183,0.35), 0 0 22px rgba(110,231,183,0.7);z-index:2;animation:winnerPop .5s cubic-bezier(.2,1.6,.4,1) forwards}
/* El que ha caído debajo de la flecha: el más grande y el que más brilla. */
.roulette-item.winner.elegido{z-index:3;box-shadow:0 0 0 4px var(--accent, #6ee7b7), 0 0 34px rgba(110,231,183,0.95);animation:elegidoPop .6s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes winnerPop{0%{transform:translate(-50%,-50%) scale(.6)}60%{transform:translate(-50%,-50%) scale(1.45)}100%{transform:translate(-50%,-50%) scale(1.25)}}
@keyframes elegidoPop{0%{transform:translate(-50%,-50%) scale(.8)}55%{transform:translate(-50%,-50%) scale(1.9)}100%{transform:translate(-50%,-50%) scale(1.55)}}
.roulette-item img{width:100%;height:100%;object-fit:cover;display:block;background:#101827;pointer-events:none;opacity:1;transition:opacity .09s linear}