.cat-bed-1-1 {
    width: calc(var(--unit-size) * 10);
    height: calc(var(--unit-size) * 6);
    background-image: url('images/pet-game/cat-bed-1-1.png');
    background-repeat: no-repeat;   /* prevents infinite tiling */
    background-position: center center;  /* centers the image */
    background-size: cover;         /* scales image to cover */
    z-index: 14;
}

.flooring-1 {
    width: calc(var(--unit-size) * 8);
    height: calc(var(--unit-size) * 10);
    background-image: url('images/pet-game/flooring-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.wallpaper-lilac {
    width: calc(var(--unit-size) * 8);
    height: calc(var(--unit-size) * 13);
    background-image: url('images/pet-game/wallpaper-lilac.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
}

.wallpaper-beige {
    width: calc(var(--unit-size) * 8);
    height: calc(var(--unit-size) * 13);
    background-image: url('images/pet-game/wallpaper-beige.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
}

.baseboard-1 {
    width: calc(var(--unit-size) * 8);
    height: calc(var(--unit-size) * 1);
    background-image: url('images/pet-game/baseboard-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 2;
}

.shelf-1 {
    width: calc(var(--unit-size) * 8);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/shelf-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.small-plant-1 {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 4);
    background-image: url('images/pet-game/small-plant-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.cat-food-bowl-1 {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/cat_food_bowl_1_empty.png');
        background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.cat-food-bowl-1.full {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/cat_food_bowl_1_full.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.cat-water-bowl-1 {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/cat_water_bowl_1_empty.png');
        background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.cat-water-bowl-1.full {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/cat_water_bowl_1_full.png');
        background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.medium-table-1 {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 6);
    background-image: url('images/pet-game/medium-table-1.png');
        background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.window-1-m-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 10);
    background-image: url('images/pet-game/window-1-m-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 3;
}

.window-1-s-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 8);
    background-image: url('images/pet-game/window-1-s-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 3;
}

.window-1-xs-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 6);
    background-image: url('images/pet-game/window-1-xs-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 3;
}

.window-1-l-1 {
    width: calc(var(--unit-size) * 12);
    height: calc(var(--unit-size) * 10);
    background-image: url('images/pet-game/window-1-l-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 3;
}

.window-sill-m-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/window-sill-m-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.window-sill-l-1 {
    width: calc(var(--unit-size) * 12);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/window-sill-l-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.drapes-1-s-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 6);
    background-image: url('images/pet-game/drapes-1-s-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.drapes-1-xs-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 4);
    background-image: url('images/pet-game/drapes-1-xs-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.drapes-1-m-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 8);
    background-image: url('images/pet-game/drapes-1-m-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.drapes-1-l-s-1 {
    width: calc(var(--unit-size) * 12);
    height: calc(var(--unit-size) * 4);
    background-image: url('images/pet-game/drapes-1-l-s-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.drapes-1-l-m-1 {
    width: calc(var(--unit-size) * 12);
    height: calc(var(--unit-size) * 6);
    background-image: url('images/pet-game/drapes-1-l-m-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.drapes-1-l-l-1 {
    width: calc(var(--unit-size) * 12);
    height: calc(var(--unit-size) * 8);
    background-image: url('images/pet-game/drapes-1-l-l-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 4;
}

.fridge-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 10);
    background-image: url('images/pet-game/fridge-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.carpet-1-m-h-1 {
    width: calc(var(--unit-size) * 12);
    height: calc(var(--unit-size) * 6);
    background-image: url('images/pet-game/carpet-1-m-h-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.carpet-1-m-v-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 12);
    background-image: url('images/pet-game/carpet-1-m-v-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.carpet-1-s-h-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 4);
    background-image: url('images/pet-game/carpet-1-s-h-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.carpet-1-s-v-1 {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 6);
    background-image: url('images/pet-game/carpet-1-s-v-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.carpet-1-l-h-1 {
    width: calc(var(--unit-size) * 24);
    height: calc(var(--unit-size) * 12);
    background-image: url('images/pet-game/carpet-1-l-h-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.carpet-1-l-v-1 {
    width: calc(var(--unit-size) * 12);
    height: calc(var(--unit-size) * 16);
    background-image: url('images/pet-game/carpet-1-l-v-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.gramophone-1 {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 8);
    background-image: url('images/pet-game/gramophone-1.png');
    background-repeat: no-repeat;
    background-size: calc(var(--unit-size) * 6 * 2) calc(var(--unit-size) * 8 * 2); /* sprite sheet total size */
    animation: musicPlayerOff 1s steps(1) infinite;
    z-index: 14;
}

.gramophone-1.item-preview {
    width: calc(var(--unit-size) *6);
    height: calc(var(--unit-size) * 8);
    background-image: url('images/pet-game/gramophone-1-preview.png');
    background-repeat: no-repeat;
    animation: none;
    z-index: 14;
}

@keyframes musicPlayerOff {
    0% { background-position: 0 0; } /* 0 first column number 0 row number*/
}

@keyframes musicPlayerOn {
    0%, 50% { background-position: 0 calc(var(--unit-size) * 8 * -1); } /* Bottom-left frame */
    50.01%, 100% { background-position: calc(var(--unit-size) * 6 * -1) calc(var(--unit-size) * 8 * -1); } /* Bottom-right frame */
}

.bath-1-1 {
    width: calc(var(--unit-size) * 10);
    height: calc(var(--unit-size) * 10);
    background-image: url('images/pet-game/bath-1-1.png');
    background-repeat: no-repeat;
    background-size: calc(var(--unit-size) * 10 * 7) calc(var(--unit-size) * 10 * 3);
    animation: bath-1-empty 1s steps(1) infinite;
    z-index: 14;
}

.bath-1-1.cat-1-1 {
    width: calc(var(--unit-size) * 10);
    height: calc(var(--unit-size) * 10);
    background-image: url('images/pet-game/bath-1-1-cat-1-1.png');
    background-repeat: no-repeat;
    background-size: calc(var(--unit-size) * 10 * 7) calc(var(--unit-size) * 10 * 3);
    animation: bath-1-empty 1s steps(1) infinite;
    z-index: 14;
}

.bath-1-1.item-preview {
    width: calc(var(--unit-size) * 10);
    height: calc(var(--unit-size) * 6);
    background-image: url('images/pet-game/bath-1-1-preview.png');
    animation: none;
    background-repeat: no-repeat;
}


/* --- Empty --- */
@keyframes bath-1-empty {
    from { background-position: 0 calc(0 * var(--unit-size) * -10); }
    to   { background-position: calc(-6 * var(--unit-size) * 10) calc(0 * var(--unit-size) * -10); }
}

/* --- Filled --- */
@keyframes bath-1-filled {
    from { background-position: 0 calc(-1 * var(--unit-size) * 10); }
    to   { background-position: calc(-6 * var(--unit-size) * 10) calc(-1 * var(--unit-size) * 10); }
}

/* --- With pet --- */
@keyframes bath-1-with-pet {
    from { background-position: 0 calc(-2 * var(--unit-size) * 10); }
    to   { background-position: calc(-6 * var(--unit-size) * 10) calc(-2 * var(--unit-size) * 10); }
}

.cat-food-1 {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 4);
    background-image: url('images/pet-game/cat-food-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.food-salmon {
    width: calc(var(--unit-size) * 6);
    height: calc(var(--unit-size) * 4);
    background-image: url('images/pet-game/food-salmon.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.cat-treat-1 {
    width: calc(var(--unit-size) * 4);
    height: calc(var(--unit-size) * 4);
    background-image: url('images/pet-game/cat-treat-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.christmas-tree-1 {
    width: calc(var(--unit-size) * 10);
    height: calc(var(--unit-size) * 13);
    background-image: url('images/pet-game/christmas-tree-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 14;
}

.christmas-lights-1 {
    width: calc(var(--unit-size) * 8);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/christmas-lights-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-size: calc(var(--unit-size) * 8 * 2) calc(var(--unit-size) * 2);
    animation: christmas-lights-1-blinking 3s steps(2) infinite;
    z-index: 5;
}

@keyframes christmas-lights-1-blinking {
    from {
        background-position: 0 0;
    }
    to {
        background-position: calc(2* -8 * var(--unit-size)) 0;
    }
}

.christmas-lights-1.item-preview {
    width: calc(var(--unit-size) * 8);
    height: calc(var(--unit-size) * 2);
    background-image: url('images/pet-game/christmas-lights-1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-size: calc(var(--unit-size) * 8 * 2) calc(var(--unit-size) * 2);
    animation:  none;
    z-index: 5;
}