body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center; /* This centers the game container vertically on desktop */
	background-image: url(../images/Spedoh_Background.jpg);
	background-size: cover;
	color: white;
}

.grid-row {
    display: flex;
}

.grid-cell {
    flex: 1; /* Each text box takes an equal amount of space */
    padding: 10px; /* Padding inside the text boxes */
    margin: 2px; /* Margin between text boxes */
	width: 20px;
	height: 25px;
    text-align: center; /* Center text inside the text box */
	font-size: 24px;

}

.game-container {
    width: 95%; /* Adjust based on your design */
    max-width: none; /* Maximum width of the container */
    background-color:#505050 ; /* Background color of the game container - #010101 */
    padding: 10px; /* Padding around the content */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds shadow for better visibility */
    position: relative;
    top: 0; /* On mobile, it will stick to the top */
}
.center-column {
    grid-area: center;
	background-color: rgba(255, 255, 255, 0.25); /* White background with 70% opacity */
    padding: 10px;
    margin: 0;
     	 
	 
}

.game-board {
	display: flex;
    flex-direction: column; /* Aligns the rows vertically */
    background-color: #8A8989; /* Different background for visibility */
    padding: 10px;
    margin-bottom: 20px;
}

.game-controls {
    background-color: #ccc;
    padding: 10px;
}

.random-number-display {
    font-size: 36px;
    margin-bottom: 10px;
	color: white;
}

@media (max-width: 600px) {
	.game-container {
        width: 100%;  /* Use 100% width on small screens to maximize the container size */
        max-width: none;  /* Remove the max-width restriction */
        padding: 10px;  /* Optionally reduce padding */
    }
    body, html {
        align-items: flex-start; /* Aligns container to the top on mobile */
		height: auto;
    }
}

.scoreboard {
    border: 2px solid #000;
    padding: 4px;
    margin: 5px;
    /*background-color: #f9f9f9;*/
	background-color: black;
	color: white;
    width: Auto;  /*Adjust width as needed*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.scoreboard h3 {
    text-align: center;
	 
}

.scoreboard p {
    font-size: 16px;
    /*margin: 5px 0;*/
	 
}
/*-------------------------------- Change Backgrounds Game Play-----------------*/

input[type="text"] {
    /* Default state */
    background-color: white;
    color: black;
}

input[type="text"].correct {
    /* For correct sequences */
    background-color: green;
    color: white;
}

input[type="text"].incorrect {
    /* For incorrect placements */
    background-color: yellow;
}

/*--------------------Button Adjustments ----------------------------*/

.hint {
    background-color: #ffffe0; /* Light yellow background for hints */
    color: #333;
}

#resetButton {
    background-color: #f44336; /* Red color for emphasis */
    color: white;
    border-style: solid;
    padding: 10px 20px;
    font-size: 16px;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 4px 4px #b3b3b3; /* Shadow gives the 3D effect */
    cursor: pointer;
    margin: 5px; /* Space from other controls */
	transition: all 0.3s ease;
}

#resetButton:active {
    box-shadow: 2px 2px #0056b3; /* Smaller shadow when button is pressed */
    transform: translate(2px, 2px); /* Moves the button right and down when clicked */
}

#resetButton:disabled {
	background-color: #aaa;  /* Dull background color to indicate it's disabled */
    box-shadow: none;  /* Remove shadow to flatten the button */
    cursor: not-allowed;  /* Change cursor to indicate the button cannot be clicked */
    color: #777;  /* Optional: Change text color to show the button is inactive */
}

 
#startGameButton {
    background-color: #009933; /* Red color for emphasis */
    color: white;
    border-style: solid;
    padding: 10px 20px;
    font-size: 16px;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 4px 4px #b3b3b3; /* Shadow gives the 3D effect */
    cursor: pointer;
    margin: 5px; /* Space from other controls */
	transition: all 0.3s ease;
}

#startGameButton:active {
    box-shadow: 2px 2px #0056b3; /* Smaller shadow when button is pressed */
    transform: translate(2px, 2px); /* Moves the button right and down when clicked */
}

#startGameButton:disabled {
	background-color: #aaa;  /* Dull background color to indicate it's disabled */
    box-shadow: none;  /* Remove shadow to flatten the button */
    cursor: not-allowed;  /* Change cursor to indicate the button cannot be clicked */
    color: #777;  /* Optional: Change text color to show the button is inactive */
}

#postScoreButton {
    background-color: #009933; /* Red color for emphasis */
    color: white;
    border-style: solid;
    padding: 10px 20px;
    font-size: 16px;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 4px 4px #b3b3b3; /* Shadow gives the 3D effect */
    cursor: pointer;
    margin: 5px; /* Space from other controls */
	transition: all 0.3s ease;
}

#postScoreButton:active {
    box-shadow: 2px 2px #0056b3; /* Smaller shadow when button is pressed */
    transform: translate(2px, 2px); /* Moves the button right and down when clicked */
}

#postScoreButton:disabled {
	background-color: #aaa;  /* Dull background color to indicate it's disabled */
    box-shadow: none;  /* Remove shadow to flatten the button */
    cursor: not-allowed;  /* Change cursor to indicate the button cannot be clicked */
    color: #777;  /* Optional: Change text color to show the button is inactive */
}
#hintButton {
    background-color: black; /* black color for emphasis */
    color: white;
    border-style: solid;
    padding: 5px 10px;
    font-size: 12px;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 4px 4px #b3b3b3; /* Shadow gives the 3D effect */
    cursor: pointer;
    margin-top: 5px; /* Space from other controls */
	transition: all 0.3s ease;
}

#hintButton:active {
    box-shadow: 2px 2px #0056b3; /* Smaller shadow when button is pressed */
    transform: translate(2px, 2px); /* Moves the button right and down when clicked */
}

#hintButton:disabled {
	background-color: #aaa;  /* Dull background color to indicate it's disabled */
    box-shadow: none;  /* Remove shadow to flatten the button */
    cursor: not-allowed;  /* Change cursor to indicate the button cannot be clicked */
    color: #777;  /* Optional: Change text color to show the button is inactive */
}

#pauseResumeButton {
    background-color: black; /* black color for emphasis */
    color: white;
    border-style: solid;
    padding: 5px 10px;
    font-size: 12px;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 4px 4px #b3b3b3; /* Shadow gives the 3D effect */
    cursor: pointer;
    margin-top: 5px; /* Space from other controls */
	transition: all 0.3s ease;
}

#pauseResumeButton:active {
    box-shadow: 2px 2px #0056b3; /* Smaller shadow when button is pressed */
    transform: translate(2px, 2px); /* Moves the button right and down when clicked */
}

#pauseResumeButton:disabled {
	background-color: #aaa;  /* Dull background color to indicate it's disabled */
    box-shadow: none;  /* Remove shadow to flatten the button */
    cursor: not-allowed;  /* Change cursor to indicate the button cannot be clicked */
    color: #777;  /* Optional: Change text color to show the button is inactive */
}

#rescueButton {
    background-color: black; /* black color for emphasis */
    color: white;
    border-style: solid;
    padding: 5px 10px;
    font-size: 12px;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 4px 4px #b3b3b3; /* Shadow gives the 3D effect */
    cursor: pointer;
    margin-top: 5px; /* Space from other controls */
	transition: all 0.3s ease;
}
#rescueButton:active {
    box-shadow: 2px 2px #0056b3; /* Smaller shadow when button is pressed */
    transform: translate(2px, 2px); /* Moves the button right and down when clicked */
}

#rescueButton:disabled {
	background-color: #aaa;  /* Dull background color to indicate it's disabled */
    box-shadow: none;  /* Remove shadow to flatten the button */
    cursor: not-allowed;  /* Change cursor to indicate the button cannot be clicked */
    color: #777;  /* Optional: Change text color to show the button is inactive */
}

#completionPopup {
    font-family: Arial, sans-serif;
    text-align: center;
}

#completionPopup h2 {
    margin: 0;
    padding: 10px 0;
}

#completionPopup button {
    padding: 10px 20px;
    margin-top: 10px;
    cursor: pointer;
}