.elementor-97 .elementor-element.elementor-element-dfc29d3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}#elementor-popup-modal-97{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-97 .dialog-message{width:1000px;height:auto;}#elementor-popup-modal-97 .dialog-close-button{display:flex;}#elementor-popup-modal-97 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS for html, class: .elementor-element-aec8e4f */.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.cards, .board {
    display: flex;
    flex-wrap: wrap;
    width: 800px; /* Largura total do tabuleiro */
    margin-bottom: 20px;
}

.card, .cell {
    width: 100px; /* Largura das células e cards */
    height: 40px; /* Altura das células e cards */
    margin: 2px; /* Margem pequena para ajuste visual */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
}

.cell {
    background-color: #e0e0e0;
}

.cell.dropzone {
    border: 2px dashed #000;
}

.points {
    display: flex;
    justify-content: center;
    width: 800px; /* Largura total para pontos */
}

.points span {
    margin: 0 10px;
}

.column-headers {
    display: flex;
    justify-content: space-between;
    width: 800px; /* Largura total do tabuleiro */
    margin-bottom: -1px; /* Ajusta para alinhar com as células */
}

.column-header {
    width: 100px; /* Largura das letras acima das colunas */
    height: 40px; /* Altura das letras */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d0d0d0;
    border: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box; /* Para garantir o alinhamento correto */
}

.row {
    display: flex;
    width: 800px; /* Largura total do tabuleiro */
}

/* Colorindo as linhas conforme solicitado */
.row:nth-child(-n+3) .cell {
    background-color: #b2d8b2; /* Verde pastel */
}

.row:nth-child(n+4):nth-child(-n+6) .cell {
    background-color: #b2b2ff; /* Azul pastel */
}

.row:nth-child(n+7) .cell {
    background-color: #f5e6a8; /* Amarelo pastel */
}/* End custom CSS */