#monster{

position:fixed;

width:110px;

height:110px;

left:calc(100vw - 160px);

top:calc(100vh - 170px);

z-index:999999;

transition:
left .45s cubic-bezier(.22,1,.36,1),
top .45s cubic-bezier(.22,1,.36,1),
transform .25s;

}

#monster img{

width:100%;

user-select:none;

pointer-events:none;

filter:
drop-shadow(0 0 15px rgba(160,90,255,.55));

animation:floatMonster 3s ease-in-out infinite;

}

@keyframes floatMonster{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

#monsterBubble{

position:absolute;

bottom:115px;

left:-40px;

background:#fff;

color:#4b0082;

padding:8px 14px;

border-radius:20px;

font-size:14px;

font-weight:bold;

white-space:nowrap;

display:none;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.monster-show{

display:block!important;

animation:bubble .3s;

}

@keyframes bubble{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.monster-spin{

animation:spinMonster .5s;

}

@keyframes spinMonster{

0%{

transform:rotate(0);

}

100%{

transform:rotate(360deg);

}

}

.spark{

position:fixed;

width:6px;

height:6px;

background:#b56cff;

border-radius:50%;

pointer-events:none;

animation:spark .8s linear forwards;

box-shadow:0 0 10px #fff;

}

@keyframes spark{

to{

opacity:0;

transform:
translateY(-25px)
scale(0);

}

}

@media(max-width:768px){

#monster{

display:none;

}

}

/* ===========================
   SLEEP ZZZ
=========================== */

.monster-zzz{

position:fixed;

font-size:22px;

font-weight:bold;

color:#7b5cff;

pointer-events:none;

z-index:99999999;

animation:zzzFloat 3s linear forwards;

text-shadow:0 0 10px rgba(123,92,255,.5);

}

@keyframes zzzFloat{

0%{

opacity:0;

transform:translateY(0) scale(.8);

}

20%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(-70px) translateX(20px) scale(1.4);

}

}