/* Estilos para a estrutura e layout principal */
.container {
    background-color: #333;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    text-align: center;
    width: 100%;
    max-width: 1200px; /* Aumentado para acomodar mais elementos */
    box-sizing: border-box;
}

.controls-wrapper {
    background-color: #444;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
    display: flex; /* Ativa o flexbox para as colunas */
    flex-wrap: wrap; /* Permite que as colunas se quebrem em telas menores */
    justify-content: center; /* Centraliza as colunas */
    gap: 20px; /* Espaço entre as colunas */
}

.control-column {
    display: flex;
    flex-direction: column; /* Itens dentro da coluna se empilham verticalmente */
    gap: 15px; /* Espaço entre os itens dentro da coluna */
    flex: 1; /* Permite que as colunas cresçam e ocupem o espaço disponível */
    min-width: 280px; /* Largura mínima para as colunas antes de quebrarem */
    max-width: 450px; /* Largura máxima para as colunas (ajuste conforme necessário) */
}

.soundboard-grid {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre as linhas do teclado */
    margin-bottom: 30px;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espaço entre as células */
}