:root {
    --track-width: 600px;
    --vehicle-size: 80px;
}

body {
    font-family: 'Bebas Neue', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #2c3e50; /* Dark road color */
    color: #ecf0f1;
}

#game-container {
    background-color: #34495e;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    text-align: center;
    max-width: 700px;
    width: 90%;
}

h1 {
    color: #f1c40f;
    margin-bottom: 20px;
}

#status-area {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}

/* --- Race Track --- */
#race-track {
    width: var(--track-width);
    height: 100px;
    background: repeating-linear-gradient(
        to right, 
        #7f8c8d, #7f8c8d 10px, 
        #bdc3c7 10px, #bdc3c7 20px /* Simulated dashed road line */
    );
    border: 5px solid #bdc3c7;
    border-radius: 8px;
    margin: 0 auto;
    position: relative;
    cursor: grab; /* Indicates dragging is required */
    overflow: hidden;
}

/* --- Vehicle --- */
#vehicle {
    width: var(--vehicle-size);
    height: var(--vehicle-size);
    /* Placeholder for the vehicle image */
    background-image: url('images/car-sprite.png'); /* !!! UPDATE THIS PATH !!! */
    background-size: cover;
    background-color: #e74c3c; /* Red placeholder */
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 0; /* Initial position */
    transition: transform 0.1s linear; /* Smooth visual movement */
}

/* --- Controls and Feedback --- */
#feedback-message {
    min-height: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 1.1em;
}

#start-button {
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#start-button:hover:not(:disabled) {
    background-color: #2980b9;
}