/* ruleta.css — Ruleta diaria (modal + botón de la cabecera) */

/* ---- Botón en la cabecera ---- */
.rl-open{color:#f5b843;transition:transform .2s,box-shadow .2s,border-color .2s}
.rl-open:hover{transform:translateY(-1px);box-shadow:0 0 1.1rem rgba(245,184,67,.4);border-color:rgba(255,214,120,.6)}
.rl-open.is-ready svg{animation:rlWiggle 3.2s ease-in-out infinite;transform-origin:50% 55%}
.rl-dot{position:absolute;top:.15rem;right:.15rem;width:.7rem;height:.7rem;border-radius:50%;background:#ffd36b;border:2px solid #120d1e;box-shadow:0 0 0 0 rgba(255,211,107,.7);animation:rlPulse 1.8s infinite}
@keyframes rlWiggle{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-16deg)}84%{transform:rotate(14deg)}92%{transform:rotate(-8deg)}}
@keyframes rlPulse{0%{box-shadow:0 0 0 0 rgba(255,211,107,.7)}70%{box-shadow:0 0 0 .6rem rgba(255,211,107,0)}100%{box-shadow:0 0 0 0 rgba(255,211,107,0)}}
.hm-vipsaldo.rl-pop b{display:inline-block;animation:rlPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes rlPop{0%{transform:scale(1)}40%{transform:scale(1.5);color:#fff}100%{transform:scale(1)}}

/* ---- Modal ---- */
html.rl-lock{overflow:hidden}
.rl-root{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:.5rem}
.rl-root[hidden]{display:none}
.rl-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(60,28,120,.55),rgba(6,3,16,.9));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rlFade .3s ease both}
.rl-card{position:relative;width:min(94vw,500px);max-height:calc(100vh - 1rem);max-height:calc(100dvh - 1rem);overflow-y:auto;overflow-x:hidden;padding:1.1rem 1.1rem 1rem;text-align:center;color:#f4eeff;border-radius:1.5rem;background:radial-gradient(120% 80% at 50% 0%,#2b1a5e 0%,#170f33 55%,#0e0922 100%);border:1px solid rgba(255,214,120,.38);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1.5rem 4rem rgba(0,0,0,.6),0 0 4rem rgba(140,90,255,.25);animation:rlIn .5s cubic-bezier(.2,1.2,.3,1) both;scrollbar-width:none}
.rl-card::-webkit-scrollbar{display:none}
.rl-card.is-shake{animation:rlShake .6s ease both}
@keyframes rlFade{from{opacity:0}to{opacity:1}}
@keyframes rlIn{0%{opacity:0;transform:translateY(1.5rem) scale(.9)}100%{opacity:1;transform:none}}
@keyframes rlShake{0%,100%{transform:translate(0)}15%{transform:translate(-6px,3px)}30%{transform:translate(6px,-3px)}45%{transform:translate(-5px,-2px)}60%{transform:translate(4px,3px)}80%{transform:translate(-2px,1px)}}

.rl-x,.rl-mute{position:absolute;top:.7rem;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#f4eeff;font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s;z-index:3}
.rl-x{right:.7rem}.rl-mute{left:.7rem}
.rl-x:hover,.rl-mute:hover{background:rgba(255,255,255,.16);transform:scale(1.06)}
.rl-x:disabled{opacity:.35;cursor:not-allowed;transform:none}

.rl-kicker{margin:.2rem 0 0;font:700 .72rem/1 var(--display,'Sora',system-ui,sans-serif);letter-spacing:.28em;text-transform:uppercase;color:#f5b843}
.rl-title{margin:.35rem 0 .6rem;font:800 1.55rem/1.1 'Cinzel',var(--display,serif);letter-spacing:.04em;background:linear-gradient(180deg,#fff6d6,#f5b843 70%,#d9911a);-webkit-background-clip:text;background-clip:text;color:transparent}

.rl-streak{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:.4rem}
.rl-pips{display:flex;gap:.35rem}
.rl-pips i{display:grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .2rem;border-radius:.55rem;font:800 .68rem/1 var(--display,'Sora',sans-serif);font-style:normal;color:#a99bd6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.rl-pips i.on{color:#2a1a00;background:linear-gradient(135deg,#ffe29a,#f5b843);border-color:rgba(255,214,120,.8);box-shadow:0 0 .8rem rgba(245,184,67,.45)}
.rl-pips i.next{color:#ffd36b;border-color:#ffd36b;animation:rlPulseBox 1.6s infinite}
.rl-pips i:last-child{min-width:2.5rem}
@keyframes rlPulseBox{0%,100%{box-shadow:0 0 0 0 rgba(255,211,107,.55)}60%{box-shadow:0 0 0 .4rem rgba(255,211,107,0)}}
#rlRacha{font:600 .8rem/1.3 var(--display,'Sora',sans-serif);color:#cdbff2}

.rl-stage{position:relative;display:grid;place-items:center;margin:.2rem auto .3rem}
.rl-stage::before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(160,110,255,.35),transparent 68%);filter:blur(14px);animation:rlBreath 3.4s ease-in-out infinite}
.rl-stage canvas{position:relative;max-width:100%;touch-action:manipulation}
@keyframes rlBreath{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}

.rl-res{min-height:4.6rem;display:grid;place-content:center;gap:.2rem;margin:.2rem 0}
.rl-res .rl-big{font:800 2rem/1.1 var(--display,'Sora',sans-serif);color:#ffe29a;text-shadow:0 0 1.4rem rgba(245,184,67,.65);animation:rlBounce .7s cubic-bezier(.2,1.7,.4,1) both}
.rl-res .rl-big b{font-size:2.6rem;color:#fff}
.rl-res .rl-sub{font:700 .9rem/1.3 var(--display,'Sora',sans-serif);color:#f5b843;letter-spacing:.03em}
.rl-res .rl-sub2{font:500 .8rem/1.3 var(--display,'Sora',sans-serif);color:#cdbff2}
.rl-res.is-jackpot .rl-big{animation:rlBounce .7s cubic-bezier(.2,1.7,.4,1) both,rlGlow 1s ease-in-out .7s infinite alternate}
@keyframes rlBounce{0%{opacity:0;transform:scale(.3) translateY(1rem)}100%{opacity:1;transform:none}}
@keyframes rlGlow{from{text-shadow:0 0 1rem rgba(245,184,67,.6)}to{text-shadow:0 0 2.4rem rgba(255,230,140,1),0 0 .6rem #fff}}

.rl-msg{min-height:1.2rem;margin:.1rem 0 .4rem;font:600 .85rem/1.3 var(--display,'Sora',sans-serif);color:#ffb4c4}
.rl-msg a{color:#ffd36b;text-decoration:underline}

.rl-spin{position:relative;overflow:hidden;min-width:min(78%,16rem);height:3.2rem;padding:0 1.6rem;border:1px solid rgba(255,214,120,.8);border-radius:62.4375rem;font:800 1.05rem/1 var(--display,'Sora',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#2a1a00;background:linear-gradient(135deg,#ffe29a,#f5b843 55%,#e79a1c);box-shadow:0 .4rem 1.4rem rgba(245,184,67,.45),inset 0 1px 0 rgba(255,255,255,.6);cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s}
.rl-spin::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);animation:rlShine 3s ease-in-out infinite}
.rl-spin:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 .6rem 1.8rem rgba(245,184,67,.65),inset 0 1px 0 rgba(255,255,255,.6)}
.rl-spin:active:not(:disabled){transform:scale(.97)}
.rl-spin:disabled{cursor:not-allowed;filter:grayscale(.85) brightness(.7);box-shadow:none}
.rl-spin:disabled::after,.rl-spin.is-busy::after{animation:none}
.rl-spin.is-busy{filter:brightness(.9);cursor:progress}
@keyframes rlShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.rl-count{min-height:1.2rem;margin:.55rem 0 0;font:700 .9rem/1.2 var(--display,'Sora',sans-serif);color:#ffd36b;font-variant-numeric:tabular-nums}
.rl-prizes{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin:.7rem 0 .2rem;padding:0;list-style:none}
.rl-prizes li{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .55rem .25rem .35rem;border-radius:62.4375rem;font:700 .74rem/1 var(--display,'Sora',sans-serif);color:#e8defc;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.rl-prizes li.top{color:#2a1a00;background:linear-gradient(135deg,#ffe29a,#f5b843);border-color:rgba(255,214,120,.8)}
.rl-prizes img{width:.95rem;height:.95rem;object-fit:contain}
.rl-note{margin:.5rem 0 0;font:500 .72rem/1.35 var(--display,'Sora',sans-serif);color:#9d8fc8}

.rl-fx{position:absolute;left:0;top:0;pointer-events:none;z-index:4}

@media(max-width:480px){
  .rl-card{padding:1rem .8rem .9rem;border-radius:1.25rem}
  .rl-title{font-size:1.3rem}
  .rl-res .rl-big{font-size:1.6rem}.rl-res .rl-big b{font-size:2.2rem}
  .rl-pips i{min-width:1.45rem;height:1.55rem;font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){
  .rl-open.is-ready svg,.rl-dot,.rl-stage::before,.rl-spin::after,.rl-pips i.next{animation:none}
  .rl-card,.rl-backdrop{animation:none}
}