/* style.css */

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 1em;
    background-color: #f4f4f4;
}

h1 {
    margin-bottom: 1em; /* Space below title */
    color: #333;
    text-align: center;
}

/* MODIFIED: New container for layout */
.main-content {
    display: flex;
    flex-direction: column; /* Stack canvas and controls vertically */
    align-items: center;   /* Center items horizontally */
    width: 95%;
    max-width: 800px; /* Adjust max width as needed */
    gap: 20px; /* Space between canvas and controls */
}


/* MODIFIED: Simulation area styling for 1:1 aspect ratio */
.simulation-area {
    width: 90%; /* Responsive width */
    max-width: 600px; /* Limit max canvas size */
    aspect-ratio: 1 / 1; /* Force 1:1 aspect ratio */
    display: flex; /* Needed for centering canvas? */
    justify-content: center;
    align-items: center;
    /* background-color: lightblue; */ /* Debugging */
    margin-bottom: 20px; /* Add space below canvas */
}

/* MODIFIED: Canvas styling to fill its container */
#simulator-canvas {
    border: 1px solid black;
    background-color: #fff;
    display: block;
    width: 100%; /* Fill the container */
    height: 100%; /* Fill the container */
    touch-action: none; /* Prevents default touch behaviors */
}

/* MODIFIED: Controls panel styling */
.controls {
    width: 100%; /* Make controls take full width below canvas */
    max-width: 600px; /* Match canvas max-width? Or wider? */
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box; /* Include padding in width */
}

.controls h2 {
    margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; font-size: 1.2em; color: #444;
}

.controls div {
    margin-bottom: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; /* Add gap between items */
}

.controls label {
    margin-bottom: 0; /* Remove bottom margin as flex handles spacing */
    font-weight: bold; margin-right: 5px; font-size: 0.9em; color: #555;
    flex-shrink: 0; /* Prevent labels from shrinking too much */
    /* min-width: 100px; */ /* Removed fixed min-width */
}

.controls input[type="range"],
.controls input[type="number"],
.controls button {
    vertical-align: middle; margin-top: 0; margin-bottom: 0; /* Reset margins */
}
.controls input[type="range"] {
    flex-grow: 1; min-width: 80px; margin-left: 5px;
}
.controls input[type="number"] {
    width: 70px; /* Slightly smaller width for numbers */
    padding: 5px; border: 1px solid #ccc; border-radius: 4px;
    margin-left: auto; /* Push to right */
}
#potential-input { width: 60px; }

.controls button {
    padding: 8px 12px; margin: 2px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; background-color: #e9e9e9; transition: background-color 0.2s ease; font-size: 0.9em;
}
.controls button:hover { background-color: #dcdcdc; }
.controls button.active { background-color: #a0d8f0; border-color: #78b0c9; font-weight: bold; }

#clear-all-btn { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; margin-left: 10px; }
#clear-all-btn:hover { background-color: #f1b0b7; }

.controls input[type="checkbox"] { margin-right: 5px; vertical-align: middle; }

#fill-option label {
    font-weight: normal; display: inline-flex; align-items: center; cursor: pointer; font-size: 0.9em; color: #555; min-width: initial; margin-left: 0; width: auto; /* Don't take full width */
}
#fill-option input[type="checkbox"] { margin-right: 8px; }

/* Specific div styling for checkbox groups */
.controls div > label:first-child { /* Ensure label before checkbox group has spacing */
    margin-right: 15px;
}
.controls div > input[type="checkbox"] + label { /* Label following checkbox */
    font-weight: normal; min-width: initial; margin-right: 10px; /* Space between checkbox options */
}

hr { border: none; border-top: 1px solid #eee; margin: 20px 0; width: 100%; }

#results { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; width: 100%; }
#results h3 { margin-top: 0; font-size: 1.1em; color: #444; }
#results p, #status p { margin: 8px 0; font-size: 0.9em; }
#results span, #status span { font-weight: bold; color: #333; }

#status { margin-top: 15px; padding-top: 10px; border-top: 1px solid #eee; min-height: 2em; width: 100%; }
#status-message { color: #555; font-style: italic; }