#game-container 
{
            margin:0 auto;

        }

        #shooter {
            position: absolute; 
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            left: 50%; /* Center horizontally */
            transform: translateX(-50%); /* Adjust for accurate centering */
            z-index: 10;

            /* --- NEW/UPDATED FOR ROTATION --- */
            /* Defines the point around which the shooter image will pivot.
               For a repeater, it's often its base or slightly above.
               Adjust '50% 90%' to fine-tune the pivot point for your specific image. */
            transform-origin: 50% 50%;
            /* Makes the rotation appear smoother */
            transition: transform 0.05s linear; /* Adjust duration for desired smoothness */
        }

        .projectile {
            position: absolute;
            width: 30px; /* Size of the projectile image */
            height: 30px;
            background-image: url('../image/pea.png'); /* Your Pea image */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 5;
            /* Transition for smooth movement */
            transition: transform 0.5s linear, opacity 0.5s ease-out;
        }