/* --- Base Styles --- */
html {
    height: 100%;
}
body {
    background-color: #222;
    color: #eee;
    font-family: "Press Start 2P", cursive;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    font-size: 0.8em;
    margin: 0;
    min-height: 100%; /* Ensure body takes at least full height */
    /* Removed overflow: hidden; - let content flow if needed */
    overscroll-behavior: none; /* Still good for mobile */
    box-sizing: border-box;
}

h1,
h2,
h3,
p,
div,
button,
input,
label {
    box-sizing: border-box; /* Consistent sizing */
}

.hidden {
    display: none !important; /* Utility class to hide elements */
}

/* --- Title --- */
#gameTitle {
    font-size: 2.5em;
    color: #ffd700;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 5px;
    text-shadow:
        3px 3px 0px #ffa500,
        6px 6px 0px #8b4513,
        7px 7px 0px #000;
    letter-spacing: 4px;
}

/* --- Start Screen --- */
#startScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background-color: #333;
    border: 2px solid #555;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    margin-top: 20px;
}

#startScreen h2 {
    margin-bottom: 15px;
    color: #ffd700;
}

#startScreen p {
    margin-bottom: 10px;
    line-height: 1.4;
    color: #ccc;
}

#startButton {
    padding: 12px 25px;
    font-size: 1.2em;
    cursor: pointer;
    background-color: #4caf50; /* Green */
    color: white;
    border: none;
    border-radius: 5px;
    font-family: "Press Start 2P", cursive;
    margin-top: 15px;
    text-shadow: 1px 1px 1px black;
}

#startButton:hover {
    background-color: #45a049;
}

/* --- Game Layout --- */
#gameContainer.game-container {
    /* Specificity to override .hidden */
    display: flex;
    justify-content: center;
    align-items: stretch; /* Stretch items vertically */
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    flex-grow: 1; /* Allow container to grow */
    padding: 0 5px;
    max-width: 1300px; /* Added a max-width */
}

.game-area {
    text-align: center;
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center canvas vertically too */
    max-width: 100%;
    position: relative; /* For potential absolute positioning inside */
}

canvas {
    display: block;
    background-color: #5dbb63;
    max-width: 100%;
    max-height: 100%; /* Allow canvas to take max height of container */
    /* Aspect ratio handled by JS */
    touch-action: none;
    border: 2px solid #444; /* Add a border back */
}

#controls {
    margin-top: 5px;
    color: #ccc;
    font-size: 0.8em;
    padding: 5px;
    height: 20px; /* Reserve space even if hidden */
}
.desktop-controls {
    /* Style specific to desktop hint if needed, currently hidden */
}

/* Scoreboard Area */
.scoreboard-area {
    background-color: #333;
    border: 2px solid #555;
    padding: 10px;
    min-width: 180px;
    border-radius: 5px;
    flex-shrink: 0;
    /* align-self: stretch; Removed - let flexbox handle height */
    display: flex;
    flex-direction: column; /* Ensure content flows top-down */
}

.scoreboard-area h2,
.scoreboard-area h3 {
    /* styles */
}
#currentScoreBoard div {
    /* styles */
}
#highScoreList {
    /* styles */
    flex-grow: 1; /* Allow list to take available space */
    overflow-y: auto; /* Scroll if needed */
    min-height: 50px; /* Ensure some minimum space */
}
#highScoreList div {
    /* styles */
}

/* Game Over Screen */
#gameOver {
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 15px;
    border-radius: 8px;
    border: 2px solid red;
    display: none; /* Initially hidden */
    color: white;
    /* Optional: Position over canvas */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 350px;
    z-index: 10; /* Ensure it's above canvas but maybe below modals */
    text-align: center;
}
#gameOver h2 {
    font-size: 1.3em;
}
#gameOver label {
    margin-right: 5px;
    font-size: 0.9em;
}
#gameOver input[type="text"] {
    padding: 4px;
    width: 70px;
    font-size: 0.9em;
    margin: 5px 0;
}
#gameOver button {
    padding: 6px 12px;
    font-size: 0.8em;
    margin: 4px;
}

/* --- Media Query for Mobile --- */
@media (max-width: 800px) {
    /* Adjusted breakpoint */
    body {
        font-size: 0.7em;
        padding: 5px;
    }

    #gameTitle {
        font-size: 1.8em;
        margin-bottom: 10px;
        letter-spacing: 2px;
        text-shadow:
            2px 2px 0px #ffa500,
            4px 4px 0px #8b4513,
            5px 5px 0px #000;
    }

    #startScreen {
        width: 95%;
    }
    #startButton {
        padding: 10px 20px;
        font-size: 1em;
    }

    #gameContainer.game-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 0;
    }

    .game-area {
        width: 100%;
        order: 1;
        /* Removed max-height - let flexbox manage */
    }

    canvas {
        /* Canvas size set by JS */
    }

    .scoreboard-area {
        width: 95%;
        max-width: 400px;
        order: 2;
        max-height: 25vh; /* Limit scoreboard height */
        min-width: unset;
        align-self: center;
        flex-shrink: 1;
    }

    #highScoreList {
        max-height: 100px;
    }

    /* Hide keyboard controls text placeholder */
    .desktop-controls {
        /* display: none; */ /* Let's keep the space for now */
        visibility: hidden;
    }

    #gameOver {
        position: absolute; /* Ensure it's positioned over canvas */
        width: 90%;
        padding: 10px;
        font-size: 0.9em;
    }
    #gameOver h2 {
        font-size: 1.2em;
    }
}