body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    margin: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 1rem;
}

#grid-container {
    display: grid;
    /* We will define the grid columns and rows with JavaScript */
    border: 10px solid #ccc;
    margin-top: 2rem;
}
.node.wall {
    background-color: #333;
    /* Add a little animation for a nice feel */
    transform: scale(0.9);
    transition: transform 0.1s;
}

/* This is the style for each individual square in our grid */
.node {
    /* Dimensions will be set by JS, but we can define a default */
    width: 25px;
    height: 25px;
    border: 1px solid #eee;
    box-sizing: border-box; /* Ensures border is inside the width/height */
}

/* Styling for the control buttons */
.controls button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: 2px solid transparent;
    background-color: #555;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    margin: 0 5px;
}

/* Style for the currently active button */
.controls button.active {
    border-color: #00bcd4; /* A nice cyan highlight */
}

/* Style for the start node (green) */
.node.start {
    background-color: #4caf50;
}

/* Style for the end node (red) */
.node.end {
    background-color: #f44336;
}

/* Style for a node being visited by the algorithm */
.node.visited {
    background-color: #add8e6; /* Light blue */
    animation-name: visit-animation;
    animation-duration: 0.5s;
}

/* Style for a node in the final shortest path */
.node.path {
    background-color: #ffeb3b; /* Yellow */
    animation-name: path-animation;
    animation-duration: 0.5s;
}

/* Keyframe animations for a pulsing effect */
@keyframes visit-animation {
    0% { transform: scale(0.3); border-radius: 100%; }
    50% { background-color: #87ceeb; } /* Sky blue */
    75% { transform: scale(1.2); }
    100% { transform: scale(1.0); }
}

@keyframes path-animation {
    0% { transform: scale(0.6); }
    100% { transform: scale(1.0); }
}

.message {
    height: 1.5em; /* Reserve space so the layout doesn't jump */
    font-size: 1.2rem;
    font-weight: bold;
    color: #f44336; /* Red color for the message */
    margin: 1rem;
}