body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #333;
    color: #eee;
    font-family: Arial, sans-serif;
}

h1 {
    margin-bottom: 20px;
}

canvas {
    background-color: #000;
    border: 2px solid #eee;
}

#controls {
    display: grid;
    grid-template-areas:
        ". up ."
        "left . right"
        ". down ."
        ". action .";
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(4, 80px);
    gap: 10px;
    margin-top: 20px;
}

#controls button {
    width: 80px;
    height: 80px;
    font-size: 2em;
    background-color: #555;
    color: #eee;
    border: none;
    border-radius: 10px;
    touch-action: manipulation; /* Prevent default touch behavior like zooming */
}

#up {
    grid-area: up;
}

#left {
    grid-area: left;
}

#right {
    grid-area: right;
}

#down {
    grid-area: down;
}

#action {
    grid-area: action;
    background-color: #e44d26;
}

.horizontal-controls {
    display: flex;
    justify-content: space-between;
    grid-area: left / left / right / right;
}