/* RPG Actor - Sprite Animation Styles
 * Handles RPG Maker MZ sprite sheets (3 columns x 4 rows per character)
 * Standard size: 48x48 per frame, 144x192 total
 */

.sprite-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Sprite in environment (index page) */
.actor-sprite {
    width: 48px;
    height: 48px;
    background-size: 144px 192px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Direction rows in RMMZ sprite sheets:
 * Row 0 (top): Down
 * Row 1: Left  
 * Row 2: Right
 * Row 3 (bottom): Up
 */

.actor-sprite.dir-down { background-position-y: 0; }
.actor-sprite.dir-left { background-position-y: -48px; }
.actor-sprite.dir-right { background-position-y: -96px; }
.actor-sprite.dir-up { background-position-y: -144px; }

/* Animation frames (3 frames per direction) */
.actor-sprite.frame-0 { background-position-x: 0; }
.actor-sprite.frame-1 { background-position-x: -48px; }
.actor-sprite.frame-2 { background-position-x: -96px; }

/* Showcase sprite (character sheet) - larger display */
.showcase-sprite {
    width: 96px;
    height: 96px;
    background-size: 288px 384px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.showcase-sprite.dir-down { background-position-y: 0; }
.showcase-sprite.dir-left { background-position-y: -96px; }
.showcase-sprite.dir-right { background-position-y: -192px; }
.showcase-sprite.dir-up { background-position-y: -288px; }

.showcase-sprite.frame-0 { background-position-x: 0; }
.showcase-sprite.frame-1 { background-position-x: -96px; }
.showcase-sprite.frame-2 { background-position-x: -192px; }

/* Walking animation keyframes */
@keyframes walk-cycle {
    0%, 100% { background-position-x: 0; }
    33% { background-position-x: -48px; }
    66% { background-position-x: -96px; }
}

@keyframes walk-cycle-showcase {
    0%, 100% { background-position-x: 0; }
    33% { background-position-x: -96px; }
    66% { background-position-x: -192px; }
}

.actor-sprite.walking {
    animation: walk-cycle 0.6s steps(1) infinite;
}

.showcase-sprite.walking {
    animation: walk-cycle-showcase 0.6s steps(1) infinite;
}

/* Idle state - no animation, just standing still */
.actor-sprite.idle {
    /* Static pose, no animation */
}