/* 
 * Modern Sprite System - Replaces thousands of generated CSS rules
 * Uses CSS Custom Properties and data attributes for dynamic sprites
 */

/* Base sprite class - replaces individual item classes */
.sprite-icon {
    background-image: var(--sprite-image);
    background-size: var(--sprite-bg-size-x, 100%) var(--sprite-bg-size-y, 100%);
    background-position: var(--sprite-bg-pos-x, 0%) var(--sprite-bg-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    width: var(--sprite-width, 32px);
    height: var(--sprite-height, 32px);
    display: inline-block; /* Ensure it has dimensions */
}

/* Override margin for item-image context */
.sprite-icon.item-image {
    margin: 5px; /* Match the original item-image margin */
}

/* Inline icons in text */
.sprite-icon.inline-icon {
    vertical-align: middle;
    margin: 0 8px; /* Small padding on left and right */
}

/* Animated sprite support */
.animated-sprite {
    animation: var(--sprite-animation) var(--sprite-duration, 1s) infinite;
}

/* Sprite size classes */
.sprite-icon-16 {
    width: 16px;
    height: 16px;
}

.sprite-icon-25 {
    width: 25px;
    height: 25px;
}

.sprite-icon-32 {
    width: 32px;
    height: 32px;
}

.sprite-icon-48 {
    width: 48px;
    height: 48px;
}

.sprite-icon-64 {
    width: 64px;
    height: 64px;
}

/* Compatibility with old slot-icon sizes */
.slot-icon.sprite-icon {
    width: 32px;
    height: 32px;
}

.slot-icon-48.sprite-icon {
    width: 48px;
    height: 48px;
}

.slot-icon-25.sprite-icon {
    width: 25px;
    height: 25px;
}

.slot-icon-16.sprite-icon {
    width: 16px;
    height: 16px;
}

/* Textile sprites - special handling */
.textile-sprite {
    background-image: url("../images/spritesheet/Textiles_10x10.png");
    background-size: var(--textile-bg-size, 2560%);
    background-position: var(--textile-bg-pos-x, 0%) var(--textile-bg-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    width: var(--sprite-width, 40px);
    height: var(--sprite-height, 40px);
}

/* Textile mask */
.textile-mask {
    mask-image: var(--mask-image);
    mask-size: var(--mask-bg-size-x, 100%) var(--mask-bg-size-y, 100%);
    mask-position: var(--mask-bg-pos-x, 0%) var(--mask-bg-pos-y, 0%);
    mask-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* Status effect sprites */
.status-effect-sprite {
    background-image: url("../images/spritesheet/ui.png");
    background-size: var(--sprite-bg-size-x, 100%) var(--sprite-bg-size-y, 100%);
    background-position: var(--sprite-bg-pos-x, 0%) var(--sprite-bg-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin: auto;
    width: var(--sprite-width, 32px);
    height: var(--sprite-height, 32px);
}

/* Animated sprites */
.animated-sprite {
    background-image: var(--sprite-image);
    background-size: var(--sprite-bg-size-x, 100%) var(--sprite-bg-size-y, 100%);
    background-position: var(--sprite-bg-pos-x, 0%) var(--sprite-bg-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin: auto;
    width: var(--sprite-width, 32px);
    height: var(--sprite-height, 32px);
    animation: var(--sprite-animation) var(--sprite-duration, 1s) steps(1, end) infinite;
}

/* Animation keyframes - we'll generate these dynamically but much fewer */
@keyframes sprite-animation-2 {
    0% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
    50% { background-position: var(--frame-1-x, 0%) var(--frame-1-y, 0%); }
    100% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
}

@keyframes sprite-animation-3 {
    0% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
    33% { background-position: var(--frame-1-x, 0%) var(--frame-1-y, 0%); }
    66% { background-position: var(--frame-2-x, 0%) var(--frame-2-y, 0%); }
    100% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
}

@keyframes sprite-animation-4 {
    0% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
    25% { background-position: var(--frame-1-x, 0%) var(--frame-1-y, 0%); }
    50% { background-position: var(--frame-2-x, 0%) var(--frame-2-y, 0%); }
    75% { background-position: var(--frame-3-x, 0%) var(--frame-3-y, 0%); }
    100% { background-position: var(--frame-0-x, 0%) var(--frame-0-y, 0%); }
}

/* Size variants */
.sprite-icon.size-16 { width: 16px; height: 16px; }
.sprite-icon.size-24 { width: 24px; height: 24px; }
.sprite-icon.size-32 { width: 32px; height: 32px; }
.sprite-icon.size-48 { width: 48px; height: 48px; }
.sprite-icon.size-64 { width: 64px; height: 64px; }

/* Special cases */
.enraged-effect {
    background-image: var(--particles-spritesheet);
    background-size: var(--sprite-bg-size-x, 100%) var(--sprite-bg-size-y, 100%);
    background-position: var(--enraged-pos-x, 0%) var(--enraged-pos-y, 0%);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin: auto;
    width: 32px;
    height: 32px;
}

/* Hover effects for interactive sprites */
.sprite-icon.interactive:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Clickable sprites in navigation and main pages */
.main-menu .sprite-icon,
.main-menu .slot-icon,
.navigation .sprite-icon,
.navigation .slot-icon,
.category-container .sprite-icon,
.category-container .slot-icon,
.contentGrid .sprite-icon,
.contentGrid .slot-icon,
.contentReplace .sprite-icon,
.contentReplace .slot-icon {
    cursor: pointer;
}

/* Loading state */
.sprite-icon.loading {
    background: #333;
    animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}