body {
    /* Fallback color if image fails to load */
    background-color: #d5af63;
    
    /* LINK TO YOUR IMAGE */
    /* Assuming your HTML file is in the "TEMPLATEpie daddy" folder */
    #background-image: url('assets/bggenius.png');
    
    /* SCALING OPTIONS */
    background-size: cover;      /* Scales image to fill the screen */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;/* Prevents tiling */
    
    /* Your existing styles */
    color: #ecf0f1;
    font-family: 'Press Start 2P', cursive;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

#game-container {
    /* Existing styles */
    text-align: center;
    position: relative;
    border: 4px solid #2a3a5b;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    width: 95%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* ADD THIS BACKGROUND CODE HERE */
    background-color: #223c77; /* Fallback color */
    #background-image: url('assets/bggenius.png');
    background-size: cover;
    background-position: center;
}

h1 {
    color: #f1c40f;
    text-shadow: 4px 4px #c0392b;
    margin-top: 0;
    font-size: 2rem;
}

#ui-layer {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 1.2rem;
}

.player-name {
    color: #3498db;
}

canvas {
    /* This puts the image inside the white game box */
    background-image: url('assets/bggenius.png'); 
    background-size: cover;
    background-position: center;
    
    /* Keep your existing border and size settings */
    border: 4px solid #d5af63;
    cursor: crosshair;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

#controls {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #bdc3c7;
}