/* Each puzzle (or solution) wrapper has a heading, a button, and a container */
#puzzle-wrapper, #solution-wrapper {
  margin-bottom: 20px;
}

/* Container for puzzle or solution plus word bank side by side */
#puzzle-container, #solution-container {
  display: grid;
  grid-template-columns: auto auto; /* puzzle grid + word list side by side */
  gap: 10px; /* If you want them flush, set to 0; adjust as needed */
  margin: 0;
  padding: 0;
}

/* Puzzle grid styling */
#puzzle-grid, #solution-grid {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}

/* Puzzle cells – size set by JS */
.puzzle-cell, .solution-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* If you want no border, leave it commented out */
/* border: 1px solid #ccc; */

/* Word lists next to puzzle */
#word-list, #solution-list {
  margin: 0;
  padding: 0;
}

/* A highlight for the solution puzzle */
.highlight-solution {
  background-color: rgba(255, 0, 0, 0.3);
}