/* Ruleta diaria (wheel, spec 8.9). Raíz: .screen.ui.s-wheel. La rueda crece con el alto hasta ×1,15;
   la ficha se queda igual y se centra. */

.s-wheel .wheel-body { position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 12px; }
.s-wheel .wheel-col { --wk: min(var(--art-k), 1.15); position: relative; flex: none; }
.s-wheel .wheel-col .halo { --gc: rgba(255,210,120,.22); left: 50%; top: 50%; width: calc(420px * var(--wk)); height: calc(420px * var(--wk)); transform: translate(-50%, -50%); }

/* ---- Rueda ---------------------------------------------------------------------------------- */
.s-wheel .wheel-wrap { position: relative; width: calc(300px * var(--wk)); height: calc(300px * var(--wk)); }
.s-wheel .wheel-wrap .wimg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); }
.s-wheel .wheel-wrap .ptr { position: absolute; left: 50%; top: -14px; width: 40px; height: 46px; margin-left: -20px; z-index: 2; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.s-wheel .wheel-wrap .ptr svg { display: block; }
/* Botón central: dorado, con «GIRAR» en tinta de oro (sin el brillo ni el contorno de .btn) */
.s-wheel .wheel-wrap .hub {
  --edge: #8a4300; position: absolute; left: 37%; top: 37%; width: 26%; height: 26%; padding: 0; border-radius: 50%; z-index: 3;
  font-size: 18px; letter-spacing: .6px; color: var(--gold-ink); text-shadow: 0 1px 0 rgba(255,255,255,.45);
  background: radial-gradient(circle at 40% 30%, #fff6c0, #ffc81f 55%, #c07a00);
  box-shadow: inset 0 -3px 6px rgba(120,60,0,.35), 0 0 0 5px #5a3a00, 0 0 0 7px rgba(255,211,77,.35), 0 6px 12px rgba(0,0,0,.55);
}
.s-wheel .wheel-wrap .hub::before { display: none; }
.s-wheel .wheel-wrap .hub:active { box-shadow: inset 0 -3px 6px rgba(120,60,0,.35), 0 0 0 5px #5a3a00, 0 0 0 7px rgba(255,211,77,.35), 0 3px 6px rgba(0,0,0,.55); }
.s-wheel .wheel-wrap .hub.busy { pointer-events: none; }

/* Bombillas que parpadean: dos grupos alternos; se anima la opacidad del grupo (la sombra es fija) */
.s-wheel .bulbs, .s-wheel .bset { position: absolute; inset: 0; pointer-events: none; }
.s-wheel .bset { animation: blink 1s steps(1) infinite; }
.s-wheel .bset.even { animation-delay: .5s; }
.s-wheel .bulbs i { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff6c0; box-shadow: 0 0 10px 3px rgba(255,220,90,.9); }
.s-wheel .wheel-wrap.spinning .bset { animation-duration: .25s; }
.s-wheel .wheel-wrap.spinning .bset.even { animation-delay: .125s; }
@keyframes blink { 50% { opacity: .3; } }
.s-wheel .wheel-wrap.spinning .ptr { animation: ptr-tick .11s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ptr-tick { 50% { transform: rotate(-14deg); } }
.s-wheel .win-glow { position: absolute; left: 50%; top: 14%; width: 150px; height: 150px; margin: -75px; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,160,.9), rgba(255,240,160,0) 65%); animation: flash .9s ease-out forwards; pointer-events: none; z-index: 1; }

/* ---- Ficha ---------------------------------------------------------------------------------- */
.s-wheel .wheel-card { flex: none; width: 340px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.s-wheel .wdesc { margin: -2px 0 0; }
.s-wheel .wstatus { max-width: 100%; }
.s-wheel .btns { display: flex; gap: 12px; margin-top: 2px; }
.s-wheel .btns .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
.s-wheel .wprizes { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.s-wheel .prz-row { display: flex; gap: 8px; }
.s-wheel .prz { flex: 1 1 0; min-width: 0; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.s-wheel .prz img { width: 24px; height: 24px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.s-wheel .prz .ty-num { font-size: 16px; color: #fff; text-transform: uppercase; }
/* el premio gordo: filo de oro y cifra en oro */
.s-wheel .prz.jackpot { box-shadow: inset 0 2px 6px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,211,77,.55), 0 1px 0 rgba(255,255,255,.05); }
.s-wheel .prz.jackpot .ty-num { background: linear-gradient(180deg, #fff8d8 0%, #ffe07a 45%, #f2b126 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(70,36,0,.75)); }

@media (prefers-reduced-motion: reduce) {
  .s-wheel .bset { animation: none; }
}