/* Styles specific to Block merge */
#game-container {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    align-items: center;
    justify-content: center;
    width: 100%;
}

.game-board {
    border: 4px solid #30363d;
    background-color: #000;
    /* Make canvas responsive */
    width: 100%;
    max-width: 600px; /* 30 cols * 20px = 600px */
    height: auto;
    aspect-ratio: 1 / 1; /* 30 rows / 30 cols = 1/1 */
}

.side-panel {
    background-color: #161b22;
    border: 4px solid #30363d;
    width: 120px; /* Fixed width for side panels */
}

canvas#next-p1, canvas#next-p2 {
    width: 100px;
    height: 100px;
}

/* Responsive layout for larger screens */
@media (min-width: 640px) {
    #game-container .flex-col.sm\:flex-row {
        flex-direction: row; /* Side-by-side on larger screens */
        align-items: flex-start;
    }
}