body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: sans-serif;
}

/* Optional wrapper for centering */
#game-area {
    display: flex;
    flex-direction: column; /* Stack game and controls vertically */
    align-items: center; /* Center items horizontally */
}


#game-container {
    display: flex;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Add space below game */
}

#gameCanvas {
    border: 1px solid #000;
    background-color: #e0e0e0;
    /* position: relative; /* Added in HTML already */
}

#game-info {
    margin-left: 20px;
    text-align: center;
}

#nextPuyoCanvas {
    border: 1px solid #000;
    margin-top: 10px;
    background-color: #e0e0e0;
}

h2 {
    margin-top: 0;
}

/* Styles for Controls */
#controls-container {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    align-items: center; /* Center rows horizontally */
    gap: 10px; /* Space between rows */
    margin-top: 15px; /* Space above controls */
    /* Prevent text selection on buttons during rapid taps */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.controls-row {
    display: flex;
    justify-content: center; /* Center buttons within a row */
    gap: 15px; /* Space between buttons */
}

.control-button {
    padding: 15px 20px; /* Make buttons larger */
    font-size: 24px; /* Larger icon/text */
    min-width: 70px; /* Ensure minimum width */
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.1s ease; /* Smooth feedback */
}

.control-button:active {
    background-color: #e0e0e0; /* Visual feedback on press */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Media query for smaller screens - adjust button size if needed */
@media (max-width: 600px) {
    .control-button {
        padding: 12px 15px;
        font-size: 20px;
        min-width: 60px;
    }
    #controls-container {
        margin-top: 10px;
        gap: 8px;
    }
     .controls-row {
         gap: 10px;
     }
}