.el-gacha{--capsule-w:36%;--land-y:56%;aspect-ratio:4/5;isolation:isolate;justify-self:center;width:min(100%,max(240px,80svh - 320px));position:relative;overflow:hidden}@media (min-width:768px){.el-gacha{justify-self:start;width:100%;max-width:360px}.el-gacha-actions{max-width:360px}}.el-gacha-actions{min-height:96px}.el-gacha-body{aspect-ratio:600/1172;transform-origin:50% 96%;transition:opacity .45s var(--ease-out), filter .45s var(--ease-out);position:absolute;top:0;bottom:0;left:50%;translate:-50%}.el-gacha-machine{width:100%;height:100%;display:block}.el-gacha-handle{width:32%;height:auto;position:absolute;top:63.8%;left:49.7%;translate:-50% -50%}.el-gacha-capsule,.el-gacha-half{left:50%;top:var(--land-y);width:var(--capsule-w);opacity:0;pointer-events:none;height:auto;position:absolute;translate:-50% -50%}.el-gacha-burst{left:50%;top:var(--land-y);aspect-ratio:1;opacity:0;pointer-events:none;background:conic-gradient(#ff5a5f,#ffb400,#ffe14d,#3ddc97,#2ea8ff,#7a5cff,#ff5ac8,#ff5a5f);border-radius:50%;width:92%;position:absolute;translate:-50% -50%;-webkit-mask:radial-gradient(closest-side,#000000e6,#00000059 45%,#0000 72%);mask:radial-gradient(closest-side,#000000e6,#00000059 45%,#0000 72%)}.el-gacha-reveal{inset-inline:8%;top:var(--land-y);text-align:center;opacity:0;pointer-events:none;justify-items:center;display:grid;position:absolute;translate:0 -50%}.el-gacha-reveal>span{text-shadow:0 2px 18px #000000d9}.el-gacha[data-phase=spin] .el-gacha-body{animation:.42s ease-in-out infinite el-gacha-shake}.el-gacha[data-phase=spin] .el-gacha-handle{animation:.84s cubic-bezier(.45,.05,.55,.95) infinite el-gacha-turn}@keyframes el-gacha-shake{0%,to{transform:rotate(0)translate(0)}25%{transform:rotate(-1.8deg)translate(-1.5%)}75%{transform:rotate(1.8deg)translate(1.5%)}}@keyframes el-gacha-turn{to{rotate:360deg}}.el-gacha[data-phase=drop] .el-gacha-capsule{opacity:1;animation:.85s cubic-bezier(.3,.7,.4,1) both el-gacha-drop}@keyframes el-gacha-drop{0%{opacity:0;transform:translateY(100%)scale(.42)rotate(0)}12%{opacity:1}32%{transform:translateY(96%)scale(.72)rotate(-14deg)}52%{transform:translateY(-30%)scale(1)rotate(10deg)}72%{transform:translateY(16%)scale(1)rotate(-6deg)}86%{transform:translateY(-6%)scale(1.04)rotate(3deg)}to{opacity:1;transform:translateY(0)scale(1.08)rotate(0)}}.el-gacha[data-phase=open] .el-gacha-body,.el-gacha[data-phase=done] .el-gacha-body{opacity:.16;filter:blur(2px)}.el-gacha[data-phase=open] .is-top{animation:.7s cubic-bezier(.2,.9,.3,1.1) both el-gacha-top}.el-gacha[data-phase=open] .is-bottom{animation:.7s cubic-bezier(.2,.9,.3,1.1) both el-gacha-bottom}.el-gacha[data-phase=open] .el-gacha-burst{animation:.75s cubic-bezier(.2,.8,.3,1) both el-gacha-burst}.el-gacha[data-phase=open] .el-gacha-reveal{animation:.6s cubic-bezier(.2,1.4,.4,1) .12s both el-gacha-pop}@keyframes el-gacha-top{0%{opacity:1;transform:translateY(-33%)scale(1.08)rotate(0)}to{opacity:.85;transform:translate(-62%,-168%)scale(.86)rotate(-24deg)}}@keyframes el-gacha-bottom{0%{opacity:1;transform:translateY(60%)scale(1.08)rotate(0)}to{opacity:.85;transform:translate(62%,210%)scale(.86)rotate(20deg)}}@keyframes el-gacha-burst{0%{opacity:0;transform:scale(.18)rotate(-40deg)}40%{opacity:1}to{opacity:.55;transform:scale(1)rotate(0)}}@keyframes el-gacha-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.el-gacha[data-phase=done] .is-top{opacity:.85;transform:translate(-62%,-168%)scale(.86)rotate(-24deg)}.el-gacha[data-phase=done] .is-bottom{opacity:.85;transform:translate(62%,210%)scale(.86)rotate(20deg)}.el-gacha[data-phase=done] .el-gacha-burst{opacity:.55}.el-gacha[data-phase=done] .el-gacha-reveal{opacity:1}.el-gacha[data-result=lost] .el-gacha-burst{background:var(--color-canvas)}.el-gacha[data-result=lost][data-phase=done] .el-gacha-burst{opacity:.1}.el-gacha-card.el-card{justify-self:start;width:100%;max-width:200px}.el-gacha-card .el-card-inner{transition:none}@media (prefers-reduced-motion:reduce){.el-gacha-body{transition:none}.el-gacha[data-phase] .el-gacha-body,.el-gacha[data-phase] .el-gacha-handle,.el-gacha[data-phase] .el-gacha-capsule,.el-gacha[data-phase] .el-gacha-burst,.el-gacha[data-phase] .is-top,.el-gacha[data-phase] .is-bottom,.el-gacha[data-phase] .el-gacha-reveal{animation:none}.el-gacha[data-phase=open] .is-top,.el-gacha[data-phase=open] .is-bottom,.el-gacha[data-phase=open] .el-gacha-reveal{opacity:1}}