body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
background: linear-gradient(135deg, #90EE90, #228B22);
    font-family: Arial, sans-serif;
}

.container {
    text-align: center;
}

.fish {
    cursor: pointer;
    transition: all 0.5s ease;
    transform-origin: center;
    width: 300px;
    height: 120px;
    display: inline-block;
}

.fish-svg {
    width: 100%;
    height: 100%;
}

.fish:hover {
    transform: scale(1.1);
}

.fish.blue { color: #4682B4; } /* Bleu aquarium */
.fish.red { color: #FF6347; }  /* Saumon */
.fish.green { color: #32CD32; } /* Perche verte */
.fish.yellow { color: #DAA520; } /* Dorade dorée */

.message {
    font-size: 2em;
color: #FF8C00;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.message.show {
    opacity: 1;
    transform: translateY(0);
}

.hidden {
    display: none;
}

/* 🎆 ANIMATIONS 10ème CLIC */
@keyframes explode {
    0% { transform: scale(1); }
    50% { transform: scale(2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes confetti-fall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes party {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(180deg) brightness(1.5); }
}

.fish.explode { animation: explode 1s ease-in-out; }
body.shake { animation: shake 0.6s ease-in-out; }
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #FF6B6B;
    pointer-events: none;
    z-index: 1000;
    animation: confetti-fall 2s linear infinite;
}

body.party { animation: party 2s infinite; }