#rltBox{--blue:#4f8cf0;--gold:#f2b705;--line:rgba(255,255,255,.10);--ink:#eaf2ff; --c-comum:#7c8590;--c-incomum:#4f8cf0;--c-raro:#9b6be0;--c-epico:#e0559f;--c-lendario:#f2b705; color:#eef2f8;font-family:'Chakra Petch','Barlow',system-ui,sans-serif;position:relative; min-width:0;max-width:100%;overflow:hidden} #rltBox *{box-sizing:border-box;min-width:0} #rltBox .full,#rltBox .pad,#rltBox .case,#rltBox .viewport{max-width:100%} #rltBox .ic{background:none;padding:0} .pnl-porta{cursor:pointer;position:relative;overflow:hidden; background:linear-gradient(90deg,rgba(10,11,14,.94) 24%,rgba(10,11,14,.55) 62%,rgba(10,11,14,.72)), url(/assets/roleta/bg/painel-card.png) right center/cover no-repeat #0a0b0e; transition:transform .18s,box-shadow .2s,background .2s} .pnl-porta:hover{transform:translateY(-2px); box-shadow:0 18px 40px -18px #000,inset 0 0 0 1px rgba(79,140,240,.42)} .pnl-porta:focus-visible{outline:2px solid #4f8cf0;outline-offset:2px} .pnl-porta:hover .btn{background:rgba(255,255,255,.1);color:#fff} #rltBox .mini .mi-ic{width:50px;height:50px;flex:none;background:url(/assets/roleta/ticket.webp) center/contain no-repeat;filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))} #rltBox .mini .mi-tx{flex:1} #rltBox .mini .mi-tx h3{font-family:'Oxanium';font-weight:800;font-size:19px;letter-spacing:.02em;text-transform:uppercase;color:#f3f7fd} #rltBox .mini .mi-tx p{color:#9aa6b6;font-size:12.5px;margin-top:2px} #rltBox .mini .mi-tk{display:flex;align-items:center;gap:8px;font-family:'Oxanium';font-weight:800;font-size:16px;color:#dfe7f2} #rltBox .mini .mi-tk img{width:24px;height:24px} #rltBox .mini .mi-tk b{color:#fff} #rltBox .mini .mi-go{font-family:'Chakra Petch';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#eaf2ff; background:linear-gradient(180deg,rgba(72,136,255,.44),rgba(19,52,124,.4));box-shadow:inset 0 0 0 1px #7cbcff73;padding:9px 16px;border-radius:2px;white-space:nowrap} #v-roleta .rlt-banner .hlede{margin-left:auto;margin-right:auto;max-width:56ch} #rltBox.open .mini{display:none} #rltBox.open .full{display:block} #rltBox .top .abas .pool.active .pc{color:#fff; background:color-mix(in srgb,var(--pa,#4f8cf0) 20%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa,#4f8cf0) 60%,transparent)} #rltBox .top .abas .pool.active{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa,#4f8cf0) 85%,transparent)} #rltBox .top .abas .pool:not(.active){opacity:.62} #rltBox .top .abas .pool:not(.active):hover{opacity:1} #rltBox .top .saldo{display:flex;align-items:center;gap:8px;flex:none} #rltBox .top .cnt{flex:none;white-space:nowrap;margin-left:0;font-family:'Oxanium';font-weight:800;font-size:15px;color:#dfe7f2}#rltBox .top .cnt b{color:#fff} #rltBox .top .cnt small{color:#9aa6b6;font-weight:600} #rltBox .pools{display:flex;gap:12px;justify-content:center;flex-wrap:wrap; margin:16px 0 4px} #rltBox .pool.active{background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa,#4f8cf0) 62%,transparent),0 0 26px -10px var(--pa,#4f8cf0)} #rltBox .pool.active .pico{opacity:1} #rltBox .pool .ptx{display:flex;flex-direction:column;gap:3px;min-width:0} #rltBox .pool.active .pn{color:#eef2f8} #rltBox .pool.active .pdot{background:var(--pa,#4f8cf0);box-shadow:0 0 8px -1px var(--pa,#4f8cf0)} #rltBox .odd{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase} #rltBox .odd i{width:7px;height:7px;border-radius:999px;background:var(--oc,#7c8590);box-shadow:0 0 8px -1px var(--oc,#7c8590)} #rltBox .odd b{font-weight:700;color:#aeb8c6} #rltBox .odd em{font-style:normal;font-weight:800;color:var(--oc,#cfe0ff);font-variant-numeric:tabular-nums} #rltBox .odd.r-comum{--oc:#7c8590}#rltBox .odd.r-incomum{--oc:#4f8cf0}#rltBox .odd.r-raro{--oc:#9b6be0} #rltBox .odd.r-epico{--oc:#e0559f}#rltBox .odd.r-lendario{--oc:#f2b705} #rltBox .case{position:relative;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line),inset 0 0 70px rgba(0,0,0,.6); min-height:clamp(286px,33vh,360px);display:grid;align-content:center; --wc:#6b7480; background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.24)), url(/assets/roleta/bg/palco-carrossel.png) center/cover no-repeat #06070a} #rltBox .case::before,#rltBox .case::after{content:"";position:absolute;top:0;bottom:0;width:210px;z-index:7;pointer-events:none} #rltBox .case::before{left:0;background:linear-gradient(90deg,#000 22%,transparent)} #rltBox .case::after{right:0;background:linear-gradient(270deg,#000 22%,transparent)} #rltBox .needle{position:absolute;top:0;left:50%;transform:translateX(-50%); width:76px;height:108px;z-index:8; background:url(/assets/roleta/heroes-dark-arcane-final/carrossel/pointer/pointer-cold.png) center/contain no-repeat; filter:saturate(.28) brightness(1.12) drop-shadow(0 3px 9px rgba(0,0,0,.95)); transition:opacity .3s ease-out} #rltBox .case.premiado .needle{opacity:0} #rltBox .mark{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(184,196,214,.85),rgba(184,196,214,.14) 15%,transparent 19%,transparent 81%,rgba(184,196,214,.14) 85%,transparent); box-shadow:0 0 22px 5px rgba(184,196,214,.22);opacity:.42;transition:opacity .6s} #rltBox .case.premiado .mark{opacity:0} #rltBox .rlt-fio{position:absolute;z-index:8;pointer-events:none; left:calc(50% + var(--fx-fio-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-fio-y,0px)); width:var(--fx-fio-w,1px); height:calc(var(--cardh,322.6px) * var(--fx-fio-h,1)); transform:translate(-50%,-50%); opacity:calc(.19 * var(--fx-fio-o,1));transition:opacity .6s; background:linear-gradient(180deg,transparent,rgba(255,255,255,.62) 9%,rgba(255,255,255,.3) 34%, rgba(255,255,255,.3) 66%,rgba(255,255,255,.62) 91%,transparent)} #rltBox .case.premiado .rlt-fio{opacity:0} #rltBox .rlt-spill{position:absolute; left:calc(50% + var(--cardx,0px) + var(--fx-spill-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-spill-y,0px)); width:var(--fx-spill-w,78%);height:var(--fx-spill-h,118%);transform:translate(-50%,-50%); z-index:1;pointer-events:none;opacity:.1;transition:opacity .6s; background:radial-gradient(ellipse closest-side,color-mix(in srgb,var(--wc,#4f8cf0) 40%,transparent),transparent 72%)} #rltBox .case.premiado .rlt-spill{opacity:calc(.8 * var(--fx-spill-o,1))} #rltBox .rlt-beam{display:none} #rltBox .rlt-portal,#rltBox .rlt-runas,#rltBox .rlt-godrays,#rltBox .rlt-assin{ position:absolute;pointer-events:none;opacity:0} #rltBox .rlt-portal,#rltBox .rlt-godrays,#rltBox .rlt-assin{ mix-blend-mode:screen;background-color:var(--wc,#4f8cf0); background-repeat:no-repeat;background-position:center;background-size:contain; background-blend-mode:multiply} #rltBox .rlt-portal {width:var(--fx-portal-w,900px);height:var(--fx-portal-h,338px);z-index:1; left:calc(50% + var(--cardx,0px) + var(--fx-portal-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-portal-y,0px)); background-image:url(/assets/roleta/fx-aureola.png)} #rltBox .rlt-godrays{display:none} #rltBox .rlt-assin {width:var(--fx-assin-w,900px);height:var(--fx-assin-h,338px);z-index:1; left:calc(50% + var(--cardx,0px) + var(--fx-assin-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-assin-y,0px)); background-image:var(--assin)} #rltBox .rlt-coroa{position:absolute; left:calc(50% + var(--cardx,0px) + var(--fx-coroa-x,0px)); top:var(--fx-coroa-y,0px); width:var(--fx-coroa-w,560px);height:var(--fx-coroa-h,187px);z-index:1; pointer-events:none;opacity:0;mix-blend-mode:screen; background:url(/assets/roleta/fx-coroa.png) center/contain no-repeat; background-color:var(--wc,#4f8cf0);background-blend-mode:multiply} #rltBox .rlt-runas{width:var(--fx-runas-w,320px);height:var(--fx-runas-h,320px);z-index:1; left:calc(50% + var(--cardx,0px) + var(--fx-runas-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-runas-y,0px)); background:var(--runas) center/contain no-repeat} #rltBox .rlt-godrays{left:calc(50% + var(--cardx,0px));top:calc(50% + var(--cardy,0px))} #rltBox .case.r-comum .rlt-runas{--runas:url(/assets/roleta/fx-runas-comum.webp)} #rltBox .case.r-incomum .rlt-runas{--runas:url(/assets/roleta/fx-runas-incomum.webp)} #rltBox .case.r-raro .rlt-runas{--runas:url(/assets/roleta/fx-runas-raro.webp)} #rltBox .case.r-epico .rlt-runas{--runas:url(/assets/roleta/fx-runas-epico.webp)} #rltBox .case.r-lendario .rlt-runas{--runas:url(/assets/roleta/fx-runas-lendario.webp)} @keyframes rltPortalIn{ 0% {opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(0deg)} 8% {opacity:calc(.85 * var(--fx-portal-o,1)); transform:translate(-50%,-50%) scale(1.02) rotate(4deg)} 35% {opacity:calc(.85 * var(--fx-portal-o,1)); transform:translate(-50%,-50%) scale(1.08) rotate(10deg)} 65% {opacity:0; transform:translate(-50%,-50%) scale(1.22) rotate(20deg)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.22) rotate(20deg)}} @keyframes rltRaiosIn{ 0% {opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-12deg)} 8% {opacity:calc(.6 * var(--fx-godrays-o,1)); transform:translate(-50%,-50%) scale(1) rotate(0deg)} 35% {opacity:calc(.6 * var(--fx-godrays-o,1)); transform:translate(-50%,-50%) scale(1.1) rotate(6deg)} 65% {opacity:0; transform:translate(-50%,-50%) scale(1.3) rotate(16deg)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.3) rotate(16deg)}} @keyframes rltRunasIn{ 0% {opacity:0; transform:translate(-50%,-50%) scale(.72) rotate(-30deg)} 8% {opacity:calc(.9 * var(--fx-runas-o,1)); transform:translate(-50%,-50%) scale(1) rotate(0deg)} 35% {opacity:calc(.9 * var(--fx-runas-o,1)); transform:translate(-50%,-50%) scale(1.02) rotate(24deg)} 65% {opacity:0; transform:translate(-50%,-50%) scale(1.08) rotate(50deg)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.08) rotate(50deg)}} @keyframes rltAssinIn{ 0% {opacity:0; transform:translate(-50%,-50%) scale(.28) rotate(-8deg)} 8% {opacity:calc(1 * var(--fx-assin-o,1)); transform:translate(-50%,-50%) scale(1.04) rotate(0deg)} 32% {opacity:calc(1 * var(--fx-assin-o,1)); transform:translate(-50%,-50%) scale(1.1) rotate(4deg)} 62% {opacity:0; transform:translate(-50%,-50%) scale(1.3) rotate(10deg)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.3) rotate(10deg)}} @keyframes rltCoroaIn{ 0% {opacity:0; transform:translateX(-50%) translateY(-26px) scale(.88)} 8% {opacity:calc(.92 * var(--fx-coroa-o,1)); transform:translateX(-50%) translateY(0) scale(1)} 35% {opacity:calc(.92 * var(--fx-coroa-o,1)); transform:translateX(-50%) translateY(-1px) scale(1.02)} 65% {opacity:0; transform:translateX(-50%) translateY(-8px) scale(1.1)} 100%{opacity:0; transform:translateX(-50%) translateY(-8px) scale(1.1)}} #rltBox .case.revelou .rlt-assin{animation:rltAssinIn calc(var(--fxdur,1.2s) * var(--fx-assin-d,1)) cubic-bezier(.16,.8,.3,1) both} #rltBox .case.revelou.r-raro .rlt-portal, #rltBox .case.revelou.r-epico .rlt-portal, #rltBox .case.revelou.r-lendario .rlt-portal{animation:rltPortalIn calc(var(--fxdur,1.2s) * var(--fx-portal-d,1)) cubic-bezier(.16,.8,.3,1) both} #rltBox .case.revelou.r-raro .rlt-runas, #rltBox .case.revelou.r-epico .rlt-runas, #rltBox .case.revelou.r-lendario .rlt-runas{animation:rltRunasIn calc(var(--fxdur,1.2s) * var(--fx-runas-d,1)) cubic-bezier(.16,.8,.3,1) both} #rltBox .case.revelou.r-epico .rlt-godrays, #rltBox .case.revelou.r-lendario .rlt-godrays{animation:rltRaiosIn calc(var(--fxdur,1.2s) * var(--fx-godrays-d,1)) cubic-bezier(.16,.8,.3,1) both} #rltBox .case.revelou.r-lendario .rlt-coroa{animation:rltCoroaIn calc(var(--fxdur,1.2s) * var(--fx-coroa-d,1)) cubic-bezier(.16,.8,.3,1) both} @keyframes rltRedFade{ 0% {opacity:0} 14% {opacity:var(--o,.9)} 64% {opacity:var(--o,.9)} 100%{opacity:0}} @media (prefers-reduced-motion:reduce){ #rltBox .rlt-portal,#rltBox .rlt-runas,#rltBox .rlt-godrays,#rltBox .rlt-assin{ animation:none!important;transform:translate(-50%,-50%)} #rltBox .rlt-coroa{animation:none!important;transform:translateX(-50%)} #rltBox .case.revelou .rlt-assin{--o:.95;animation:rltRedFade var(--fxdur,1.2s) ease-out both!important} #rltBox .case.revelou.r-raro .rlt-portal,#rltBox .case.revelou.r-epico .rlt-portal, #rltBox .case.revelou.r-lendario .rlt-portal{--o:.7;animation:rltRedFade var(--fxdur,1.2s) ease-out both!important} #rltBox .case.revelou.r-raro .rlt-runas,#rltBox .case.revelou.r-epico .rlt-runas, #rltBox .case.revelou.r-lendario .rlt-runas{--o:.8;animation:rltRedFade calc(var(--fxdur,1.2s) * 1.15) ease-out both!important} #rltBox .case.revelou.r-epico .rlt-godrays, #rltBox .case.revelou.r-lendario .rlt-godrays{--o:.5;animation:rltRedFade var(--fxdur,1.2s) ease-out both!important} #rltBox .case.revelou.r-lendario .rlt-coroa{--o:.85;animation:rltRedFade calc(var(--fxdur,1.2s) * 1.1) ease-out both!important} } @keyframes rltTremor{ 0% {transform:translate(0,0)} 12% {transform:translate(calc(var(--shk,4px) * -1),calc(var(--shk,4px) * .55))} 26% {transform:translate(calc(var(--shk,4px) * .78),calc(var(--shk,4px) * -.42))} 40% {transform:translate(calc(var(--shk,4px) * -.55),calc(var(--shk,4px) * -.28))} 56% {transform:translate(calc(var(--shk,4px) * .34),calc(var(--shk,4px) * .24))} 74% {transform:translate(calc(var(--shk,4px) * -.16),0)} 100%{transform:translate(0,0)}} #rltBox .case.revelou .viewport{animation:rltTremor .46s cubic-bezier(.2,.7,.3,1) both} #rltBox .rlt-assin::before,#rltBox .rlt-portal::before{ content:"";position:absolute;inset:-14%;pointer-events:none; background:inherit;background-size:contain;background-position:center; background-color:var(--wc,#4f8cf0);background-blend-mode:multiply; filter:blur(11px) saturate(1.15);opacity:.32;mix-blend-mode:screen; animation:rltBloom var(--fxdur,1.2s) cubic-bezier(.16,.8,.3,1) both} @keyframes rltBloom{ 0% {transform:scale(.55) rotate(6deg); opacity:0} 8% {transform:scale(1.06) rotate(0deg); opacity:.7} 62% {transform:scale(1.4) rotate(-8deg); opacity:0} 100%{transform:scale(1.4) rotate(-8deg); opacity:0}} #rltBox .rlt-clarao{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; background:radial-gradient(circle at calc(50% + var(--cardx,0px) + var(--fx-clarao-x,0px)) calc(50% + var(--cardy,0px) + var(--fx-clarao-y,0px)), #fff 0%,color-mix(in srgb,var(--wc,#4f8cf0) 60%,#fff) var(--fx-clarao-w,34%),transparent var(--fx-clarao-h,72%)); mix-blend-mode:screen} #rltBox .case.revelou .rlt-clarao{animation:rltClarao calc(1.6s * var(--fx-clarao-d,1)) cubic-bezier(.1,.7,.2,1) both} @keyframes rltClarao{ 0% {opacity:0} 3% {opacity:calc(var(--clarao,.5) * var(--fx-clarao-o,1))} 9% {opacity:calc(var(--clarao,.5) * .34 * var(--fx-clarao-o,1))} 30% {opacity:calc(var(--clarao,.5) * .18 * var(--fx-clarao-o,1))} 100%{opacity:0}} #rltBox .case.hitstop *,#rltBox .case.hitstop{animation-play-state:paused!important} @keyframes rltCarga{ 0% {opacity:0; transform:translate(-50%,-50%) scale(.6)} 70% {opacity:calc(.5 * var(--fx-carga-o,1));transform:translate(-50%,-50%) scale(.92)} 100%{opacity:calc(.86 * var(--fx-carga-o,1));transform:translate(-50%,-50%) scale(1)}} #rltBox .rlt-carga{position:absolute; left:calc(50% + var(--cardx,0px) + var(--fx-carga-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-carga-y,0px)); width:var(--fx-carga-w,230px);height:var(--fx-carga-h,330px);z-index:1; pointer-events:none;opacity:0;transform:translate(-50%,-50%);mix-blend-mode:screen; background:radial-gradient(ellipse 42% 46% at 50% 50%,color-mix(in srgb,var(--wc,#4f8cf0) 78%,#fff) 0%,color-mix(in srgb,var(--wc,#4f8cf0) 42%,transparent) 46%,transparent 74%)} #rltBox .case.carregando .rlt-carga{animation:rltCarga calc(.16s * var(--fx-carga-d,1)) cubic-bezier(.4,0,.9,.5) both} #rltBox .case.revelou .rlt-carga{animation:rltCargaOut calc(.5s * var(--fx-carga-d,1)) cubic-bezier(.1,.8,.3,1) both} @keyframes rltCargaOut{ 0% {opacity:calc(.86 * var(--fx-carga-o,1)); transform:translate(-50%,-50%) scale(1)} 12% {opacity:calc(1 * var(--fx-carga-o,1)); transform:translate(-50%,-50%) scale(1.5)} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.4)}} #rltBox .reel .tile{transition:opacity .52s cubic-bezier(.3,.7,.3,1),transform .52s cubic-bezier(.25,.9,.3,1)} #rltBox .case.revelou .reel .tile:not(.win){opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){ #rltBox .reel .tile{transition:opacity .6s ease-out} } @keyframes rltEscuro{ 0% {opacity:0} 8%{opacity:1} 52%{opacity:.6} 100%{opacity:0}} #rltBox .rlt-fundo{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; background:radial-gradient(78% 128% at 50% 50%,transparent 12%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.78) 100%)} #rltBox .case.revelou .rlt-fundo{animation:rltEscuro 1.15s cubic-bezier(.2,.7,.3,1) both} #rltBox .rlt-chao{position:absolute; left:calc(50% + var(--cardx,0px) + var(--fx-chao-x,0px)); top:calc(50% + var(--cardy,0px) + var(--cardh,322.6px) / 2 + var(--fx-chao-y,-8px)); width:var(--fx-chao-w,520px);height:var(--fx-chao-h,99px);z-index:1; pointer-events:none;opacity:0;mix-blend-mode:screen; transform:translate(-50%,-50%); background-image:var(--chaoart,url(/assets/roleta/winfx/chao-comum.png)); background-repeat:no-repeat;background-position:center;background-size:contain; background-color:var(--wc,#4f8cf0);background-blend-mode:multiply} #rltBox .case.r-comum .rlt-chao{--chaoart:url(/assets/roleta/winfx/chao-comum.png)} #rltBox .case.r-incomum .rlt-chao{--chaoart:url(/assets/roleta/winfx/chao-incomum.png)} #rltBox .case.r-raro .rlt-chao{--chaoart:url(/assets/roleta/winfx/chao-raro.png)} #rltBox .case.r-epico .rlt-chao{--chaoart:url(/assets/roleta/winfx/chao-epico.png)} #rltBox .case.r-lendario .rlt-chao{--chaoart:url(/assets/roleta/winfx/chao-lendario.png)} @keyframes rltChaoInicio{ 0% {opacity:0; transform:translate(-50%,-50%) scale(.5)} 100%{opacity:calc(var(--chao,.5)*.5*var(--fx-chao-o,1)); transform:translate(-50%,-50%) scale(.86)}} #rltBox .case.carregando .rlt-chao{animation:rltChaoInicio .16s cubic-bezier(.3,.1,.6,.6) both} @keyframes rltChao{ 0% {opacity:calc(var(--chao,.5)*.5*var(--fx-chao-o,1)); transform:translate(-50%,-50%) scale(.86)} 12% {opacity:calc(var(--chao,.5)*var(--fx-chao-o,1)); transform:translate(-50%,-50%) scale(1.1)} 40% {opacity:calc(var(--chao,.5)*.72*var(--fx-chao-o,1)); transform:translate(-50%,-50%) scale(1)} 100%{opacity:calc(var(--chao,.5)*.34*var(--fx-chao-o,1)); transform:translate(-50%,-50%) scale(1.04)}} #rltBox .case.revelou .rlt-chao{animation:rltChao calc(var(--fxdur,1.2s) * 1.3 * var(--fx-chao-d,1)) cubic-bezier(.12,.8,.24,1) both} #rltBox .rlt-facho{position:absolute; left:calc(50% + var(--cardx,0px) + var(--fx-facho-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-facho-y,-14px)); width:var(--fx-facho-w,215px);height:var(--fx-facho-h,430px);z-index:1; pointer-events:none;opacity:0;transform:translate(-50%,-50%) scaleY(.6); transform-origin:50% 100%;mix-blend-mode:screen;filter:blur(2px); background-image:var(--fachoart,url(/assets/roleta/winfx/facho-simples.png)); background-repeat:no-repeat;background-position:center bottom;background-size:contain; background-color:var(--wc,#4f8cf0);background-blend-mode:multiply} #rltBox .case.r-epico .rlt-facho{--fachoart:url(/assets/roleta/winfx/facho-raios.png)} #rltBox .case.r-lendario .rlt-facho{--fachoart:url(/assets/roleta/winfx/facho-raios.png)} #rltBox .rlt-neblina,#rltBox .rlt-raios{position:absolute; z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen; background-repeat:no-repeat;background-position:center;background-size:contain; background-color:var(--wc,#4f8cf0);background-blend-mode:multiply} #rltBox .rlt-neblina{background-image:url(/assets/roleta/winfx/neblina-chamas.png); left:calc(50% + var(--cardx,0px) + var(--fx-neblina-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-neblina-y,0px)); width:var(--fx-neblina-w,900px);height:var(--fx-neblina-h,430px)} #rltBox .rlt-raios{background-image:url(/assets/roleta/winfx/raios-sigilo.png); left:calc(50% + var(--cardx,0px) + var(--fx-raios-x,0px)); top:calc(50% + var(--cardy,0px) + var(--fx-raios-y,0px)); width:var(--fx-raios-w,900px);height:var(--fx-raios-h,430px)} @keyframes rltNeblina{ 0% {opacity:0; transform:translate(-50%,-50%) scale(.86) translateY(16px)} 8% {opacity:calc(.85 * var(--fx-neblina-o,1)); transform:translate(-50%,-50%) scale(1) translateY(0)} 35% {opacity:calc(.85 * var(--fx-neblina-o,1)); transform:translate(-50%,-50%) scale(1.05) translateY(-8px)} 65% {opacity:0; transform:translate(-50%,-50%) scale(1.14) translateY(-22px)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.14) translateY(-22px)}} @keyframes rltRaios{ 0% {opacity:0; transform:translate(-50%,-50%) scale(.42) rotate(-4deg)} 8% {opacity:calc(1 * var(--fx-raios-o,1)); transform:translate(-50%,-50%) scale(1.04) rotate(0deg)} 35% {opacity:calc(1 * var(--fx-raios-o,1)); transform:translate(-50%,-50%) scale(1.1) rotate(3deg)} 65% {opacity:0; transform:translate(-50%,-50%) scale(1.26) rotate(7deg)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.26) rotate(7deg)}} #rltBox .case.revelou.r-epico .rlt-neblina, #rltBox .case.revelou.r-lendario .rlt-neblina{animation:rltNeblina calc(var(--fxdur,1.2s) * var(--fx-neblina-d,1)) cubic-bezier(.2,.7,.3,1) both} #rltBox .case.revelou.r-lendario .rlt-raios{animation:rltRaios calc(var(--fxdur,1.2s) * var(--fx-raios-d,1)) cubic-bezier(.1,.85,.2,1) both} @media (prefers-reduced-motion:reduce){ #rltBox .rlt-neblina,#rltBox .rlt-raios{transform:translate(-50%,-50%)} #rltBox .case.revelou.r-epico .rlt-neblina,#rltBox .case.revelou.r-lendario .rlt-neblina{ --o:.7;animation:rltRedFade calc(var(--fxdur,1.2s) * 1.5) ease-out both!important} #rltBox .case.revelou.r-lendario .rlt-raios{ --o:.85;animation:rltRedFade var(--fxdur,1.2s) ease-out both!important} } @keyframes rltFachoInicio{ 0% {opacity:0; transform:translate(-50%,-50%) scaleY(.32)} 100%{opacity:calc(var(--chao,.5)*.3*var(--fx-facho-o,1)); transform:translate(-50%,-50%) scaleY(.6)}} @keyframes rltFacho{ 0% {opacity:calc(var(--chao,.5)*.3*var(--fx-facho-o,1)); transform:translate(-50%,-50%) scaleY(.6)} 12% {opacity:calc(var(--chao,.5)*.9*var(--fx-facho-o,1)); transform:translate(-50%,-50%) scaleY(1.06)} 44% {opacity:calc(var(--chao,.5)*.5*var(--fx-facho-o,1)); transform:translate(-50%,-50%) scaleY(1)} 100%{opacity:calc(var(--chao,.5)*.22*var(--fx-facho-o,1)); transform:translate(-50%,-50%) scaleY(.94)}} #rltBox .case.carregando .rlt-facho{animation:rltFachoInicio .16s ease-out both} #rltBox .case.revelou .rlt-facho{animation:rltFacho calc(var(--fxdur,1.2s) * 1.3 * var(--fx-facho-d,1)) cubic-bezier(.12,.8,.24,1) both} #rltBox .case.r-comum .rlt-chao{--chao:.22} #rltBox .case.r-incomum .rlt-chao{--chao:.45} #rltBox .case.r-raro .rlt-chao{--chao:.68} #rltBox .case.r-epico .rlt-chao{--chao:.86} #rltBox .case.r-lendario .rlt-chao{--chao:1} #rltBox .rlt-chao{filter:saturate(1.15) brightness(calc(.8 + var(--chao,.5) * .5))} @keyframes rltFio{ 0% {filter:drop-shadow(0 0 0 var(--rc,#7c8590))} 10% {filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 9px var(--rc,#7c8590)) drop-shadow(0 0 26px var(--rc,#7c8590))} 55% {filter:drop-shadow(0 0 1px var(--rc,#7c8590)) drop-shadow(0 0 7px var(--rc,#7c8590)) drop-shadow(0 0 18px var(--rc,#7c8590))} 100%{filter:drop-shadow(0 0 1px var(--rc,#7c8590)) drop-shadow(0 0 5px var(--rc,#7c8590)) drop-shadow(0 0 12px var(--rc,#7c8590))}} #rltBox .case.revelou .reel .tile.win{animation:rltFio .8s ease-out both} @media (prefers-reduced-motion:reduce){ #rltBox .case.revelou .viewport{animation:none} #rltBox .rlt-assin::before,#rltBox .rlt-portal::before{ --o:.32;transform:none;animation:rltRedFade var(--fxdur,1.2s) ease-out both!important} #rltBox .case.revelou .rlt-clarao{animation:rltClarao 1.2s ease-out both} #rltBox .rlt-chao{transform:translate(-50%,-50%)} #rltBox .rlt-facho{transform:translate(-50%,-50%) scaleY(.9)} @keyframes rltRedFicaChao{0%{opacity:0}16%{opacity:var(--o,.5)}100%{opacity:calc(var(--o,.5)*.34)}} #rltBox .case.carregando .rlt-chao,#rltBox .case.carregando .rlt-facho{ --o:calc(var(--chao,.5)*.5);animation:rltRedFade .3s ease-out both!important} #rltBox .case.revelou .rlt-chao{--o:var(--chao,.5); animation:rltRedFicaChao calc(var(--fxdur,1.2s) * 1.3) ease-out both!important} #rltBox .case.revelou .rlt-facho{--o:calc(var(--chao,.5)*.5); animation:rltRedFicaChao calc(var(--fxdur,1.2s) * 1.3) ease-out both!important} #rltBox .case.revelou .rlt-fundo{animation:rltEscuro .95s ease-out both} #rltBox .rlt-carga{transform:translate(-50%,-50%)} #rltBox .case.carregando .rlt-carga{--o:.6;animation:rltRedFade .3s ease-out both!important} #rltBox .case.revelou .rlt-carga{--o:.9;animation:rltRedFade .7s ease-out both!important} } #rltBox .fxb{position:absolute;inset:0;z-index:1;pointer-events:none} #rltBox .wflare{position:absolute;top:50%;left:50%;width:480px;height:480px;transform:translate(-50%,-50%) scale(.28);z-index:1;pointer-events:none;opacity:0; background:url(/assets/roleta/win-burst-neutral.png) center/contain no-repeat;mix-blend-mode:screen} #rltBox .wflare.on{animation:rltWflareFx 1.4s cubic-bezier(.14,.7,.3,1) both} @keyframes rltWflareFx{0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.28) rotate(14deg)}} #rltBox .wflare.r-comum{filter:grayscale(.75) brightness(1.05)} #rltBox .wflare.r-incomum{filter:sepia(1) saturate(4.5) hue-rotate(178deg) brightness(1.05)} #rltBox .wflare.r-raro{filter:sepia(1) saturate(3.6) hue-rotate(232deg) brightness(1.02)} #rltBox .wflare.r-epico{filter:sepia(1) saturate(5) hue-rotate(285deg) brightness(1.02)} #rltBox .wflare.r-lendario{filter:sepia(.5) saturate(2.2) hue-rotate(-8deg) brightness(1.08)} #rltBox .fxf{position:absolute;inset:0;z-index:9;pointer-events:none} #rltBox .viewport{overflow:hidden;position:relative;z-index:2;height:484px} #rltBox .reel{display:flex;gap:14px;padding:0;align-items:center;height:100%;will-change:transform,filter} #rltBox .reel.focus .tile:not(.win){filter:brightness(.62) saturate(.8)} #rltBox .tile{flex:0 0 145px;height:246px;position:relative;box-sizing:border-box; border-radius:2px;overflow:hidden;transform-origin:50% 50%; background:transparent; clip-path:polygon(7.5% 0, 92.5% 0, 100% 4.4%, 100% 95.6%, 92.5% 100%, 7.5% 100%, 0 95.6%, 0 4.4%); box-shadow:0 22px 38px -16px rgba(0,0,0,.92); -webkit-box-reflect:below 7px linear-gradient(transparent 74%,rgba(255,255,255,.09)); transition:transform .3s cubic-bezier(.2,.9,.25,1),opacity .3s,filter .3s,box-shadow .25s} #rltBox .case.girando .tile{transition:none;opacity:1;-webkit-box-reflect:none} #rltBox .case.girando .tile .ic{filter:none} #rltBox .case.girando .tile .tface::before,#rltBox .case.girando .tile .tback::before{opacity:.42} #rltBox .case.girando .tile .tface::after,#rltBox .case.girando .tile .tback::after{opacity:.7} #rltBox .tface::before,#rltBox .tback::before{content:"";position:absolute;left:50%;top:36%;width:145%;height:56%; transform:translate(-50%,-50%);pointer-events:none;z-index:0; background:radial-gradient(ellipse closest-side,color-mix(in srgb,var(--rc,#7c8590) 30%,transparent),transparent 72%); opacity:calc(.06 + var(--nc,0) * .34)} #rltBox .tface::after,#rltBox .tback::after{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,var(--rc,#7c8590) 22%,var(--rc,#7c8590) 78%,transparent); opacity:.85} #rltBox .tin{position:absolute;inset:0;transform-style:preserve-3d; transform:perspective(760px) rotateY(0deg)} #rltBox .tile.giro1 .tin{transform:perspective(760px) rotateY(450deg); transition:transform .42s cubic-bezier(.5,0,.9,.45)} #rltBox .tile.giro2 .tin{transform:perspective(760px) rotateY(540deg); transition:transform .4s cubic-bezier(0,.55,.25,1)} #rltBox .tile.giro1r .tin{transform:perspective(760px) rotateY(90deg); transition:transform .26s cubic-bezier(.4,0,.7,.5)} #rltBox .tile.giro2r .tin{transform:perspective(760px) rotateY(180deg); transition:transform .3s cubic-bezier(0,.55,.25,1)} #rltBox .tface,#rltBox .tback{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:9px;padding:14px 10px 34px;box-sizing:border-box; backface-visibility:hidden;-webkit-backface-visibility:hidden} #rltBox .tback{transform:rotateY(180deg)} #rltBox .tface,#rltBox .tback{background:url(/assets/roleta/carta-verso.png) center/cover no-repeat} #rltBox .tile.r-comum .tface,#rltBox .tile.r-comum .tback, #rltBox .tile.r-normal .tface,#rltBox .tile.r-normal .tback{background-image:url(/assets/roleta/carta-verso-comum.png)} #rltBox .tile.r-incomum .tface,#rltBox .tile.r-incomum .tback{background-image:url(/assets/roleta/carta-verso-incomum.png)} #rltBox .tile.r-raro .tface,#rltBox .tile.r-raro .tback{background-image:url(/assets/roleta/carta-verso-raro.png)} #rltBox .tile.r-epico .tface,#rltBox .tile.r-epico .tback{background-image:url(/assets/roleta/carta-verso-epico.png)} #rltBox .tile.r-lendario .tface,#rltBox .tile.r-lendario .tback{background-image:url(/assets/roleta/carta-verso-lendario.png)} #rltBox .tback > *{opacity:0} #rltBox .tile.revelado .tback{background-image:url(/assets/roleta/carta-moldura-premio.png); background-color:color-mix(in srgb,var(--rc,#7c8590) 26%,#fff);background-blend-mode:multiply} #rltBox .tile.revelado .tback > *{opacity:1;transition:opacity .2s .1s} #rltBox .tile.tinge .tface{background-color:var(--rc,#7c8590);background-blend-mode:multiply} #rltBox .tile:not(.revelado)::after{opacity:0} #rltBox .tile:not(.revelado)::before{opacity:calc(.06 + var(--nc,0) * .18)} #rltBox .tface .ic,#rltBox .tback .ic{margin-top:2px}#rltBox .tile.r-comum,#rltBox .tile.r-normal{--rc:#7c8590} #rltBox .tile.r-incomum{--rc:#4f8cf0} #rltBox .tile.r-raro{--rc:#9b6be0} #rltBox .tile.r-epico{--rc:#e0559f} #rltBox .tile.r-lendario{--rc:#f2b705} #rltBox .tile .ic{width:62px;height:62px;object-fit:contain;position:relative;z-index:1;transition:transform .25s; filter:drop-shadow(0 5px 12px rgba(0,0,0,.75)) drop-shadow(0 0 14px color-mix(in srgb,var(--rc,#7c8590) 55%,transparent))} #rltBox .tile .nm{position:relative;z-index:1;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:#c8d2e0;text-align:center;line-height:1.2; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #rltBox .tile .rr{position:absolute;left:0;right:0;bottom:11.5%;z-index:2; padding:7px 4px 8px;text-align:center; font-family:'Chakra Petch','Oxanium',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:color-mix(in srgb,var(--rc,#7c8590) 55%,#fff); background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--rc,#7c8590) 16%,transparent) 55%, color-mix(in srgb,var(--rc,#7c8590) 30%,transparent)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rc,#7c8590) 55%,transparent); text-shadow:0 1px 0 #000, 0 0 2px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.7)} #rltBox .reel.focus .tile:not(.win){filter:brightness(.62) saturate(.8)} #rltBox .tile.win{opacity:1;background:transparent} #rltBox .tile.win .tface,#rltBox .tile.win .tback{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 90%,transparent), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.6)} #rltBox .tile.win .tface::before,#rltBox .tile.win .tback::before{opacity:.95;width:170%;height:66%} #rltBox .tile.win .tface::after,#rltBox .tile.win .tback::after{opacity:1;height:3px} #rltBox .tile.win .rr{font-size:11.5px;padding:8px 4px 10px; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--rc) 26%,transparent) 50%, color-mix(in srgb,var(--rc) 48%,transparent)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rc) 90%,transparent)} #rltBox .tile.win .ic{transform:scale(1.06)} @keyframes rltWinpop{0%{transform:scale(1)}55%{transform:scale(1.1)}100%{transform:scale(1.06)}} #rltBox .seg button.on{background:rgba(255,255,255,.07);color:#eaf2ff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 1px 0 rgba(255,255,255,.08)} #rltBox .custo,#rltBox .acao-conta{display:inline-flex;align-items:stretch;gap:0;font-family:'Chakra Petch'} #rltBox .custo .cu,#rltBox .acao-conta .cu{display:inline-flex;align-items:center;gap:6px;padding:0 15px; border-left:1px solid rgba(255,255,255,.09)} #rltBox .custo .cu:first-child,#rltBox .acao-conta .cu:first-child{border-left:0;padding-left:4px} #rltBox .custo .cu:last-child,#rltBox .acao-conta .cu:last-child{padding-right:4px} #rltBox .custo i,#rltBox .acao-conta i{font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:#727d8d} #rltBox .custo img,#rltBox .acao-conta img{width:15px;height:15px;opacity:.85} #rltBox .custo b,#rltBox .acao-conta b{font-family:'Oxanium';font-weight:800;font-size:16px;color:#e8eef7; font-variant-numeric:tabular-nums;line-height:1} #rltBox .custo .res b,#rltBox .acao-conta .res b{color:#8b96a6;font-size:14px} #rltBox .custo.sem .cu:first-child b,#rltBox .acao-conta.sem .cu:first-child b{color:var(--c-epico)} #rltBox .custo.sem .sd b,#rltBox .acao-conta.sem .sd b{color:var(--c-epico)} #rltBox .buybtn{font-size:11.5px;letter-spacing:.1em;padding:11px 16px} #rltBox .tshop{display:none;margin-top:12px;gap:10px;flex-wrap:wrap;align-items:stretch} #rltBox .tshop.show{display:flex} #rltBox .tshop .lbl{color:#9aa6b6;font-size:12px;align-self:center} #rltBox .tpack{border:0;border-radius:2px;padding:9px 15px;cursor:pointer;background:rgba(15,20,32,.5);box-shadow:inset 0 0 0 1px var(--line);text-align:center;position:relative;transition:.15s} #rltBox .tpack:hover{box-shadow:inset 0 0 0 1px #4f8cf0aa,0 0 16px -8px #4f8cf0} #rltBox .tpack b{font-family:'Oxanium';font-weight:800;font-size:14px;display:block;color:#eef2f8} #rltBox .tpack small{color:#9aa6b6;font-size:11px} #rltBox .tpack .off{position:absolute;top:-8px;right:-6px;color:#052012;background:#7fe0a0;font-size:9px;font-weight:800;padding:1px 5px;border-radius:2px} #rltBox .result.show{opacity:1;transform:none} #rltBox .result.r-comum,#rltBox .result.r-normal{--rc:#7c8590}#rltBox .result.r-incomum{--rc:#4f8cf0}#rltBox .result.r-raro{--rc:#9b6be0}#rltBox .result.r-epico{--rc:#e0559f}#rltBox .result.r-lendario{--rc:#f2b705} #rltBox .result .ic{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))} #rltBox .multi.show{display:block} #rltBox .mcard.r-comum,#rltBox .mcard.r-normal{border-color:rgba(124,133,144,.6);box-shadow:inset 0 -2px 0 #7c8590;--rc:#7c8590} #rltBox .mcard.r-incomum{border-color:rgba(79,140,240,.6);box-shadow:inset 0 -2px 0 #4f8cf0;--rc:#4f8cf0} #rltBox .mcard.r-raro{border-color:rgba(155,107,224,.6);box-shadow:inset 0 -2px 0 #9b6be0;--rc:#9b6be0} #rltBox .mcard.r-epico{border-color:rgba(224,85,159,.6);box-shadow:inset 0 -2px 0 #e0559f;--rc:#e0559f} #rltBox .mcard.r-lendario{border-color:rgba(242,183,5,.65);box-shadow:inset 0 -2px 0 #f2b705,0 0 20px -8px #f2b705;--rc:#f2b705} @keyframes rltMcardIn{to{opacity:1;transform:none}} #rltBox .mcard .ic{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))} #rltBox .mcard .nm{font-size:8.5px;font-weight:700;color:#dbe3ee;line-height:1.1;padding:0 6px} #rltBox .mcard .rr{font-family:'Oxanium';font-size:6.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rc)} #rltBox .plrow.r-comum,#rltBox .plrow.r-normal{--rc:#7c8590}#rltBox .plrow.r-incomum{--rc:#4f8cf0}#rltBox .plrow.r-raro{--rc:#9b6be0}#rltBox .plrow.r-epico{--rc:#e0559f}#rltBox .plrow.r-lendario{--rc:#f2b705} #rltBox .rlt-feed-h{font-family:'Oxanium';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7c8494;margin-bottom:8px} #rltBox .rlt-feed-i.r-lendario b{color:#f2b705} #rltBox .rlt-feed-i.r-epico b{color:#e888c0} #rltBox .rlt-feed-i.r-raro b{color:#b58bee} .rlt-ov.on{display:flex} .rm-cost{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(79,140,240,.08);box-shadow:inset 0 0 0 1px #4f8cf033;border-radius:12px;padding:13px 15px;margin-bottom:16px;font-size:13px;color:#cfe0ff} .rm-cost b{font-family:'Oxanium';font-weight:800;font-size:16px;color:#fff} @media(max-width:640px){#rltBox .top .cnt{margin-left:0;width:100%;order:3}} @media (max-width:1100px){ #rltBox .tile{flex:0 0 123px;height:216px;padding:13px 8px 12px} #rltBox .tile .ic{width:54px;height:54px} #rltBox .tile .nm{font-size:11px} #rltBox .case::before,#rltBox .case::after{width:150px} } @media (max-width:620px){ #rltBox .tile{flex:0 0 92px;height:172px;padding:11px 7px 10px;gap:5px} #rltBox .tile .ic{width:46px;height:46px} #rltBox .tile .nm{font-size:10px} #rltBox .tile .rr{font-size:8px;letter-spacing:.12em} #rltBox .case{min-height:clamp(250px,32vh,300px)} #rltBox .case::before,#rltBox .case::after{width:74px} } @media (max-width:820px){ #rltBox .top .saldo{gap:6px} } .rlt-cart-ov{align-items:center;justify-content:center} .rlt-cart{--gold:#f2b705;--line:rgba(255,255,255,.10);--c-epico:#e0559f; width:min(680px,92vw);max-height:88vh;overflow:auto;border-radius:2px;padding:0; background:rgba(15,15,15,.74);box-shadow:inset 0 0 0 1px var(--line),0 18px 44px rgba(0,0,0,.7); backdrop-filter:blur(6px)} .rlt-cart .ct-head{display:flex;align-items:center;gap:16px;padding:18px 20px 16px; box-shadow:inset 0 -1px 0 var(--line)} .rlt-cart .ct-ttl{flex:1;min-width:0} .rlt-cart .ct-ttl .kick{display:block;font-family:'Chakra Petch',var(--tech,sans-serif);font-size:9.5px; font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#8b96a6;margin-bottom:3px} .rlt-cart .ct-ttl h3{font-family:'Oxanium';font-weight:800;font-size:19px;letter-spacing:.02em; text-transform:uppercase;color:#e8eef7;margin:0;line-height:1.1} .rlt-cart .ct-saldo{flex:none;text-align:right;display:flex;flex-direction:column;gap:1px; padding:7px 13px;border-radius:2px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line)} .rlt-cart .ct-saldo small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8b96a6} .rlt-cart .ct-saldo b{font-family:'Oxanium';font-weight:800;font-size:17px;color:var(--gold); font-variant-numeric:tabular-nums;line-height:1.05;transition:color .3s} .rlt-cart .ct-saldo i{font-style:normal;font-size:9.5px;color:#8b96a6;letter-spacing:.06em} @keyframes rltCartBaixou{0%{color:var(--gold)}18%{color:var(--c-epico);transform:translateY(-2px)}100%{color:var(--gold)}} .rlt-cart .ct-saldo b.baixou{animation:rltCartBaixou .9s cubic-bezier(.2,.8,.3,1)} .rlt-cart .ct-x{flex:none;background:transparent;border:0;color:#8b96a6;font-size:15px; width:32px;height:32px;border-radius:2px;cursor:pointer;transition:.15s} .rlt-cart .ct-x:hover{color:#eaf2ff;background:rgba(255,255,255,.07)} .rlt-cart .ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px;padding:18px 20px} .rlt-cart .ct-pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px; padding:16px 12px 13px;border-radius:2px;cursor:pointer;text-align:center; background:rgba(255,255,255,.025);border:0;box-shadow:inset 0 0 0 1px var(--line); transition:transform .16s, box-shadow .16s, background .16s} .rlt-cart .ct-pack:hover:not(:disabled){transform:translateY(-3px);background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 8px 20px -10px rgba(0,0,0,.9)} .rlt-cart .ct-pack.best{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 46%,transparent)} .rlt-cart .ct-pack.sem{opacity:.44;cursor:not-allowed} .rlt-cart .ct-off{position:absolute;top:7px;right:7px;font-family:'Oxanium';font-weight:800;font-size:10px; letter-spacing:.06em;color:#0d0f13;background:var(--gold);padding:2px 6px;border-radius:2px} .rlt-cart .ct-n{display:flex;align-items:center;gap:7px} .rlt-cart .ct-n img{width:22px;height:22px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))} .rlt-cart .ct-n b{font-family:'Oxanium';font-weight:800;font-size:26px;color:#eaf2ff;line-height:1} .rlt-cart .ct-n i{font-style:normal;font-size:11px;color:#8b96a6;letter-spacing:.06em} .rlt-cart .ct-p{display:flex;flex-direction:column;gap:1px;margin-top:2px} .rlt-cart .ct-p b{font-family:'Oxanium';font-weight:800;font-size:15px;color:var(--gold); font-variant-numeric:tabular-nums;line-height:1.1} .rlt-cart .ct-p small{font-size:9.5px;color:#8b96a6;letter-spacing:.1em;text-transform:uppercase} .rlt-cart .ct-brl{font-size:10.5px;color:#6f7a89} .rlt-cart .ct-falta{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-epico)} .rlt-cart .ct-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:14px 20px 18px;box-shadow:inset 0 1px 0 var(--line)} .rlt-cart .ct-hint{flex:1;min-width:200px;font-size:12px;color:#8b96a6;line-height:1.5} .rlt-cart .ct-doa{font-family:'Chakra Petch';text-transform:uppercase;letter-spacing:.1em; font-size:11px;font-weight:700;color:#cfe0ff;background:rgba(255,255,255,.03);border:0; box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;padding:11px 15px;cursor:pointer;transition:.15s} .rlt-cart .ct-doa:hover{color:#fff;background:rgba(255,255,255,.09)} .rlt-cart .ct-ok{display:flex;align-items:center;gap:12px;margin:0 20px 18px;padding:12px 14px; border-radius:2px;background:rgba(75,191,123,.08);box-shadow:inset 0 0 0 1px rgba(75,191,123,.34)} .rlt-cart .ct-ok-i{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:999px; background:rgba(75,191,123,.2);color:#4bbf7b;font-weight:800;font-size:13px} .rlt-cart .ct-ok-t{display:flex;flex-direction:column;gap:2px} .rlt-cart .ct-ok-t b{font-family:'Oxanium';font-weight:800;font-size:13px;letter-spacing:.04em;color:#dff3e6} .rlt-cart .ct-ok-t small{font-size:11.5px;color:#9fc9ae;font-variant-numeric:tabular-nums} @keyframes rltCartOk{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}} .rlt-cart .ct-ok.vai{animation:rltCartOk .42s cubic-bezier(.2,.9,.3,1) both} .rlt-cart.comprando{pointer-events:none;opacity:.72} @media (max-width:560px){ .rlt-cart .ct-head{flex-wrap:wrap} .rlt-cart .ct-grid{grid-template-columns:repeat(2,1fr)} } #rltBox .reel:not(.focus) .tile{ box-shadow:0 0 0 1px color-mix(in srgb,var(--rc,#b8c4d6) calc(var(--nc,0) * 78%),transparent), 0 0 calc(var(--nc,0) * 26px) calc(var(--nc,0) * -4px) color-mix(in srgb,var(--rc,#b8c4d6) calc(var(--nc,0) * 62%),transparent), 0 calc(var(--nc,0) * 10px) calc(var(--nc,0) * 26px) rgba(0,0,0,calc(var(--nc,0) * .7)); transition:box-shadow .28s ease-out} #rltBox .reel:not(.focus) .tile:not(.revelado)::before{ opacity:calc(.06 + var(--nc,0) * .3)} #rltBox .reel:not(.focus) .tile .tin{ transform:translateY(calc(var(--nc,0) * -6px)) scale(calc(1 + var(--nc,0) * .045)); transition:transform .28s cubic-bezier(.2,.9,.25,1)} #rltBox .case.revelou .viewport{z-index:10} @keyframes rltWinChega{ 0%{opacity:.45} 100%{opacity:1} } #rltBox .case.revelou .tile.win{animation:rltWinChega .42s ease-out both} #rltBox .top .abas .quem-lbl{font:800 10px/1 Oxanium,sans-serif;letter-spacing:.20em; text-transform:uppercase;color:#7d8798;white-space:nowrap;margin-right:2px} #rltBox .top .abas .pool.quem.active .pc{color:color-mix(in srgb,var(--pa) 78%,#fff)}