.free-roll-stage{padding:40px 0 30px;overflow:hidden;text-align:center;background:radial-gradient(ellipse at 50% 40%,#a79bff18,transparent 65%),#111623}.free-roll-stage>span{font:10px var(--mono);color:var(--lime)}.free-roll-stage h3{font-size:32px;margin:18px 20px 30px}.free-roll-stage>p{font:10px/1.9 var(--mono);color:var(--muted);margin:26px 25px 0}.roll-window{width:100%;height:280px;overflow:hidden;position:relative;container-type:inline-size;border-block:1px solid var(--line)}.roll-window:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#111623ee,transparent 35%,transparent 65%,#111623ee);pointer-events:none;z-index:5}.roll-track{position:absolute;top:35px;left:0;display:flex;gap:20px;animation:free-pack-roll 3s cubic-bezier(.12,.65,.1,1) forwards;will-change:transform}.roll-tile{width:135px;flex-shrink:0;display:flex;align-items:center;flex-direction:column;gap:12px}.roll-tile .pack.booster{width:115px;height:180px;transform:rotate(0);animation:none;margin:0}.roll-tile>b{font:15px var(--display);color:var(--pack-color)}.roll-tile>small{font:7px var(--mono);color:var(--muted)}.roll-marker{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#b8ff6140;z-index:6}.roll-marker:before,.roll-marker:after{content:'';position:absolute;left:-7px;width:15px;height:12px;background:var(--lime);clip-path:polygon(0 0,100% 0,50% 100%)}.roll-marker:before{top:0}.roll-marker:after{bottom:0;rotate:180deg}@keyframes free-pack-roll{from{transform:translateX(calc(50cqw - 67.5px))}to{transform:translateX(calc(50cqw - var(--stop)))}}
@media(max-width:760px){.free-roll-stage{padding-top:30px}.free-roll-stage>span{font-size:8px}.free-roll-stage h3{font-size:25px}.free-roll-stage>p{font-size:8px}.roll-window{height:280px}.roll-window:after{background:linear-gradient(90deg,#111623bb,transparent 35%,transparent 65%,#111623bb)}}