#gameCanvas {
    width: 100%;
    max-width: 600px; /* Maximum canvas width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto;
    display: block;
    background-color: #b3daff; /* Light blue color for the tatami look */
    border: 1px solid #999; /* Optional: adds a border that can resemble the edge of a mat */
    box-shadow: 0px 0px 10px #666; /* Optional: adds a subtle shadow for a 3D effect */
}

.arrow-keypad {
    text-align: center;
    margin-top: 10px;
}

.arrow-keypad button {
    border-radius: 50%; /* Makes the buttons round */
    width: 50px; /* Sets a fixed width */
    height: 50px; /* Sets a fixed height */
    margin: 5px;
    font-size: 20px; /* Larger icons */
    padding: 0; /* Removes default padding */
    line-height: 50px; /* Centers the icon vertically */
}

/* Specific styling for the up button to place it above the others */
#up-button {
    display: block;
    margin: 0 auto;
}

/* Row for the left, down, and right buttons */
.arrow-row {
    display: flex;
    justify-content: center;
}

#start-button {
    font-size: 20px;
    padding: 10px 20px;
    margin-top: 20px;
}

.arrow-keypad button {
    touch-action: manipulation; /* Disable double-tap zoom on buttons */
}