.shimeji {
    position: fixed;
    width: 90px;
    height: 90px;
    pointer-events: auto;
    z-index: 1000;
    cursor: grab;
    user-select: none;
}

/* Responsive sizing */
@media (max-width: 768px) {
    .shimeji {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 480px) {
    .shimeji {
        width: 60px;
        height: 60px;
    }
}

.shimeji.dragging {
    cursor: grabbing;
    z-index: 1001;
}

.sprite {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Walking state - cycles through individual PNG files */
.walking .sprite {
    animation: walk-frames 0.8s infinite ease-in-out;
}

/* Walking state facing right (flipped) */
.walking.facing-right .sprite {
    animation: walk-frames 0.8s infinite ease-in-out;
    transform: scaleX(-1);
}

/* Happy state */
.happy .sprite {
    background-image: url('shimeji/happy.png');
    animation: none;
    transform: scale(1.05);
}

.happy.facing-right .sprite {
    background-image: url('shimeji/happy.png');
    animation: none;
    transform: scale(1.05) scaleX(-1);
}

/* Scared state */
.scared .sprite {
    background-image: url('shimeji/scared.png');
    animation: none;
}

.scared.facing-right .sprite {
    background-image: url('shimeji/scared.png');
    animation: none;
    transform: scaleX(-1);
}

/* Dizzy state */
.dizzy .sprite {
    background-image: url('shimeji/dizzy.png');
    animation: none;
}

.dizzy.facing-right .sprite {
    background-image: url('shimeji/dizzy.png');
    animation: none;
    transform: scaleX(-1);
}

/* Grabbing state - when grabbing windows */
.grabbing .sprite {
    background-image: url('shimeji/grabbing.png');
    animation: none;
    transform: scale(1.1);
}

.grabbing.facing-right .sprite {
    background-image: url('shimeji/grabbing.png');
    animation: none;
    transform: scale(1.1) scaleX(-1);
}

/* Falling state - while falling due to gravity */
.falling .sprite {
    background-image: url('shimeji/falling.png');
    animation: none;
}

.falling.facing-right .sprite {
    background-image: url('shimeji/falling.png');
    animation: none;
    transform: scaleX(-1);
}

/* Dragged state - 2-frame animation */
.dragging .sprite {
    animation: drag-frames 1s infinite ease-in-out;
}

.dragging.facing-right .sprite {
    animation: drag-frames 1s infinite ease-in-out;
    transform: scaleX(-1);
}

/* Sleeping state - 2-frame animation */
.sleeping .sprite {
    animation: sleep-frames 2s infinite ease-in-out;
}

.sleeping.facing-right .sprite {
    animation: sleep-frames 2s infinite ease-in-out;
    transform: scaleX(-1);
}

/* Bouncing state - 3-frame animation for ground impact */
.bouncing .sprite {
    animation: bounce-frames 0.5s infinite ease-in-out;
}

.bouncing.facing-right .sprite {
    animation: bounce-frames 0.5s infinite ease-in-out;
    transform: scaleX(-1);
}

/* Climbing state - 3-frame animation for wall climbing */
.climbing .sprite {
    animation: climb-frames 1.2s infinite linear;
}

.climbing.facing-right .sprite {
    animation: climb-frames 1.2s infinite linear;
    transform: scaleX(-1);
}

/* Individual walking frame animations using PNG files */
@keyframes walk-frames {
    0% { 
        background-image: url('shimeji/walk1.png');
    }
    25% { 
        background-image: url('shimeji/walk2.png');
    }
    50% { 
        background-image: url('shimeji/walk3.png');
    }
    75% { 
        background-image: url('shimeji/walk4.png');
    }
    100% { 
        background-image: url('shimeji/walk1.png');
    }
}

/* Sleep animation - alternates between 2 frames */
@keyframes sleep-frames {
    0% { 
        background-image: url('shimeji/sleep1.png');
    }
    50% { 
        background-image: url('shimeji/sleep2.png');
    }
    100% { 
        background-image: url('shimeji/sleep1.png');
    }
}

/* Drag animation - alternates between 2 frames */
@keyframes drag-frames {
    0% { 
        background-image: url('shimeji/drag1.png');
    }
    50% { 
        background-image: url('shimeji/drag2.png');
    }
    100% { 
        background-image: url('shimeji/drag1.png');
    }
}

/* Bounce animation - 3 frames for ground impact */
@keyframes bounce-frames {
    0% { 
        background-image: url('shimeji/bounce2.png');
    }
    50% { 
        background-image: url('shimeji/bounce3.png');
    }
    100% { 
        background-image: url('shimeji/bounce3.png');
    }
}

/* Climb animation - 3 frames for wall climbing */
@keyframes climb-frames {
    0% { 
        background-image: url('shimeji/climb1.png');
    }
    33% { 
        background-image: url('shimeji/climb2.png');
    }
    66% { 
        background-image: url('shimeji/climb3.png');
    }
    100% { 
        background-image: url('shimeji/climb1.png');
    }
}