/* FISH */
.lobby {
    [class*="fish-"]::after {
        opacity: 1;
    }
    .margin::after {
        opacity: 0.2;
    }
}
[class*="fish-"]::after, .margin::after, .empty-empty::after {
    content: " ";
    position: absolute;
    height: 48px;
    width: 48px;
    scale: 0.9;
    opacity: 0.2;
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    
}
.hit[class*="fish-"]::after {
    animation: caught 0.5s;
    opacity: 1;
}
.hit::before {
    content: " ";
    position: absolute;
    animation: hit 0.5s;
}
.fish-1::after {
    background: url('/public/images/sprites.png') 0 0;
}
.fish-2::after {
    background: url('/public/images/sprites.png') -48px 0;
}
.fish-3::after {
    background: url('/public/images/sprites.png') -96px 0;
}
.fish-4::after {
    background: url('/public/images/sprites.png') -144px 0;
}
.fish-5::after {
    background: url('/public/images/sprites.png') -192px 0;
}
.fish-6::after {
    background: url('/public/images/sprites.png') -240px 0;
}
.fish-7::after {
    background: url('/public/images/sprites.png') -288px 0;
}
.fish-8::after {
    background: url('/public/images/sprites.png') -336px 0;
}
.fish-9::after {
    background: url('/public/images/sprites.png') -384px 0;
}
.fish-10::after {
    background: url('/public/images/sprites.png') -432px 0;
}
.fish-11::after {
    background: url('/public/images/sprites.png') 0 -48px;
}
.fish-12::after {
    background: url('/public/images/sprites.png') -48px -48px;
}
.fish-13::after {
    background: url('/public/images/sprites.png') -96px -48px;
}
.fish-14::after {
    background: url('/public/images/sprites.png') -144px -48px;
}
.fish-15::after {
    background: url('/public/images/sprites.png') -192px -48px;
}
.fish-16::after {
    background: url('/public/images/sprites.png') -240px -48px;
}
.fish-17::after {
    background: url('/public/images/sprites.png') -288px -48px;
}
.fish-18::after {
    background: url('/public/images/sprites.png') -336px -48px;
}
.fish-19::after {
    background: url('/public/images/sprites.png') -384px -48px;
}
.fish-20::after {
    background: url('/public/images/sprites.png') -432px -48px;
}
.fish-21::after {
    background: url('/public/images/sprites.png') 0 -96px;
}
.fish-22::after {
    background: url('/public/images/sprites.png') -48px -96px;
}

.margin::after{
    background: url('/public/images/sprites.png') -432px -432px;
    opacity: 0.2;
}
.empty-empty::after {
    background: url('/public/images/sprites.png') -432px -432px;
    opacity: 0.8;
    animation: empty 0.5s;
}