.letters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 16px;
    background-color: #f3f3f3;
    margin-bottom: 4px;
  }

  .letter,
  .letter-block {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    background: #f5f5f5;
    font-weight: bold;

    
  }

  .letter {
    color: black;
  }

.letter-block {
  width: 32px;
  height: 32px;
  color: rgb(255, 255, 255);
  font-weight: 400;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;

  user-select: none;
  pointer-events: auto;
}


  .cells-wrapper {
    display: flex;
    gap: 15px;
  }


  .cell.drag-over {
    background: #eef;
  }


.cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.cell span {
  pointer-events: none;
  opacity: 0.6;
  font-size: 12px;
}

.delete-region {
  display: flex;
  height: 60px;
  border: 1px solid rgb(254, 188, 188);
  background-color: rgb(254, 242, 242);
  border-radius: 14px;
  align-items: center;
  justify-content: center;
}



.letter-block.touch-dragging {
  opacity: 0.85;
  transform: scale(1.1);
}

.allowed-akshars-container{
  background-color: rgb(251, 247, 241);
  border: 1px solid rgb(245, 197, 171);
  color: rgb(54, 53, 53);
  border-radius: 10px;
  padding: 6px 10px;
}