body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* @tweakable The background color of the page */
    background-color: green; /* Changed background to green */
    margin: 0;
    font-family: sans-serif;
}

#race-container {
    position: relative;
    /* Dimensions will be set by JS based on map image */
    /* Removed border */
    overflow: hidden; /* Ensure elements stay within bounds visually */
    /* Removed background-color */
}

#map {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure map aspect ratio is maintained */
}

#horses-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow interaction with elements below if needed */
}

.horse {
    position: absolute;
    /* Width/Height set by JS */
    /* Filter set by JS */
    object-fit: contain; /* Adjust as needed (contain or cover) */
    pointer-events: none; /* Should already be covered by container, but safe */
    image-rendering: pixelated; /* Optional: if you want sharper edges */
    will-change: transform, filter, width, height, opacity; /* Optimize rendering for movement, filters, size, opacity */
    /* transform-origin is set by JS for the winner */
    /* transition is set by JS for the winner */
}

#start-marker, #goal-marker {
    position: absolute;
    /* Position set by JS */
}

#start-marker {
    width: 15px;
    height: 15px;
    visibility: hidden;
}

#goal-marker {
    width: 30px; /* Maintain carrot size */
    height: 30px;
    box-sizing: border-box;
    object-fit: contain;
}

#winner-message {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    z-index: 10;
    border: 1px solid #ccc;
    color: #333; /* Base color for "Winner:" text */
}

#winner-name {
   font-weight: bold;
   /* Color/filter applied by JS */
   /* Background/padding applied by JS */
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Stack button and countdown vertically */
    justify-content: center;
    align-items: center;
    z-index: 20; /* Above everything else */
    background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent overlay */
    pointer-events: all; /* Allow clicks on overlay elements */
    transition: background-color 0.5s ease; /* Added transition for scrim fade */
}

#startButton {
    /* Styles for the start button image */
    width: 150px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer;
    border: none; /* No border for image */
    background: none; /* No background for image */
    padding: 0; /* No padding for image */
    transition: opacity 0.3s ease; /* Add transition for fading out */
    pointer-events: auto; /* Ensure button is clickable */
    user-select: none; /* Prevent image dragging */
}

#startButton:hover {
    opacity: 0.9; /* Slight visual feedback on hover */
}

#startButton:disabled {
     /* Not applicable to image, but keep for potential future use */
    opacity: 0.5; /* Dim if disabled */
    cursor: not-allowed;
}

#countdown-container {
    position: absolute; /* Position relative to race-container or overlay */
    /* Adjusted position to center the countdown */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25; /* Above the button if needed */
    display: flex; /* Use flexbox for centering canvas */
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Don't block clicks */
}

#countdown-canvas {
    /* The internal canvas size will be set by JS,
       but we scale it up using CSS transform for pixelation effect */
    /* Or we set a smaller internal size and scale the display size */
    /* Let's set a display size here and let JS handle internal */
     width: 300px; /* Display width */
     height: 150px; /* Display height */
     /* Optional: background for canvas */
     /* background-color: rgba(255, 255, 255, 0.7); */
}