html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('background.png');
    background-size: cover;
    overflow: hidden;
}

#car {
    position: absolute;
    bottom: 10px;
    left: 180px;
    width: 40px;
    height: 60px;
    background-image: url('spaceship.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 20; /* Car on top of letters */
}

.letter-circle {
    position: absolute;
    background-color: purple;
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;
    z-index: 10; /* Letters below car/projectiles */
}

/* Update top-bar to handle the new grouping */
#top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px; /* Added some side padding */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; /* Keeps left group, center, and right apart */
    align-items: center;
    color: white;
    font-family: sans-serif;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.5); /* Slightly darker for readability */
    z-index: 100;
}

#score, #alphabet-display, #timer {
    margin: 0 10px;
    white-space: nowrap;
}

/* New Container for Score + Stars */
#stats-left {
    display: flex;
    align-items: center;
    gap: 20px; /* Creates space between "Score: 0" and the Star */
}

/* Style the star area */
#star-tracker {
    display: flex;
    align-items: center;
    gap: 2px; /* Small space between stars */
    margin-left: 15px;
    height: 30px; /* Reserve height so bar doesn't jump */
}

/* The permanent stars in the top bar */
.static-star {
    font-size: 24px;
    color: gold;
    text-shadow: 0 0 5px orange;
    opacity: 0; /* Starts invisible, JS reveals it later */
    transition: opacity 0.2s;
}

/* A little effect when the star lands */
.star-landed {
    animation: star-pop-in 0.3s ease-out forwards;
}

@keyframes star-pop-in {
    0% { transform: scale(0.5); opacity: 1; }
    50% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.target-star-icon {
    font-size: 30px; /* Make the target icon slightly bigger */
    margin-right: 5px; /* Space between icon and number */
}

#alphabet-display {
    flex-grow: 1;
    text-align: center;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: sans-serif;
}

.screen h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.screen p {
    font-size: 24px;
    margin-bottom: 20px;
}

.screen button {
    padding: 10px 20px;
    font-size: 24px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}

.frontpage-spaceship {
    max-width: 90%;
    max-height: 40vh;
    width: auto;
    height: auto;
    margin-bottom: 20px;
    object-fit: contain;
}

#difficulty-selection {
    display: flex;
    gap: 20px;
}

.difficulty-button {
    padding: 10px 30px;
}

.projectile {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: yellow;
    z-index: 25; /* Projectiles on top of car */
}

#restart-button-ingame {
    font-size: 24px;
    background-color: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 5px;
    padding: 5px 15px;
    cursor: pointer;
}

#restart-button-ingame:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Star System Styling */
#star-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through */
    overflow: hidden;
    z-index: 101; /* Above top bar */
}

.animated-star {
    position: absolute;
    /* Use 'display: block' or 'inline-block' to ensure transform works */
    display: block; 
    font-size: 80px; 
    color: gold;
    text-shadow: 0 0 10px yellow, 0 0 20px orange;
    opacity: 1; /* Start visible (handled by keyframes) */
    
    /* Center the pivot point for scaling */
    transform-origin: center center;
    
    /* Use the animation */
    animation: star-fly-animation 1.0s ease-in-out forwards;
    pointer-events: none;
    z-index: 1000; /* Ensure it is on top of everything */
}

@keyframes star-fly-animation {
    0% {
        /* Start at the original position (0,0 relative displacement) */
        transform: translate(-50%, -50%) scale(0.1); /* Start small */
        opacity: 0;
    }
    15% {
        /* Pop up big */
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
    30% {
        /* Stay big for a moment */
        transform: translate(-50%, -50%) scale(1.0);
    }
    100% {
        /* Move by the DELTA amount calculated in JS */
        /* We use calc to account for the -50% centering if you want, 
           but usually just moving to delta is fine. */
        transform: translate(var(--delta-x), var(--delta-y)) scale(0.2);
        opacity: 0;
    }
}
#game-over-stars-display {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 20px; /* Adjust size for display */
    color: gold;
    text-shadow: 0 0 5px yellow;
}

.game-over-star {
    margin: 0 2px;
}