.grenade-visual{position:relative;isolation:isolate;width:min(100%,292px);aspect-ratio:2/3;display:grid;place-items:center;--danger-level:0}.grenade-art,.grenade-explosion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:opacity .12s linear}.grenade-art{width:160%;height:auto;aspect-ratio:1;left:-30%;top:50%;margin-top:-80%;object-fit:contain;z-index:2;transform-origin:50% 82%;animation:gv-idle 4s ease-in-out infinite}.grenade-halo{z-index:0;inset:15% -18%;background:radial-gradient(ellipse,#d78239 0,#d7823940 42%,transparent 72%);opacity:calc(var(--danger-level)*.62);transform:scale(calc(.72 + var(--danger-level)*.3))}.grenade-halo,.grenade-shadow{position:absolute;border-radius:50%}.grenade-shadow{z-index:1;left:18%;right:18%;bottom:3%;height:5%;background:#24251e38;transform:scaleX(1);animation:gv-shadow 4s ease-in-out infinite}.grenade-explosion{z-index:3;opacity:0;transform:scale(.5);pointer-events:none}.grenade-visual[data-state=grab] .grenade-art{animation:gv-grab .48s cubic-bezier(.2,.85,.35,1) both}.grenade-visual[data-state=arming] .grenade-art{animation:none}.grenade-visual[data-state=grab] .grenade-shadow{animation:gv-shadow-grab .48s ease-out both}.grenade-visual[data-state=danger] .grenade-art{animation:gv-danger calc(1.3s - var(--danger-level)*.55s) ease-in-out infinite}.grenade-visual[data-state=danger] .grenade-halo{animation:gv-halo 2s ease-in-out infinite}.grenade-visual[data-state=danger] .grenade-shadow{animation:gv-shadow-danger 1s ease-in-out infinite}.grenade-visual[data-state=detonation] .grenade-art{animation:gv-hide .24s ease-out both}.grenade-visual[data-state=detonation] .grenade-shadow{animation:gv-shadow-pop .34s ease-out both}.grenade-visual[data-state=detonation] .grenade-explosion{animation:gv-explode .56s steps(5) both}.grenade-visual[data-state=reset] .grenade-art{animation:gv-reset .62s cubic-bezier(.2,.8,.2,1) both}.grenade-visual[data-state=loading] .grenade-art,.grenade-visual[data-state=loading] .grenade-shadow{opacity:0;animation:none}.grenade-visual[data-state=ready] .grenade-art{animation:gv-reset .62s cubic-bezier(.2,.8,.2,1) both,gv-idle 4s ease-in-out .62s infinite}.grenade-visual[data-state=reset] .grenade-shadow{animation:gv-shadow-reset .62s ease-out both}@keyframes gv-idle{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes gv-grab{0%{transform:translateX(0) rotate(0)}28%{transform:translateX(-9px) rotate(-3deg)}65%{transform:translateX(4px) rotate(1.5deg)}to{transform:translateX(0) rotate(0)}}@keyframes gv-danger{0%,to{transform:translateX(calc(var(--danger-level)*-1px)) rotate(calc(var(--danger-level)*-1deg))}25%{transform:translateX(calc(var(--danger-level)*2px)) rotate(calc(var(--danger-level)*1.5deg))}75%{transform:translateX(calc(var(--danger-level)*-2px)) rotate(calc(var(--danger-level)*-1.5deg))}}@keyframes gv-halo{0%,to{opacity:calc(var(--danger-level)*.3);transform:scale(.86)}50%{opacity:calc(var(--danger-level)*.78);transform:scale(1.06)}}@keyframes gv-hide{to{opacity:0;transform:scale(.92)}}@keyframes gv-explode{0%{opacity:0;transform:scale(.25) rotate(-8deg)}20%{opacity:1;transform:scale(.95) rotate(0)}70%{opacity:1;transform:scale(1.1) rotate(2deg)}to{opacity:0;transform:scale(1.24) rotate(4deg)}}@keyframes gv-reset{0%{opacity:0;transform:translateY(-28px) scale(.9)}68%{opacity:1;transform:translateY(3px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gv-shadow{0%,to{transform:scaleX(1);opacity:.7}50%{transform:scaleX(.84);opacity:.45}}@keyframes gv-shadow-grab{0%,to{transform:scaleX(1)}40%{transform:scaleX(.78)}70%{transform:scaleX(1.08)}}@keyframes gv-shadow-danger{0%,to{transform:scaleX(1)}50%{transform:scaleX(.82)}}@keyframes gv-shadow-pop{to{transform:scaleX(1.7);opacity:0}}@keyframes gv-shadow-reset{0%{transform:scaleX(.65);opacity:0}72%{transform:scaleX(1.15);opacity:.8}to{transform:scaleX(1);opacity:.7}}@media(max-width:790px){.grenade-visual{width:235px}}@media(max-width:480px){.grenade-visual{width:218px}}@media(prefers-reduced-motion:reduce){.grenade-art,.grenade-explosion,.grenade-halo,.grenade-shadow{animation:none!important;transition:none!important}.grenade-visual[data-state=detonation] .grenade-art{opacity:0}.grenade-visual[data-state=detonation] .grenade-explosion{opacity:1;transform:scale(1)}}