/* --- Base Light Mode Variables --- */
:root {
    --bg-color: #f4f7f6; /* Off-white */
    --container-bg: #ffffff;
    --canvas-bg: linear-gradient(180deg, #eaf0f1 0%, #d9e0e3 100%); /* Subtle light gradient */
    --paddle-color: #3498db; /* Vibrant blue */
    --ball-color: #e74c3c; /* Vibrant red */
    --brick-border: rgba(0, 0, 0, 0.1);
    --text-dark: #2c3e50; /* Dark blue-grey for text on light BG */
    --text-light: #ecf0f1; /* Very light grey/white for text on dark BG */
    --accent-color: #3498db;
    --info-bar-bg: #2c3e50; /* Dark bar on light BG */
    --message-bg: rgba(44, 62, 80, 0.95); /* Semi-dark overlay on light BG */
    --button-bg: #3498db;
    --button-hover-bg: #2980b9;
    --shadow-color: rgba(0, 0, 0, 0.1); /* Light shadow */
    --instructions-color: #7f8c8d;
    --font-family: 'Poppins', sans-serif;
}

/* --- Base Styles (Remain the same) --- */
body {
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-dark); /* Uses variable */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transition */
}

h1 {
    margin-bottom: 15px;
    color: var(--text-dark); /* Uses variable */
    font-weight: 600;
    font-size: 2.5em;
}

.game-wrapper {
    background-color: var(--container-bg);
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--shadow-color);
    overflow: hidden;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth theme transition */
}

#gameInfo {
    display: flex;
    justify-content: space-between;
    padding: 12px 25px;
    font-size: 1.1em;
    background-color: var(--info-bar-bg);
    color: var(--text-light);
    transition: background-color 0.3s ease; /* Smooth theme transition */
}

#gameInfo span {
    font-weight: 600;
}

.game-container {
    position: relative;
    line-height: 0;
}

#gameCanvas {
    display: block;
    background: var(--canvas-bg); /* Uses variable */
    /* transition added implicitly by parent background transition? check this. No, needs own transition if gradient changes */
    /* Let's rely on JS redrawing for canvas background smoothness */
}

.instructions {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
    color: var(--instructions-color); /* Uses variable */
    transition: color 0.3s ease; /* Smooth theme transition */
}

.message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--message-bg); /* Uses variable */
    color: var(--text-light); /* Should be light text */
    padding: 40px 50px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Standard shadow */
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s, background-color 0.3s ease; /* Smooth theme transition */
}

.message.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, background-color 0.3s ease;
}

.message h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 2.2em;
    font-weight: 600;
    color: var(--ball-color); /* Keep accent color */
}

#gameWon h2 {
    color: #2ecc71; /* Green for win */
}

.message p {
    margin-bottom: 25px;
    font-size: 1.3em;
}

.message button {
    padding: 14px 30px;
    font-size: 1.1em;
    font-weight: 600;
    color: #fff; /* Always white text on button */
    background-color: var(--button-bg); /* Uses variable */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.message button:hover {
    background-color: var(--button-hover-bg); /* Uses variable */
    transform: translateY(-2px);
}

.message button:active {
     transform: translateY(0px);
}

.hidden {
    display: none;
}

/* --- Dark Mode Overrides --- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1e1e1e; /* Very dark grey */
        --container-bg: #2d2d2d; /* Slightly lighter dark grey */
        --canvas-bg: linear-gradient(180deg, #3a3a3a 0%, #282828 100%); /* Dark gradient */
        /* Keep paddle/ball colors vibrant for contrast */
        --paddle-color: #3498db;
        --ball-color: #e74c3c;
        --brick-border: rgba(255, 255, 255, 0.15); /* Light border for bricks */
        --text-dark: #e1e1e1; /* Light grey text on dark BG */
        /* --text-light remains light for info bar */
        /* --accent-color remains blue */
        --info-bar-bg: #1f1f1f; /* Even darker info bar */
        --message-bg: rgba(15, 15, 15, 0.97); /* Very dark, slightly more opaque overlay */
        /* Keep button colors */
        --shadow-color: rgba(0, 0, 0, 0.3); /* Darker shadow for wrapper */
        --instructions-color: #999999; /* Lighter grey instructions */
    }

    /* Specific tweaks for dark mode */
    .game-wrapper {
         box-shadow: 0 8px 30px var(--shadow-color); /* Adjust shadow if needed */
    }

     /* Message text color might need adjusting if --text-light isn't bright enough */
     .message {
         color: var(--text-light);
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Darker shadow for message box */
     }

     /* Ensure brick stroke uses the dark mode variable */
     /* This needs JS update as strokeStyle is set directly */
}