/* 游戏元素基础样式 */
.fish {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center;
    z-index: 10;
    transition: transform 0.1s;
}

.fish.player {
    z-index: 15;
}

.fish.eating {
    animation: eating 0.3s forwards;
}

@keyframes eating {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.fish.level-up {
    animation: levelUp 1s forwards;
}

@keyframes levelUp {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.fish.invincible {
    animation: invincible 0.5s infinite alternate;
}

@keyframes invincible {
    from { filter: brightness(1.5) drop-shadow(0 0 5px gold); }
    to { filter: brightness(1.8) drop-shadow(0 0 10px gold); }
}

.fish.speed-up {
    animation: speedUp 0.5s infinite alternate;
}

@keyframes speedUp {
    from { filter: brightness(1.2) drop-shadow(0 0 5px cyan); }
    to { filter: brightness(1.5) drop-shadow(0 0 10px cyan); }
}

.fish.speed-down {
    animation: speedDown 0.5s infinite alternate;
}

@keyframes speedDown {
    from { filter: brightness(0.8) drop-shadow(0 0 5px purple); }
    to { filter: brightness(0.6) drop-shadow(0 0 10px purple); }
}

.fish.stealth {
    animation: stealth 0.5s infinite alternate;
}

@keyframes stealth {
    from { opacity: 0.6; filter: blur(1px); }
    to { opacity: 0.4; filter: blur(2px); }
}

/* 道具样式 */
.item {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 20;
    animation: float 2s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.item.glow {
    animation: glow 1.5s infinite alternate, float 2s infinite ease-in-out;
}

@keyframes glow {
    from { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)); }
    to { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)); }
}

.item.treasure-chest {
    z-index: 25;
}

/* 障碍物样式 */
.obstacle {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 5;
}

/* 特效样式 */
.effect {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 30;
}

.bubble {
    position: absolute;
    background-image: url('../images/effects/bubble.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    animation: bubbleRise linear;
}

@keyframes bubbleRise {
    0% { transform: translateY(0) scale(0.3); opacity: 0.5; }
    50% { transform: translateY(-50px) scale(0.6); opacity: 0.8; }
    100% { transform: translateY(-100px) scale(0.2); opacity: 0; }
}

/* 鸟类样式 */
.bird {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
    animation: birdFly linear infinite;
}

@keyframes birdFly {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

/* 船只样式 */
.boat {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
    animation: boatFloat 3s infinite ease-in-out;
}

@keyframes boatFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 沉船障碍物样式 */
.shipwreck {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 6;
}

/* 珊瑚礁样式 */
.coral {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 4;
}

/* 水草样式 */
.seaweed {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 4;
    animation: seaweedSway 3s infinite ease-in-out;
}

@keyframes seaweedSway {
    0%, 100% { transform: skewX(5deg); }
    50% { transform: skewX(-5deg); }
}

/* 方向指示器 */
.direction-indicator {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    z-index: 40;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* 死亡特效 */
.death-effect {
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('../images/effects/death.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 35;
    animation: deathAnim 0.5s forwards;
}

@keyframes deathAnim {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}