/* mascot.css */
#page-mascot {
    position: fixed;
    left: 40px;
    bottom: 30px;
    width: 120px;
    height: 120px;
    z-index: 9999;
    cursor: pointer;
    transition: transform 0.2s;
}

#page-mascot:hover {
    transform: scale(1.05);
}

.mascot-sprite {
    width: 100%;
    height: 100%;
    /* Default fallback color if images missing */
    background-color: transparent;
    
    /* They need to put the images here */
    background-image: url('../images/mascot/fox-directions.webp');
    background-size: 300% 300%;
    background-position: 50% 50%; /* center */
    background-repeat: no-repeat;
}

/* When clicked, switch to reaction sprite for 1 sec */
.mascot-sprite.reaction {
    background-image: url('../images/mascot/fox-reactions.webp');
    /* Blink is usually top-left */
    background-position: 0% 0%; 
}