/* Reset some default styling and make sure everything is properly set for responsiveness */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #70c5ce;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: 100%; /* Ensure body fills the viewport */
}

/* Make canvas take full available space and have a consistent background color */
canvas {
    display: block;
    margin: 0;
    background: #70c5ce;
    width: 100%;
    height: 100%;
    position: absolute; /* Make sure the canvas stays fixed in place */
    top: 0;
    left: 0;
    z-index: 1; /* Ensure canvas stays behind UI screens */
}

/* Styling for the Start Game button */
#startButton {
    padding: 20px 40px; /* Increase padding for a larger button */
    font-size: 24px; /* Larger text */
    cursor: pointer;
    background-color: #ffcc00;
    border: none;
    border-radius: 10px; /* Optional: rounded corners */
    color: white; /* Text color */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

  /* Style the button when it's disabled */
        #startButton:disabled {
            background-color: #cccccc; /* Grey background */
            color: #666666; /* Lighter text color */
            cursor: not-allowed; /* Shows a "no" cursor */
        }

        /* Optional: Add a hover effect when the button is not disabled */
        #startButton:not(:disabled):hover {
            background-color: #45a049;
        }

/* Add focus effect for accessibility */
#startButton:focus {
    outline: 3px solid #e6b800; /* Adds a focus outline for better accessibility */
}

/* Add active effect when the button is pressed */
#startButton:active {
    background-color: #d1a300; /* Slightly darker background on click */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #startButton {
        font-size: 20px; /* Slightly smaller font for medium screens */
        padding: 15px 30px; /* Adjust padding to fit better on smaller screens */
    }
}

@media (max-width: 480px) {
    #startButton {
        font-size: 18px; /* Smaller font for very small screens */
        padding: 12px 25px; /* Adjust padding further */
    }
}


/* General styling for game over screen */
#gameOverScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 36px;
    text-align: center;
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    z-index: 2; /* Ensure it's above the canvas */
}

/* Restart button styling */
#restartButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #ffcc00;
    border: none;
    border-radius: 5px;
}

    #restartButton:hover {
        background-color: #e6b800;
    }

/* Styling for start screen */
#startScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    z-index: 2; /* Ensure it's above the canvas */
}

/* Input field for seed value */
#seedInput {
    font-size: 16px;
    padding: 5px;
    width: 150px;
}

/* Styling for checkboxes and labels */
.checkbox {
    margin: 10px 0;
}

    /* Make checkboxes more user-friendly */
    .checkbox input {
        margin-right: 10px;
    }

/* Ensure everything is centered properly */
@media (max-width: 768px) {
    #startScreen {
        font-size: 20px;
    }

    #gameOverScreen {
        font-size: 28px;
    }
}

/* Specific rule to remove any padding/margin on body/html elements */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevent scrollbars */
}

/* Additional responsive tweaks */
@media (max-width: 480px) {
    #startScreen {
        font-size: 18px;
    }

    #gameOverScreen {
        font-size: 24px;
    }

    #seedInput {
        width: 120px;
    }

    /* Optional: Adjust button size for smaller screens */
    #restartButton {
        padding: 8px 16px;
        font-size: 14px;
    }
}


/* Styling for the Highscore Table */
#highscoreTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    overflow-x: auto;
}

/* Table cell styling */
#highscoreTable th,
#highscoreTable td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ddd;
}

/* Header styling */
#highscoreTable th {
    background-color: #4CAF50;
    color: white;
}

/* Alternate row background color */
#highscoreTable tr:nth-child(even) {
    background-color: #3c9f40;
}

/* Responsive Table Container */
#highscoreTableWrapper {
    overflow-x: auto; /* Allows horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
    margin-top: 20px;
}

/* Make the table text and layout more compact on smaller screens */
@media (max-width: 768px) {
    #highscoreTable th,
    #highscoreTable td {
        padding: 6px 10px; /* Reduced padding for mobile */
        font-size: 14px; /* Smaller font size */
    }

    #highscoreTable {
        font-size: 14px; /* Smaller font size for the table */
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    #highscoreTable th,
    #highscoreTable td {
        padding: 4px 8px; /* Even smaller padding for very small screens */
        font-size: 12px; /* Smaller font size */
    }
}
 /* Style for the name input field */
    .name-input {
        width: 100%;  /* Make the input field take up full width (or you can set a specific width like 300px) */
        padding: 10px; /* Add padding for a better look */
        font-size: 16px; /* Increase font size for better readability */
        margin-top: 10px; /* Space from the previous element */
    }