:root{--g:#0f0;--bg:#111;--fg:#eee; --cell-size: 30px;} /* Fixed cell size */
html { 
  height: 100%; 
  margin: 0; 
  overflow: hidden; /* Prevent document scroll; body will be contained */
}
body{
  height: 100vh; /* Use full viewport height */
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  text-align: center; 
  display: flex;
  flex-direction: column;
}
h1 { margin: 12px 0 4px; flex-shrink: 0; }

#mainContainer { 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: flex-start; 
  width: 100%; 
  max-width: 1800px; 
  margin-top: 10px; 
  flex-shrink: 0;
}
#controlsPanel { 
  display: flex; 
  flex-direction: column; 
  width: 180px; 
  margin-right: 20px; 
  max-height: calc(100vh - 100px);
  overflow-y: auto; 
  padding-right: 10px;
}
#gameArea { display: flex; flex-direction: column; align-items: center; }
#rightPanel {
  display: flex;
  flex-direction: column;
  width: 380px;
  margin-left: 20px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-left: 10px;
}

canvas#board{
  background: #000;
  border: 2px solid #777;
  display: block;
  transition: width 0.3s ease, height 0.3s ease;
  /* Remove fixed width/height, will be set by JS */
}
.grid{
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px;
  justify-content: center;
  width: 100%;
  margin: 0 auto 15px;
}
.grid label { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
input[type=number]{ width: 80px; padding: 4px; }
input[type=range]{ width: 140px; }

#envBar, #gameBar {
  border: 1px solid #444;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
#envBar .btn, #gameBar .btn {
  display: block;
  /* width: calc(100% - 8px); */ /* Removed: Full width will be applied more specifically */
  margin: 5px 0; /* Default vertical margin for items in these bars */
}

/* Standalone buttons and inline-groups (direct children) in gameBar or envBar take full width */
#gameBar > .btn,
#envBar > .btn,
#gameBar > .inline-group,
#envBar > .inline-group {
  width: calc(100% - 8px); /* Accounts for own 4px margin on each side */
  margin: 4px; /* Consistent margin for alignment */
}

button, 
.btn,
input[type="button"],
input[type="submit"] {
  padding: 8px 14px; 
  margin: 4px;
  border: 1px solid var(--g); 
  background: #151; 
  color: var(--g); 
  font-weight: 600; 
  cursor: pointer;
  box-sizing: border-box;
}

.btn:disabled { opacity: .35; cursor: not-allowed; }

/* Ensure inline-groups have exactly the same width as standalone buttons */
#gameBar > .btn,
#envBar > .btn,
#gameBar > .inline-group,
#envBar > .inline-group {
  width: calc(100% - 8px);
  margin: 4px;
  box-sizing: border-box;
}

/* Apply consistent styling to all form elements in the grid */
#rightPanel .grid input[type="number"],
#rightPanel .grid input[type="range"] {
  background: #151;
  color: var(--g);
  border: 1px solid var(--g);
  padding: 4px 6px;
  font-weight: 600;
}

/* Common styling for all select elements */
select {
  background: #151;
  color: var(--g);
  border: 1px solid var(--g);
  padding: 8px 6px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}

/* Select dropdown options */
select option {
  background: var(--bg);
  color: var(--fg);
}

/* Remove any competing styles */
.inline-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  box-sizing: border-box;
  /* width is set by the #gameBar > .inline-group rule */
}

.inline-group .btn {
  margin: 0;
  flex-shrink: 0;
}

.inline-group select {
  margin: 0;
  flex-grow: 1;
  min-width: 70px;
}

/* Ensure the button part of inline group has appropriate width */
#gameBar > .inline-group > .btn,
#envBar > .inline-group > .btn {
  width: 100px; /* Fixed width for the button portion */
}

/* Ensure the select part takes the remaining width */
#gameBar > .inline-group > select,
#envBar > .inline-group > select {
  width: calc(100% - 104px); /* Total width minus button width and gap */
}

#barBox {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 10px;
  background: #333;
  margin: 0;
  z-index: 100;
  border-radius: 0;
  box-shadow: 0 -1px 4px #000a;
}
#bar {
  height: 100%;
  width: 0%;
  background: var(--g);
  transition: width 0.2s;
}
footer { color: #555; font-size: .75rem; margin: 15px 0; width: 100%; text-align: center; flex-shrink: 0; }
#playAgain { display: none; }

/* New container for the chart that fills width and remaining height */
#chartContainer {
  display: flex; /* Arrange charts side-by-side */
  flex-grow: 1;
  width: 100vw;
  overflow: hidden;
  margin-top: 10px;
}
/* New wrapper for each chart to control its size */
.chart-wrapper {
  flex: 1;
  height: 100%;
  position: relative; /* Needed for Chart.js responsiveness */
}
canvas#chart, canvas#lengthChart, canvas#snakeChart { /* Apply to both charts */
  width: 100% !important; /* Ensure canvas fills wrapper */
  height: 100% !important; /* Ensure canvas fills wrapper */
  display: block;
}

/* Themed select elements in specified panels */
#controlsPanel select,
#rightPanel .grid select {
  background: #151;
  color: var(--g);
  border: 1px solid var(--g);
  padding: 8px 6px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  height: 36px; /* Explicit height to roughly match button height */
  /* appearance: none; /* Uncomment if you want to hide default arrow and style custom one */
}

/* Select elements within an inline-group in #controlsPanel */
.inline-group select {
  margin: 0; /* No margin, spacing handled by group's gap */
  flex-grow: 1; /* Allow select to take remaining space in the group */
  min-width: 70px; 
  /* height is set by the common #controlsPanel select rule */
}

/* Selects within the #rightPanel grid */
#rightPanel .grid select {
  margin: 0; /* Spacing handled by label/grid gap */
  width: 140px; /* Consistent width with other inputs like range slider */
  /* height is set by the common #rightPanel .grid select rule */
}

.graph-toggle-btn {
  background: #151;
  color: var(--g);
  border: 1px solid var(--g);
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border 0.15s;
  outline: none;
}
.graph-toggle-btn.active {
  background: var(--g);
  color: #151;
  border: 2px solid var(--g);
}

/* Add CSS for darker disabled right-panel controls */
#rightPanel .grid input:disabled,
#rightPanel .grid select:disabled,
#rightPanel .grid input[type='checkbox']:disabled {
  background: #222 !important;
  color: #444 !important;
  border-color: #333 !important;
  opacity: 1 !important;
}
#rightPanel .grid label:has(input:disabled),
#rightPanel .grid label:has(select:disabled) {
  color: #444 !important;
}