/* Adaptive Sprite CSS - No JavaScript Required */
/* Auto-generated for 50 sprites */

:root {
    --sprite-width: 128px;
    --sprite-height: 128px;
    --sprites-per-row: 10;
    --sprite-scale: 1;
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    :root {
        --sprite-scale: 0.9;
    }
}

@media (max-width: 1024px) {
    :root {
        --sprite-scale: 0.8;
    }
}

@media (max-width: 768px) {
    :root {
        --sprite-scale: 0.6;
    }
}

@media (max-width: 480px) {
    :root {
        --sprite-scale: 0.4;
    }
}

@media (max-width: 320px) {
    :root {
        --sprite-scale: 0.3;
    }
}

/* Base sprite class */
.sprite {
    display: inline-block;
    background-image: url('/images/sprites-tiny.png');
    background-repeat: no-repeat;
    background-color: transparent; 
    width: 100px;   
    height: 100px;
    background-size: calc(var(--sprite-width) * var(--sprites-per-row) * var(--sprite-scale)) auto;
    margin-top: 10px;
    filter: contrast(200%) brightness(100%) saturate(200%) blur(1px);
    pointer-events: none !important;
    

}


/* Individual sprite positions - Row 1 (sprites 1-10) */
.sprite-1 { background-position: calc(-0 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-2 { background-position: calc(-1 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-3 { background-position: calc(-2 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-4 { background-position: calc(-3 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-5 { background-position: calc(-4 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-6 { background-position: calc(-5 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-7 { background-position: calc(-6 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-8 { background-position: calc(-7 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-9 { background-position: calc(-8 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-10 { background-position: calc(-9 * var(--sprite-width) * var(--sprite-scale)) calc(-0 * var(--sprite-height) * var(--sprite-scale)); }

/* Row 2 (sprites 11-20) */
.sprite-11 { background-position: calc(-0 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-12 { background-position: calc(-1 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-13 { background-position: calc(-2 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-14 { background-position: calc(-3 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-15 { background-position: calc(-4 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-16 { background-position: calc(-5 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-17 { background-position: calc(-6 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-18 { background-position: calc(-7 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-19 { background-position: calc(-8 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-20 { background-position: calc(-9 * var(--sprite-width) * var(--sprite-scale)) calc(-1 * var(--sprite-height) * var(--sprite-scale)); }

/* Row 3 (sprites 21-30) */
.sprite-21 { background-position: calc(-0 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-22 { background-position: calc(-1 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-23 { background-position: calc(-2 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-24 { background-position: calc(-3 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-25 { background-position: calc(-4 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-26 { background-position: calc(-5 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-27 { background-position: calc(-6 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-28 { background-position: calc(-7 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-29 { background-position: calc(-8 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-30 { background-position: calc(-9 * var(--sprite-width) * var(--sprite-scale)) calc(-2 * var(--sprite-height) * var(--sprite-scale)); }

/* Row 4 (sprites 31-40) */
.sprite-31 { background-position: calc(-0 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-32 { background-position: calc(-1 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-33 { background-position: calc(-2 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-34 { background-position: calc(-3 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-35 { background-position: calc(-4 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-36 { background-position: calc(-5 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-37 { background-position: calc(-6 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-38 { background-position: calc(-7 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-39 { background-position: calc(-8 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-40 { background-position: calc(-9 * var(--sprite-width) * var(--sprite-scale)) calc(-3 * var(--sprite-height) * var(--sprite-scale)); }

/* Row 5 (sprites 41-50) */
.sprite-41 { background-position: calc(-0 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-42 { background-position: calc(-1 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-43 { background-position: calc(-2 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-44 { background-position: calc(-3 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-45 { background-position: calc(-4 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-46 { background-position: calc(-5 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-47 { background-position: calc(-6 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-48 { background-position: calc(-7 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-49 { background-position: calc(-8 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-50 { background-position: calc(-9 * var(--sprite-width) * var(--sprite-scale)) calc(-4 * var(--sprite-height) * var(--sprite-scale)); }

/* Row 6 (sprites 51-60) */
.sprite-51 { background-position: calc(-0 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-52 { background-position: calc(-1 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-53 { background-position: calc(-2 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-54 { background-position: calc(-3 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-55 { background-position: calc(-4 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-56 { background-position: calc(-5 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-57 { background-position: calc(-6 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-58 { background-position: calc(-7 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-59 { background-position: calc(-8 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }
.sprite-60 { background-position: calc(-9 * var(--sprite-width) * var(--sprite-scale)) calc(-5 * var(--sprite-height) * var(--sprite-scale)); }