/* Add your custom styles here */
#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: capitalize;
}

#grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Adjust the number of columns based on your layout */
    gap: 5px;
    width: fit-content; /* Makes the grid as wide as the sum of its columns */
    margin: auto; /* Centers the grid within the game-container */
}

#grid .cell {
    border: 1px solid #000;
    height: 40px; /* Fixed height for grid cells to accommodate tiles */
    min-width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove padding to fit the tile */
    box-sizing: border-box; /* Ensures border is included in the height */
border-radius: 2px; /* Rounded corners */

}

/* Styling for when a cell is droppable (i.e., can accept a tile) */
#grid .cell.droppable {
  background-color: #FDFDFD; /* Light gray background */
}

/* Ensure that the column and row headers have a fixed size */
#grid .cell.heading {
    background-color: #eee; /* Different background for headers */
    height: 40px; /* Fixed height for grid cells to accommodate tiles */
    line-height: 50px; /* Center text vertically */
}

.heading {
    font-weight: bold;
}



/* Hover effect on tile */
.tile:hover {
    background-color: #fff; /* Slightly darker when hovered */
}

/* Style for tile being dragged - you'll need to add a class dynamically via JavaScript */
.tile.dragging {
    opacity: 0.5; /* Make the tile semi-transparent when dragging */
    background-color: #cccccc; /* Different background to indicate dragging */
    z-index: 1000; /* Ensure it's above other elements */
    /* Optional: add transformations or scaling if needed */
}

#grid .cell.drag-over, .tile.drag-over {
    background-color: grey; /* Background color for droppable cells */
}


/* Enhanced droppable cell style */
#grid .cell.droppable {
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

#tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 5px; /* Adjust space between grid and tiles container */
    height: 120px;
    text-transform: capitalize;
    width: 350px;

}

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.tile {
    border: 1px solid #000;
    padding: 5px; /* Reduced padding */
    margin: 0; /* Remove any margin if present */
    cursor: pointer;
    user-select: none; /* Prevents the text from being selectable */
    display: flex; /* Enables centering of content */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    height: 40px; /* Fixed height for tiles */
    min-width: 20px; /* Minimum width for tiles */
  background-color: white; /* Light gray background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px grey; /* Soft shadow */
  box-sizing: border-box; /* Include padding in total width/height */
		-webkit-user-select: none; /* Safari */
  	-moz-user-select: none; /* Firefox */
  	-ms-user-select: none; /* Firefox */
}

.tile, .cell.droppable {
    transition: background-color 0.3s ease;
}

#result {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
		min-height: 1.5em; /* Adjust the value as needed */
		font-size: 20px;

}

/* Add styles for when the grid is in a 'win' state */
#grid.win {
    background-color: lightgreen;
}



#heartsContainer {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.heart {
    font-size: 30px;
    margin: 0 5px;
}

#grid.gameOver {
    background-color: red;
    pointer-events: none; /* Disables interaction with the grid */
}

#gameInstructions {
    margin-top: 20px;
    padding: 15px;
    font-size: 16px; /* Adjust as needed */
}

#gameInstructions h2 {
    color: #333;
    font-size: 20px;
}

#gameInstructions ol {
    margin-left: 20px;
}

#closeInstructions{
	height: fit-content;
	width:    fit-content; 
	margin: 0;
	font-size: 12px;

}

.clue-correct {
    background-color: green;
    opacity: 0.6; /* Makes the clue look faded */
    pointer-events: none; /* Makes the clue unmovable */
}

.clue-partial {
    background-color: yellow;
}

.clue-incorrect {
    background-color: red;
}

/* Base styling for all buttons */
button {
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
        font-size: 18px;
        margin-bottom: 10px; /* Added margin to create space underneath */
  box-shadow: 0 1px 1px grey; /* Soft shadow */
    width: 260px;
		height: 50px;


}

/* Check Answers button - most prominent */
#checkAnswers {
    background-color: #4CAF50; /* Green */
    color: white;
    font-weight: bold;
}

#checkAnswers:hover {
    background-color: #388E3C;
}

/* New Game and Reset Game buttons - identical properties, half the size of Check Answers */
#newGame, #resetGame {
    background-color: #2196F3; /* Blue */
    color: white;
    width: 130px;
}

#newGame:hover, #resetGame:hover {
    background-color: #1976D2; /* Darker Blue */
}

/* Toggle Mode button - distinct and slightly intimidating, half the size of Check Answers */
#toggleMode {
    background-color: #FF5722; /* Deep Orange */
    color: white;
}

#toggleMode:hover {
    background-color: #E64A19; /* Darker Deep Orange */
}



#modeInstructions p {
    display: none; /* Initially hide mode-specific instructions */
}

#modeInstructions .active {
    display: block; /* Show instructions for the active mode */
}

.all-correct {
    background-color: lightgreen; /* Or any other color you want for the correct row/column */
    opacity: 0.6; /* Fade effect for the tiles */
}

.all-correct .tile {
	    background-color: lightgreen; /* Or any other color you want for the correct row/column */

    pointer-events: none; /* Makes the tiles unmovable */
}

.locked {
    pointer-events: none; /* Disables mouse events on the locked cell */
}


#game-container {
	    display: flex;
	        justify-content: center;
    align-items: center;
  position: sticky;
  top: 0; /* Adjust this value as needed */
  z-index: 10; /* Ensure this is above the z-index of other elements */
	overflow: hidden; /* This will prevent scrolling within the game container */
	min-width: 240px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
  -webkit-overflow-scrolling: touch; /* Specific to Safari on iOS */
  user-select: none;
}

#gameInstructions {
  max-height: 300px; /* Adjust based on your needs */
  overflow-y: auto;
}


body, html {
    overflow: hidden; /* Disables scrolling on the main page */
}

body, #game-container {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
}

#instructionsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#instructionsOverlay.hidden {
    display: none;
}

#instructionsContent {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    max-height: 80%;
    overflow-y: auto; /* Allows scrolling within the instructions */
}


.top-left-cell {
    visibility: hidden; /* Makes the cell invisible but still takes up space */
        position: relative;
}

#howToPlayButton {
    position: absolute;
    background-color: blue;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Adjust top and left properties to position it correctly */
    top: 5px;
    left:25px;
    font-size: 24px;
        font-weight: bold;

}