/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  background-color: #e9ecef;
  color: #495057;
  display: flex;
  justify-content: center;
  flex-direction: column; /* Change direction to column */
  align-items: center;
  height: 100vh;
  margin: 0;
}

#game-grid {
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  overflow: hidden;
  padding: 10px; /* Add padding to the game grid */
  margin-bottom: 0px; /* Add bottom margin to create space */
}
.grid-item {
  background-color: #fefefe;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
  border: 1px solid #495057; /* Define a solid border */
}

.grid-item:hover {
  transform: scale(1.05);
  background-color: #17a2b8;
  color: #ffffff;
}

#move-counter {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 20px; /* Add space between the grid and move counter */
  text-align: center;
}

#valid-words-counter {
  /* example style */
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 20px; /* Add spacing if needed */
  text-align: center;
}

/* Add this class in your CSS for selected letter styling */
.selected {
  background-color: #add8e6!important; /* Light blue background for selected letter */
  color: #000000!important; /* Black color for text to ensure visibility */
  border-color: #0000ff!important; /* Blue border to highlight selected letter */
}

/* Add this class in your CSS for valid word styling */
.valid-word {
  background-color: #90ee90!important;; /* Light green background for valid word */
  color: #ffffff!important;; /* White color for text to ensure visibility */
  border-color: #008000!important;; /* Green border to highlight valid word */
}

#new-game-button {
  font-size: 1.8rem; /* Larger font size for better readability */
  padding: 10px 30px; /* Padding for a larger clickable area */
  border-radius: 5px; /* Rounded corners */
  border: none; /* Remove default border */
  background-color: #5cb85c; /* A bright, inviting color */
  color: white; /* White text to stand out against the button color */
  cursor: pointer; /* Cursor indicates the button is clickable */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transitions for hover effects */
}

#new-game-button:hover {
  background-color: #4cae4c; /* Slightly darker color on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Larger shadow on hover for a "raised" effect */
}

#new-game-button:active {
  background-color: #449d44; /* Even darker to simulate a button press */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reset the shadow to give a "pressed" effect */
}

#game-instructions {
  margin-top: 20px; /* Adds some space above the instructions */
  text-align: center; /* Centers the instructions text */
  color: #333; /* Sets the text color */
  font-size: 16px; /* Adjust the font size as needed */
}