/* ============================================
   Fish Animation Styles
   ============================================ */

.fish {
    position: absolute;
    /* Default values - can be overridden by inline styles from fish type configuration */
    width: var(--fish-size, 60px);
    height: var(--fish-size, 60px);
    z-index: var(--z-fish);
    /* Background image is set via inline styles from fish type configuration */
    /* DO NOT set background-image here - it will be set inline by JavaScript */
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: center center;
    transition: transform var(--fish-transition, 0.1s linear);
    pointer-events: none;
    will-change: transform, left, top;
}

/* Fish type specific styles - background images and sizes */
.fish[data-fish-type="golden_fish"] {
    background-image: url('/assets/images/fish/golden_fish.png') !important;
    width: 60px !important;
    height: 60px !important;
}

.fish[data-fish-type="blue_cromis"] {
    background-image: url('/assets/images/fish/blue_cromis.png') !important;
    width: 60px !important;
    height: 60px !important;
}

/* Only apply default background-image for fish without a type (fallback) */
.fish[data-fish-type="default"] {
    background-image: url('https://static.vecteezy.com/system/resources/thumbnails/037/446/548/small/goldfish-isolated-on-transparent-background-ornamental-fish-generative-ai-png.png');
}

.fish.flip {
    transform: scaleX(-1);
}