/* --- Base Styles & Theme Variables --- */
:root {
    /* Light Theme Colors */
    --bg-color-light: #f8f9fa;
    --text-color-light: #212529;
    --border-color-light: #dee2e6;
    --wall-color-light: #6c757d; /* Changed from black for better contrast */
    --path-color-light: #ffffff; /* Make path white for clarity */
    --player-color-light: #0d6efd; /* Bootstrap Blue */
    --start-color-light: #198754; /* Bootstrap Green */
    --end-color-light: #dc3545; /* Bootstrap Red */
    --coin-color-light: #ffc107; /* Bootstrap Yellow */
    --canvas-bg-base-light: #e9ecef; /* Default canvas bg (light gray) */
    --navbar-bg-light: #e9ecef;
    --modal-bg-light: var(--bg-color-light);

    /* Dark Theme Colors */
    --bg-color-dark: #212529; /* Dark Gray */
    --text-color-dark: #f8f9fa; /* Almost White */
    --border-color-dark: #495057; /* Gray */
    --wall-color-dark: #adb5bd; /* Light Gray walls on dark */
    --path-color-dark: #343a40; /* Darker Gray paths */
    --player-color-dark: #0dcaf0; /* Bootstrap Cyan */
    --start-color-dark: #20c997; /* Bootstrap Teal */
    --end-color-dark: #fd7e14; /* Bootstrap Orange */
    --coin-color-dark: #ffca2c; /* Brighter Yellow */
    --canvas-bg-base-dark: #343a40; /* Default canvas bg (matches dark path) */
    --navbar-bg-dark: #343a40;
    --modal-bg-dark: var(--bg-color-dark);

    /* --- Variables for Effective Colors (JS might override canvas bg) --- */
    /* Base theme-dependent background color for the canvas */
    --canvas-bg-base: var(--canvas-bg-base-dark); /* Default to dark */
    /* The actual background color used by the canvas. JS sets this if a color is picked. */
    --canvas-bg-effective: var(--canvas-bg-base);
}

/* Apply base theme colors */
body[data-bs-theme="light"] {
    --bg-color: var(--bg-color-light);
    --text-color: var(--text-color-light);
    --border-color: var(--border-color-light);
    --wall-color: var(--wall-color-light);
    --path-color: var(--path-color-light); /* Used only if drawing path explicitly */
    --player-color: var(--player-color-light);
    --start-color: var(--start-color-light);
    --end-color: var(--end-color-light);
    --coin-color: var(--coin-color-light);
    --canvas-bg-base: var(--canvas-bg-base-light); /* Set the base for light theme */
    --navbar-bg: var(--navbar-bg-light);
    --modal-bg: var(--modal-bg-light);
}

body[data-bs-theme="dark"] {
    --bg-color: var(--bg-color-dark);
    --text-color: var(--text-color-dark);
    --border-color: var(--border-color-dark);
    --wall-color: var(--wall-color-dark);
    --path-color: var(--path-color-dark); /* Used only if drawing path explicitly */
    --player-color: var(--player-color-dark);
    --start-color: var(--start-color-dark);
    --end-color: var(--end-color-dark);
    --coin-color: var(--coin-color-dark);
    --canvas-bg-base: var(--canvas-bg-base-dark); /* Set the base for dark theme */
    --navbar-bg: var(--navbar-bg-dark);
    --modal-bg: var(--modal-bg-dark);
}

/* Update effective canvas background when theme changes if no override is set */
body[data-bs-theme="light"]:not([style*="--canvas-bg-effective"]) {
    --canvas-bg-effective: var(--canvas-bg-base-light);
}
body[data-bs-theme="dark"]:not([style*="--canvas-bg-effective"]) {
     --canvas-bg-effective: var(--canvas-bg-base-dark);
}


/* --- Basic Setup & Layout --- */
html {
    height: 100%; /* Needed for vh units sometimes */
}

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow: hidden; /* Prevent the main page body from scrolling */
    height: 100%;
    min-height: 100%; /* Ensure body takes full height */
}

/* Ensure the main container fills the viewport */
.container-fluid.vh-100 {
    min-height: 100vh; /* Fallback */
    padding: 0 !important; /* Override Bootstrap padding if necessary */
}

/* --- Navbar Styling --- */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: var(--navbar-bg) !important; /* Override Bootstrap theme */
    transition: background-color 0.3s ease;
    z-index: 1050; /* Ensure navbar is above modals sometimes */
}
.navbar .badge {
    font-size: 0.85rem; /* Slightly smaller badges */
}
.navbar .btn-sm {
     padding: 0.2rem 0.5rem; /* Adjust button padding */
     font-size: 0.8rem;
}
.navbar .form-check-input {
     cursor: pointer;
}


/* --- Game Area & Canvas --- */
.game-container {
    width: 100%;
    background-color: var(--bg-color); /* Match body background */
    /* flex-grow-1, d-flex, etc. are handled by Bootstrap classes in HTML */
}

/* Wrapper centers the canvas and defines its max boundary */
#canvas-wrapper {
    width: 100%;
    height: 100%;
    /* padding: 1rem; /* Optional: Add some padding around the canvas */
    box-sizing: border-box;
}

#mazeCanvas {
    display: block; /* Remove extra space below canvas */
    /* THIS IS THE KEY CHANGE: Use the effective background color variable */
    background-color: var(--canvas-bg-effective);
    /* Max size ensures it doesn't overflow the wrapper */
    max-width: 100%;
    max-height: 100%;
    /* Maintain aspect ratio when scaling down - less relevant without image bg */
    /* object-fit: contain; */
    /* No fixed width/height here - set by JS */
    image-rendering: pixelated; /* Better for pixel art style mazes */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    border: 1px solid var(--border-color); /* Optional border */
    margin: auto; /* Helps center if wrapper is bigger */
    transition: background-color 0.3s ease; /* Smooth transition for color changes */
}

/* --- Modals --- */
.modal-content {
    background-color: var(--modal-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.modal-header {
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}
.modal-footer {
     border-top: 1px solid var(--border-color);
     transition: border-color 0.3s ease;
}
.btn-close {
    /* Adjust close button color based on theme using Bootstrap's variable */
    background-color: transparent; /* Ensure no background interferes */
}
body[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Standard Bootstrap dark mode close */
}

/* Style examples in modal instructions */
.player-example { color: var(--player-color); font-weight: bold; }
.start-example { color: var(--start-color); font-weight: bold; }
.end-example { color: var(--end-color); font-weight: bold; }
.coin-example { color: var(--coin-color); font-weight: bold; }


/* --- Color Gallery Styling (Modified) --- */
/* Container for the color buttons */
#colorGallery {
    /* Using d-flex flex-wrap gap-2 from Bootstrap classes */
    gap: 0.3rem !important; /* Tighter gap */
}

/* Style for each button in the gallery */
#colorGallery .gallery-item {
    /* Using btn btn-sm from Bootstrap classes */
    display: inline-flex; /* Align swatch and text nicely */
    align-items: center;
    padding: 0.25rem 0.5rem; /* Adjust padding */
    line-height: 1.2;
    font-size: 0.85rem;
    border-width: 2px; /* Make border slightly thicker */
    /* Transition for active state change */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Active state uses Bootstrap's primary color */
#colorGallery .gallery-item.active {
    /* Using btn-primary class */
    border-color: var(--bs-primary); /* Explicitly set border color */
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), .5); /* Bootstrap's focus shadow */
}

/* Inactive state */
#colorGallery .gallery-item:not(.active) {
    /* Using btn-outline-secondary class */
     border-color: var(--bs-secondary);
}


/* Style for the color swatch DIV inside the button */
#colorGallery .gallery-color-swatch {
    display: inline-block; /* Or flex-shrink: 0 */
    width: 1.2em; /* Relative size */
    height: 1.2em;
    border: 1px solid rgba(128, 128, 128, 0.6); /* Subtle border */
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 3px;
    flex-shrink: 0; /* Prevent shrinking */
    /* Background color is set inline by JS */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem; /* Smaller brand */
    }
    .navbar .badge {
        font-size: 0.75rem; /* Smaller badges */
    }
    /* Label might be visually hidden, but adjust if shown */
    /* .navbar .form-check-label {
         font-size: 0.75rem;
    } */

    .modal-dialog {
        /* Ensure modals aren't too wide on small screens */
        max-width: 95%;
        margin: 1rem auto;
    }

    /* Adjust color gallery items */
     #colorGallery .gallery-item {
         font-size: 0.8rem;
         padding: 0.2rem 0.4rem;
     }
     #colorGallery .gallery-color-swatch {
        width: 1.1em;
        height: 1.1em;
        margin-right: 4px;
     }
}

@media (max-width: 576px) {
     /* Further adjustments for very small screens */
    .navbar .badge, .navbar .btn-sm {
        font-size: 0.7rem;
        padding: 0.15rem 0.3rem;
    }
     .navbar-brand {
        font-size: 0.9rem;
    }
     .modal-body p, .modal-body .form-label {
         font-size: 0.9rem;
     }
     .modal-body .btn-group .btn {
         font-size: 0.8rem;
     }

    /* Even smaller gallery items */
    #colorGallery .gallery-item {
         font-size: 0.75rem;
         padding: 0.15rem 0.3rem;
    }
    #colorGallery .gallery-color-swatch {
        width: 1em;
        height: 1em;
        margin-right: 3px;
     }
}