/* Player's Car Container */
#car {
    position: absolute; /* Absolute positioning within its container */
    transform: translate(0, 0) rotate(0deg);
    z-index: var(--z-car); /* Ensures the car is at the forefront of most elements */
}

/* Car Image Styling */
#car-img {
    width: 35px; /* Width of the car image */
    height: 70px; /* Height of the car image */
    position: relative; /* Relative positioning to ensure layering with the car */
}

/* Common Headlight Styles */
.headlight {
    width: 35px; /* Matches the width of the car */
    height: 150px; /* Length of the headlight beam */
    position: absolute; /* Positioned relative to the car */
    top: -120px; /* Positioned above the car */
    background: radial-gradient(circle, rgba(255, 255, 128, 0.8) 10%, rgba(255, 255, 255, 0) 70%); /* Headlight beam effect */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Triangle shape to simulate a beam */
    pointer-events: none; /* Allows elements to be clickable behind the headlights */
    transform: rotate(180deg); /* Rotates the beam so it's directed outwards */
}

/* Positioning for the Left Headlight */
#left-headlight {
    left: -8px; /* Positioned to the left of the car's center */
}

/* Positioning for the Right Headlight */
#right-headlight {
    left: 8px; /* Positioned to the right of the car's center */
}

/* Car Hitbox for Collision Detection */
#player-hitbox {
    width: 28px; /* Slightly smaller than the car's width */
    height: 65px; /* Slightly smaller than the car's height */
    background-color: rgba(0, 255, 0, 0.3); /* Semi-transparent green color for the hitbox */
    border: 1px solid var(--green-dark); /* Green border for visibility */
    visibility: hidden; /* Hidden by default unless activated (e.g., for debugging or visualization) */
}

.car-effect {
    position: absolute; /* Positioned over the car */
    background-size: cover; /* Ensures the confetti image fits the div */
    background-repeat: no-repeat; /* No repeating of the confetti image */
}

/* Car Explosion Effect */
#car-explosion {
    width: 100px; /* Explosion image size */
    height: 100px; /* Explosion image size */
    top: -10px; /* Slight adjustment to place it over the car */
    left: -30px; /* Slight adjustment to place it over the car */
}

/* Car Confetti Effect */
#car-confetti {
    width: 250px; /* Large confetti area */
    height: 250px; /* Large confetti area */
    top: -145px; /* Positioned higher relative to the car */
    left: -110px; /* Adjusted horizontally relative to the car */
    background-image: url(../img/gifs/confetti.gif);
}