/* --- Global Styles --- */
/* Set the page background to black for the "Outer Space" feel */
body {
    /* Fallback color if image doesn't load */
    background-color: #000000; 
    
    /* DESKTOP BACKGROUND (Default) */
    background-image: url('bg-desktop.png');
    background-size: cover;       /* Stretch to fill screen */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat; /* Do not tile */
    background-attachment: fixed; /* Keep background still while scrolling */
    
    /* Text Settings */
    color: #FFFFFF;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
    touch-action: none; 
}

/* MOBILE BACKGROUND SWITCH */
/* If screen is narrower than 768px (most phones) */
@media (max-width: 768px) {
    body {
        background-image: url('bg-mobile.png');
    }
}

h1 {
    color: #E0E0E0;
    font-weight: normal;
    letter-spacing: 2px;
    font-size: 1.5rem; /* Slightly smaller for mobile screens */
    margin: 10px 0;
}

/* --- Responsive Canvas (The White Board) --- */
canvas {
    background: #FFFFFF; /* White Background */
    display: block;
    border: 3px solid #333333; /* Dark Grey border to define the edge */
    
    /* Responsive Magic: Fits any screen size */
    width: 95%;           
    max-width: 800px;     
    height: auto;         
    margin: 0 auto;       
}

/* --- Mobile Controls Container --- */
#controls {
    display: flex;
    justify-content: space-between; /* Spread buttons out */
    width: 95%;
    max-width: 800px;
    margin: 15px auto;
    padding-bottom: 20px;
    gap: 10px; /* Space between buttons */
}

/* --- General Button Styles --- */
.control-btn {
    background-color: #333;
    color: #89cff0; /* Matches your Tier 1 Blue */
    border: 2px solid #FFFFFF;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem; 
    font-weight: bold;
    padding: 15px 0;
    flex: 1; /* Left/Right take equal space */
    border-radius: 10px;
    cursor: pointer;
    
    /* Mobile usability fixes */
    user-select: none;         
    -webkit-tap-highlight-color: transparent; 
}

/* --- Specific Style for Restart Button --- */
.control-btn.restart {
    background-color: #006400; /* Dark Green to stand out */
    color: #FFFFFF;
    flex: 0.6; /* Make it slightly narrower than the arrow keys */
    font-size: 0.9rem; /* Smaller text */
}

/* --- Button Press Effects --- */
.control-btn:active {
    background-color: #555;
    transform: translateY(2px); /* Button presses down */
}

.control-btn.restart:active {
    background-color: #008000; /* Lighter Green on click */
}
/* --- Music Button Style --- */
.music-btn {
    background-color: #4B0082; /* Indigo/Purple color */
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    padding: 8px 20px;
    border-radius: 20px; /* Round shape */
    cursor: pointer;
    margin-bottom: 5px;
}

.music-btn:active {
    background-color: #6A0DAD;
    transform: translateY(2px);
}